WordPressで特定のページに任意のJSタグを追加する方法

先日受けた仕事で、WordPressサイトにおいて特定のページでのみ実行するJavaScriptを設置して欲しいとの依頼があった。

今回はその時に実際に採用した方法をソースコードを交えながら紹介していく。

編集するファイルはfunctions.phpのみ

特定のページのみに対しJavaScriptのコードを挿入する場合、WordPressではfunctions.phpの編集のみで対応することができる。

functions.phpのソースコード内に以下のコードを追記する。

add_action('wp_footer', function() {
  if(is_page('スラッグ名')) {
    $jsCode = <<< EOL
<script type="text/javascript">
  console.log('page');
</script>
EOL;
    echo $jsCode;
  }

}, 99);

2行目if文のis_page関数の引数に指定のページのスラッグ名を入力すると、そのページでのみ4〜6行目のscriptタグが出力される。

この場合は、1行目でwp_footerを指定しているので、タグは</body>の直前に出力される。
※ただしテンプレートファイル内でwp_footer()関数がコールされていることが前提である。

11行目の99は優先順位の指定で、この数字が低いと他のプラグインによるadd_actionが優先されるケースがあり得るため、</body>直前にタグを出力させたい場合は99など大きめの数字を指定しておけば間違いない。

トップページにのみ指定のタグを出力させたい場合

前述のコードは指定した固定ページに対する方法だったが、トップページに出力させたい場合は次のとおりとなる。

add_action('wp_footer', function() {
  // トップページ
  if(is_home() || is_front_page()) {
    $jsCode = <<< EOL
<script type="text/javascript">
  console.log('front_page');
</script>
EOL;

    echo $jsCode;
  }

}, 99);

3行目のif文の中身が変わっただけで、このif文の条件をコントロールすることで特定の記事ページなど、様々な条件を設定することができる。