サポート » 使い方全般 » wp_enqueue_scriptの使い方

  • 解決済 tkj_tkj

    (@tkj_tkj)


    お世話になります。

    wp_enqueue_scriptを初めて使うに当たって製作に苦慮しております。

    ワードプレスのテンプレートのheader.phpに以下の記述があります。

    <?php
    /* Javascript */
    wp_enqueue_script(‘jquery’); // jQuery including by wordpress
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX

    /* Javascript support for comments */
    if ( is_singular() && get_option( ‘thread_comments’ ) ) { wp_enqueue_script( ‘comment-reply’ ); }

    /* plugin and theme output with wp_head() */
    wp_head();
    ?>

    こちらはサーバ上にjsフォルダーを作ってそこから呼び出しているようなのですが、、、

    ○実装したい別JQUERY
     http://zxcvbnmnbvcxz.com/jquery-easy-pulldawnnav/

     1:上記サイトのJQUERYのコードをどこにかけばいいのか、
     2:wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXXのXXXXXXX部分(識別名?ハンドル名?スクリプト名?)というのはどのように設定したらいいのか

    ○今 考えていること
     上記サイトにあるJQUERYのコードをファイル化して
     識別名をつけて呼び出すのかなぁ・・・と考えてますが
     具体的な手段が分かりません。

    どなたかご教示頂ければ幸いです。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • tkj_tkjさん

    ○今 考えていること
     上記サイトにあるJQUERYのコードをファイル化して
     識別名をつけて呼び出すのかなぁ・・・と考えてますが

    そのとおりでオッケイですよ。

    Codexの wp_enqueue_script の項(英語ですが)もご参照いただければとおもいますが、たとえば当該のスクリプトを foo.js というファイル名でテーマ内の js ディレクトリに保存した場合

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'foo', get_stylesheet_directory_uri() . '/js/foo.js' );

    で有効になるはずです。

    teckingさん

    ありがとうございます。

    1点ご質問なのですが
    今 既存のダウンロードしてきたワードプレステンプレートでは

    <?php
    /* Javascript */
    wp_enqueue_script(‘jquery’); // jQuery including by wordpress
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    wp_enqueue_script(‘XXXXXXXX’); // XXXXXXXX
    ?>

    このように XXXXXXには有名どころで言えばNivoスライダーなどが入っているのですが、

    1:この記述を省いていい時と悪いときの違いについて

    wp_enqueue_script( ‘foo’, get_stylesheet_directory_uri() . ‘/js/foo.js’ );

    のような記述がないありません。

    2:スクリプトがファイル名だと理解したのですが
    今のテンプレートのjsフォルダー内の実際ファイル名は
    jquery.foo.min.js
    のような感じになってます。

    1.2ともにどちらでもいいものなのでしょうか?

    ※ちなみに一回 JQUERYを記述してみましたが動きませんでした・・・笑

    もう少し頑張ってみます。

    1:この記述を省いていい時と悪いときの違いについて

    wp_enqueue_script( ‘foo’, get_stylesheet_directory_uri() . ‘/js/foo.js’ );

    のような記述がないありません。

    wp_enqueue_script() の第2引数がないものは、あらかじめ wp_register_script() でハンドルとスクリプトファイルが紐づけられているはずです。テーマの functions.php にその記述がありませんか?

    結果としてはどちらも同じになるのですが(おそらく)、テーマ内の複数の箇所でスクリプトを呼び出すのであれば、あらかじめ wp_register_script() でスクリプトファイルを登録しておくのがいいかもしれませんね。

    今のテンプレートのjsフォルダー内の実際ファイル名は
    jquery.foo.min.js
    のような感じになってます。

    追加したスクリプトファイルは foo.js のようなファイル名でかまいません。*.min.js というのは、改行やインデントなどをカットしてファイルサイズを小さくした「圧縮版(minify)」を示しているものですので。

    ※ちなみに一回 JQUERYを記述してみましたが動きませんでした・・・笑

    おそらくjQueryの noConflict 問題でしょうね。
    詳細はググっていただければとおもうのですが(すみません)WordPressに内包されているjQueryを使う場合、ネット上で流通しているスクリプトをそのまま記述してもサクっと動かないケースがしばしばあります。

    例示されたサイトのスクリプトをWordPress内のjQueryで実行したい場合、以下のようにすればうまくいくかとおもいます。

    jQuery(document).ready(function($) {
    	$('.nav').hover(function(){
    		var nav = $(this).find('li').length;
    		$(this).animate({'height':24 * nav + 'px'},'fast');
    	},function(){
    		 $(this).animate({'height':'24px'},'fast');
    	});
    });

    teckingさん

    ありがとうございます!

    function.phpの中に wp_register_script() を
    発見しました。

    こちらを作成し、
    わざわざ最後に作って頂いたもので実施してみます。

    そして再度 勉強してみます。
    ありがとうございました!

    functions.php に発見できてなによりです。

    うまくいったら、本トピックを「解決済み」にして閉じておいてくださいね。

    ありがとうございます。
    完璧に表現できました。

    感謝申し上げます。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「wp_enqueue_scriptの使い方」には新たに返信することはできません。