web-dev-qa-db-ja.com

JQueryを必要とするフィルタにJavaScriptスニペットを追加する方法

このコードを使用してjqueryを必要とするスクリプトファイルをwordpressのフッターに追加することができます。

<?php
function my_scripts_method() {
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0',
       true);
   // enqueue the script
   wp_enqueue_script('custom_script');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

しかし、ファイルではなく、通常のjqueryインラインの断片だけを追加したい場合はどうなりますか。どうすればこれができますか。

編集する

このスクリプトを使用してフッターに何かを追加できることはわかっています。

<?php
function myscript() {
?>
<script type="text/javascript">
 // This depends on jquery
</script>
<?php
}
add_action('wp_footer', 'myscript');

しかし、どのように私は使用されているスクリプトを指定するのですか jquery を実行する必要があります。

plugin-developmentjquerywp-enqueue-script
27
Saif Bechan

これを行う最も簡単な方法は、実際にはwp_enqueue_scriptと、Saifおよびv0idlessがすでに参照しているフッターアクションの組み合わせです。テーマやプラグインでjQueryを頻繁に使用していますが、他のスクリプトもすべてフッターに入れています。

実際に物事をキューに入れる最良の方法はこれでしょう：

function myscript() {
?>
<script type="text/javascript">
  if ( undefined !== window.jQuery ) {
    // script dependent on jQuery
  }
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );

function myscript_jquery() {
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_head' , 'myscript_jquery' );

しかし、このコードは、あなたがスクリプトをキューに入れていること、つまり、自分のプラグインまたはテーマでこれを行っていることを前提としています。

現時点では、インラインスクリプトをWordPressフッターに追加し、依存関係とともにロードする方法はありません。しかし、あなたが喜んでいるなら、代替があります。

代替案

WordPressがスクリプトで機能する場合、それらを内部的にオブジェクトにロードして、それらを追跡します。オブジェクト内には基本的に3つのリストがあります。

  • 登録済み
  • キュー
  • やった
  • to_do

wp_register_scripts()を含むスクリプトを最初にregisterすると、登録済みリストに配置されます。スクリプトをwp_enqueue_script()すると、キューリストにコピーされます。ページに印刷された後、完了リストに追加されます。

したがって、フッタースクリプトをキューに入れてjQueryを要求するのではなく、jQueryを使用し、プログラムでjQueryがロードされていることを確認する必要があるdocument.

これは wp_script_is() を使用して、スクリプトがリストされている場所を確認します。

function myscript() {
    if( wp_script_is( 'jquery', 'done' ) ) {
    ?>
    <script type="text/javascript">
      // script dependent on jQuery
    </script>
    <?php
    }
}
add_action( 'wp_footer', 'myscript' );

あなたはmightこの同じコードを使用してjQueryをフッターにロードすることもできますが、私はそれをテストしていません...マイレージは異なります。

30
EAMann

Wordpress 4.5以降、wp_add_inline_script()でインラインスクリプトを追加できます。 jQueryを必要とするフッターにJavaScriptスニペットを追加するには、このコードが役立ちます。

function enqueue_jquery_in_footer( &$scripts ) {

    if ( ! is_admin() )
        $scripts->add_data( 'jquery', 'group', 1 );
}
add_action( 'wp_default_scripts', 'enqueue_jquery_in_footer' );

function theme_prefix_enqueue_script() {
   if(!wp_script_is('jquery', 'done')) {
     wp_enqueue_script('jquery');
   }
   wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
}
add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

ワードプレスjquery付きのwp_add_inline_script

12
Dhinju Divakaran

以下のようにwp_footerアクションを使用してください。

add_action( 'wp_footer', 'wpse33008');
function wpse33008() {
?>
<script type="text/javascript">
    /** INSERT SCRIPT HERE **/
</script>
<?php
}
1
v0idless

_ op _ はjQueryの要件を指定したいと思っています、そしてWordPressの作者はスクリプトファイルに隣接してスニペットをキューに入れることを許可すべきでしたが、そうしませんでした。私のようにキューやその順番をまったく混乱させたくない場合は（スクリプトを組み合わせて最適化する他のプラグインを使用しているため）、答えは本当にwp_footerアクションを使用することです。

<?php

add_action(
    'wp_footer'
    , function() {
        ?>
        <script>
            if (window.jQuery) {
                // your snippet
            }
        </script>
        <?php
    }
    , 21 # after enqueued footer scripts
);
0
Walf