【初心者向け】WordPressにJSファイルを読み込む方法を解説【JavaScript】
本記事ではJSファイルをWordPressに読み込む方法について説明します。
私はWordPressもJavaScriptも始めて2カ月ほどですが、この方法で実際にJSファイルをアップすることができました。
私自身が初心者だからこそ、初心者の方がつまづきやすいポイントまでしっかり抑えて説明しますので、ぜひ参考にしてください。
手順1：サーバーにJSファイルをアップロードする
まずはじめに、サーバーにJSファイルをアップしましょう。
アップロード先は子テーマフォルダー内としています。
※以下の手順はmixhostの場合で説明していますが、その他のサーバーの場合でも大きな違いはありません。
①サーバーにアクセスしてドメイン名をクリック
②ファイルマネージャーを開く
③ドキュメントルート(※後述)内の「/wp-content/themes/(子テーマ、下図ではcocoon-child-master)」を表示し、「アップロード」をクリック
(他のサイトを見ると、親テーマ内に保存する場合もあるようです。)
memo
※ドキュメントルートは以下の手順で確認できます。
a) ドメイン名をクリック(上記①と同じ)
b) cPanel(コントロールパネル)にログインする
c) ページ中段の「ドメイン」をクリック
d) 下図の「ドキュメントルート」の部分を確認
通常は「/public_html」か「/public_html/(ドメイン名)」のどちらか
④「ファイルの選択」をクリックし対象ファイルを選択する
元の画面に戻り、フォルダ内に対象のファイル名が表示されていれば、アップロード完了です。
手順2：JSファイルをWordPressに読み込む
サーバーにJSファイルをアップしたら、それをWordPressに読み込む処理を追加しましょう。
本記事では2つの方法をご紹介いたします。
※この作業を行う前にバックアップを取ることを推奨します。
方法1：header.php,footer.phpにJSファイル読み込み処理を記述
1つ目の方法はheader.php、footer.phpに処理を記述する方法です。
対象JSファイルを読み込む位置に応じてどちらかに記述してください。
header.php、footer.phpの場所は以下の通りです。
WordPressのダッシュボードから「外観」→「テーマエディター」をクリック
テーマファイル内にheader.php, footer.phpがあります。
cocoonの場合にはtmp-user下のheader-insert.php, footer-insert.phpを使用してください。
対象のphpファイルが見つかったら、以下のように記述してください。
(test.jsの部分は適宜変更してください。)
<script src="<?php echo get_stylesheet_directory_uri() ?>/test.js" type="text/javaScript"></script>
get_stylesheet_directory_uri()は子テーマフォルダのディレクトリを取得する処理です。
手順1でJSファイルを親テーマフォルダに保存した場合は、代わりにget_template_directory_uri()としてください。
また、ある特定の記事だけJSファイルを読み込みたい場合には、以下のように記述してください。
<?php if(get_the_ID() === 投稿記事のID): ?> <script src="<?php echo get_stylesheet_directory_uri() ?>/test.js" type="text/javaScript"></script> <?php endif; ?>
「投稿記事のID」は投稿画面で確認できます。
まとめると以下のような感じになります(cocoonの場合)。
方法2：function.phpに読み込み処理を記述(WordPress推奨の方法)
2つ目の方法はfunction.phpに処理を記述する方法です。こちらがWordPress推奨の方法となります。
(ちなみに、私はこの方法ではうまく行かなかったので方法1を使っています。)
function.phpの場所は先ほどのheader.phpやfooter.phpと同じです。
function.phpに以下のように記述してください。
(test.jsの部分は適宜変更してください。)
function my_scripts_method() {
wp_enqueue_script(
'custom_script',
get_stylesheet_directory_uri() . '/test.js',
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
wp_enqueue_scriptについて詳しくはこちら。
引数でJSファイルの読み込み位置などを制御できます。
手順3：デベロッパーツールで動作確認する
最後に実際に読み込まれているかどうか確認しましょう。
対象のJSファイルを読み込むページを表示し、Ctrl+Shift+iでデベロッパーツールを表示します。
Networkタブを選択し、Ctrl+rを押した後に出てくる一覧の中に、対象のJSファイルがあれば読み込まれています。
以下、関連記事です。
以下の記事では、本記事の方法で読み込んだJSファイルでグラフを描画しています。
カスタムJavaScriptを用いる方法については、以下の記事で紹介しています。
