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

やりたいこと

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

環境

  • Xserver
  • WordPress
  • Cocoon

他の環境でも,ある程度参考になると思います.

手順

1.ファイル作成

Xserverのファイル管理画面を開いて,ファイルを作成する.

今回は,「my」フォルダを作り,その中に「my-script.js」を作成した.

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

functions.php

if ( !is_admin() ) {
  function my_register() {
    wp_register_script( 'my-script',  get_stylesheet_directory_uri().'/my/my-script.js',  array(), NULL, true );
  }
  function my_enqueue() {
    my_register();
    if ( is_single( array( /*指定の投稿ページ*/ ) ) ) {
      wp_enqueue_script('my-script');
    }
  }
  add_action( 'wp_enqueue_scripts', 'my_enqueue' );
}

基本的にはこれで行けるはずです.

エラーが出る時

私の場合,エラーが出るので,次のやり方で読み込ませました.

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

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

3.jsファイルの編集

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

参考リンク

【WordPress】JavaScriptを自作して読み込みたい!ファイルの追加方法も記載
プログラマーがWordPressでホームページを作成した時に、ある程度設定を行ったら次はJavaScriptで ...
WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法
WordPressで特定のページでのみCSSやJSファイルの読み込みをする方法を解説します。この方法を使うと「固定ページでのみ特定の画像を表示」や「投稿ページでのみ特定のJSファイルを読み込む」といったことができるようになります。

Tips

エラー関連

functions.phpに記載するタイプで出やすいエラー

URL違い

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

上は親テーマのURL,下は現在のテーマ(子テーマ)のURL.

スペルミス

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

のスペルでwp_enqueue_scriptsここの有無

ハンドル名被り

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

の’my-script’が既存の名前と被ってる

wp_enqueue_script
void wp_enqueue_script( string $handle ] ] ] ) スクリプト(JavaScript)の重複出力を回避するために、使用するスクリプトを出力用のキューに入れる。パラメータ$srcが指定された場合は、グローバル変数$wp_scriptsに登録してから出力用のキューに入れる。

jsの中身でブロック名がダメ

【Wordpress】wp_enqueue_scriptが読み込まない原因と対処法【Gutenberg】 - チョッピーデイズ
【Wordpress】wp_enqueue_scriptが読み込まない原因と対処法【Gutenberg】 - チョッピーデイズ

フックしてない

add_action( 'wp_enqueue_scripts', 'my_enqueue' );

これの書き忘れ

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

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

気になる知見

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

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

違いはよくわからない.

タイトルとURLをコピーしました