WordPress ちょっとしたスクリプトを記述する簡単な方法

WordPress で、ちょっとした jQuery に依存するスクリプトを記述するとき、どのようにしていますか?

wp_head フックや wp_footer フックでスクリプトを直接出力したり、js ファイルを作成して組み込む等の方法がありますが、WordPress 4.5 から追加された wp_add_inline_script 関数を使えば依存するスクリプトや出力位置も簡単に指定できるようになります。

WordPress 4.4 以前の場合

function my_enqueue_scripts() {
	if ( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_head() {
?>
<script>
jQuery(function($) {
  $("span").append("Hello world!");
});
</script>
<?php
}
add_action( 'wp_head', 'my_head', 10000 );

wp_add_inline_script 関数を使用した場合

function my_enqueue_scripts() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}
	$script = '
jQuery(function($) {
  $("span").append("Hello world!");
});';
	wp_add_inline_script( 'jquery-migrate', $script, 'after' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

こんなに便利な関数なのにあまり使われていない(?)ようなので紹介してみました。

コメント

  • ねこもりや より:

    ここでコメントしていいのかわかりませんが、質問させてくださいませ。
    読み込ませたくないCSSファイルがある場合、「dequeue」を使って読み込ませないようにできるとあったので、やってみたのですが一向に思う結果が得られないのです。具体的に言うと、今使ってる親テーマが読み込むgenericons(アイコンフォント)のCSSが必要ないので、wp_dequeue_style( ‘genericons’ );をwp_headの直前に記述してみたのですが駄目でした、、、
    年明け早々、ご迷惑と思いますが、お暇なときに教えてくださると嬉しいです♪
    他にも、singleページだけに読み込ませたいCSSとかあるけど、まずは・・・

    • 石鷹 より:

      ここでコメントしていいのかわかりませんが、質問させてくださいませ。

      ねこもりや さんの質問は大歓迎です。パブリックでは問題がある場合は、Twitter の DM なども大歓迎です。

      テーマで組み込まれている CSS を削除する場合は、wp_enqueue_scripts フックが適切ですかね。
      気を付けたい点は読み込み順です。functions.php は子テーマ → 親テーマの順で読み込まれます。
      よって、親テーマの wp_enqueue_scripts より後に実行されるように指定する(wp_enqueue_scripts の第3引数を 10 を超える値)必要があります。

      function my_boston_scripts() {
      wp_dequeue_style( 'genericons' );
      }
      add_action( 'wp_enqueue_scripts', 'my_boston_scripts', 11 );

      ※ 読み込み順のデフォルトは 10 です。よって、10 を超える値の 11 を指定しています。

      お試しください。

    • 石鷹 より:

      singleページだけに読み込ませたい・・・

      投稿ページ (single) だけ読み込ませたい場合は、is_single() などを使用して下記のようにするといいかな・・・。

      function my_boston_scripts() {
      if ( ! is_single() ) {
      wp_dequeue_style( 'genericons' );
      }
      }
      add_action( 'wp_enqueue_scripts', 'my_boston_scripts', 11 );

      • ねこもりや より:

        す、すごい!
        出来ました~(^^)v
        勉強になります♪
        では、こんな風にまとめて書くのもOKですか?

        wp_dequeue_style( ‘genericons’ );
        }
        if ( is_singular() ) {
        wp_dequeue_style( ‘rew-san’ );
        wp_dequeue_style( ‘crayon-theme-epicgeeks’ );
        wp_dequeue_style( ‘crayon-font-monaco’ );
        }
        add_action( ‘wp_enqueue_scripts’, ‘my_boston_scripts’, 11 );

        • 石鷹 より:

          基本的には大丈夫です。
          ただし、プラグインによっては優先度を指定している (11 以上) 場合があります。稀ですが・・・。

          add_action( 'wp_enqueue_scripts', 'xxx', 123 );

          この場合は、その優先度よりも大きい値を指定しないといけません。
          プラグインのコードを見ればいいのですが、面倒なので、めっちゃ大きい値を指定するといいかと思います。(^^♪

          function my_boston_scripts() {
          wp_dequeue_style( 'genericons' );
          if ( is_singular() ) {
          wp_dequeue_style( 'rew-san' );
          wp_dequeue_style( 'crayon-theme-epicgeeks' );
          wp_dequeue_style( 'crayon-font-monaco' );
          }
          }
          add_action( 'wp_enqueue_scripts', 'my_boston_scripts', 99999 );

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。