【WordPress】個別ページに自作jsファイルを読み込ませる方法

2021.02.21 — WordPress — 1 min read

やりたいこと

個別ページに自作jsファイルを読み込ませる
使わないページでは読み込まない
ワードプレスのエディタで直接編集

解説で使用しているサーバーは，Xserver．

手順

1. ファイル作成

Xserverのファイル管理画面を開いて，ファイルを作成する．
今回は，「my」フォルダを作り，その中に「my-script.js」を作成した．

2. jsファイルを読み込ませる

functions.php

1//CSSとJSファイルの読み込み
2add_action('wp_enqueue_scripts', function() {
3  //追加
4  if(is_page('/*指定の投稿ページID*/')) {
5    wp_enqueue_style('my-css', get_stylesheet_directory_uri().'/my/my-css.css');
6    wp_enqueue_script('my-script', get_stylesheet_directory_uri().'/my/my-script.js', array('jquery'));
7  }
8});
9
10//async付与
11add_filter('script_loader_tag', function($tag, $handle) {
12  if( in_array($handle, ['my-script']) ) {
13    return str_replace( 'src', 'async src', $tag );
14  } else { return $tag; }
15}, 10, 2);

このプログラムでは，jsの読み込みだけでなく，cssの読み込み例も記述してあります．
さらに，async付与でサイトの読み込み速度を改善しています．

他の方法

tmp-user/footer-insert.php

1<?php if ( is_single( /*指定の投稿ページ*/ ) ): ?>
2<?php echo '<script src='.get_stylesheet_directory_uri().'/my/my-script.js></script>'; ?>
3<?php endif; ?>

⚠注意
functions.phpとfooter-insert.phpのコードを両方は書かないでください．おそらくエラーの原因になります．

3. jsファイルの編集

１．のファイル作成時点で，勝手にテーマエディターへ追加されている．
あとは「my-script.js」を編集すればOK．

参考リンク

【WordPress】JavaScriptを自作して読み込みたい！
WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法

Tips

色々調べた中で，functions.phpに記載するタイプで出やすいエラー

URL違い

1get_template_directory_uri() //親テーマ
2get_stylesheet_directory_uri() //子テーマ

上は親テーマのURL，下は現在のテーマ（子テーマ）のURL．

スペルミス

1wp_enqueue_script('my-script');
2add_action( 'wp_enqueue_scripts', 'my_enqueue' );

のスペルでwp_enqueue_scripts←sの有無

ハンドル名被り

1wp_register_script( 'my-script', get_stylesheet_directory_uri().'/my/my-script.js', array(), NULL, true );

の’my-script’が既存の名前と被ってる．
参考：wp_enqueue_script

jsの中身でブロック名がダメ（よく分からん）

Gutenbergのブロック定義 js が読み込まない場合

フックしてない

1add_action( 'wp_enqueue_scripts', 'my_enqueue' );

これの書き忘れ．

wp_head()，wp_footer()が配置されてない

自作テーマや特殊なテーマを使ってるときに，header.php，footer.phpにこれらが記載されてないと実行されない．

その他気になる知見

フックアクションは下記のどちらかを使うのが多い．

1add_action( 'wp_enqueue_scripts', 'my_enqueue' );
2add_action( 'wp_print_scripts', 'my_enqueue' );

違いはよく分からない．

— WordPress —