jQueryを必要とするフッターにJavaScriptスニペットを追加する方法


27

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

<?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を実行する必要があります。


これを行うための組み込み関数はありませんが、それが理由wp_register_scriptwp_enqueue_script存在しますが、jquery自体を使用して確認できます。
ワイク

2
投票権を失って申し訳ありませんが、あなたは私の質問を理解していないと思います。私はコーデックスを読み、オプションについて知っています。しかしwp_enqueue_script、スクリプトファイルをフッターに入れたくないので、jqueryを必要とするスニペットをフッターに追加します。コーデックスから直接得た答えをダウンボットしました。コーデックスを読みましたが、答えが見つかりませんでした。だから質問をします。あなたが再びコーデックスに私をリダイレクトする場合、私はダウン投票します。
サイフBechan

wyckに感謝します。これが事実だと思います。質問を正しく理解してくれてありがとう。スクリプトを確実に実行できるようにするのではなく、外部JSスクリプトを使用するだけだと思います。
サイフBechan

回答:


30

これを行う最も簡単な方法は、実際に、wp_enqueue_scriptSaifと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()、登録済みリストに配置されます。いつwp_enqueue_script()スクリプトは、それがキューリストにコピーされます。ページに印刷された後、完了リストに追加されます。

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

これは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' );

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


提供されたコードスニペットは、WordPressプラグイン開発標準で受け入れられていますか?はいの場合は、プラグインで使用します...これについての返信をお願いします
...-laraib

最後のスニペット?いいえ。WordPressプラグインは常にスクリプト要件をキューに入れる必要があります。このようにjQueryをキューシステムの外部に強制的にロードすることは、環境の100%を制御する独自のサイトで行うべきことです。プラグインがそれを行うことは決して適切ではありません
EAMann

それから、そのための実例をいくつか教えてください... ...
laraib

私は初めてのWordPressプラグインを開発しているので、WordPressチームに受け入れてもらいたいと思います...あなたの応答をお待ちください... ...
laraib

12

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


1

次のwp_footerようなアクションを使用します。

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

1
これは良い答えではありません。jQueryが必要なスクリプトを指定する方法を尋ねました。ユーザーがjqueryを実行していない場合、実装は実行されません。
サイフBechan

0

私が知っているOPは jQueryの上の要件を指定したい、と私はそれを強制しようとしていないお勧めしますので、WordPressの著者は、スニペットは、スクリプトファイルに隣接してエンキューすることを許可している必要がありますが、彼らはしませんでした。私のようにキューやその順序をまったく使いたくない場合(スクリプトを結合および最適化する他のプラグインを使用しているため)、実際の答えは次のwp_footerようなアクションを使用することです:

<?php

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

-2

wp_footerこれを行うためにアクションを使用できます。wp_footerのコーデックスを確認してください。


私は知っていますが、フッターに追加するスクリプトがjqueryに依存することをどのように指定できますか。編集内容を確認して、より明確にしてください。
サイフBechan

あなたは人々の答えを投票する前にコーデックスを読み返すことさえ気にしますか?in_footerへの議論について読んだことがありますwp_enqueue_scriptか?これを読む:codex.wordpress.org/Function_Reference/wp_enqueue_scriptをwp_footerアクションでそれを使用する方法を説明します。
ラトウィックガンガード
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.