WordPress

WordPressでのJavaScriptの読み込み方法

投稿日:2016年10月1日 更新日:

WordPressでのJavascriptの読み込み方法についてのメモ。

WordPressのお作法があるので、それに則ります。

スポンサーリンク

functions.phpにJavaScriptの読み込み処理を追加する

WordPressのカスタマイズでお馴染みのfunctions.phpJavascriptの読み込み処理を追加します。

functions.phpの場所はこちら
[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/functions.php

ファイルの編集方法がわからない方はWordPressでfunctions.phpファイルを編集する方法が参考になります。

functions.phpへの追加の例は下記のようになります。

この例だと、
[WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/
に配置したcustom_js.jsというjavascriptファイルを読み込むという処理になります。

メソッド名(add_jsの部分)、識別子(custom_js)やファイル名(custom_js.jsの部分)はお好みに変えて大丈夫です。

JavaScript読み込み処理の解説

詳しく処理の解説をしていきます。

wp_enqueue_script()

スクリプトをインクルードするWordPressのメソッドです。
依存関係などを考慮してスクリプトをインクルードしてくれるので、WordPressでJavaScriptを読み込むなら、このメソッドを利用してインクルードした方が良いです。

参考:リファレンス

get_template_directory_uri()

テンプレートのディレクトリを取得するメソッドです。

参考:リファレンス

取得するディレクトリは下記。

WordPressのインストールディレクトリ]/wp/wp-content/themes/[使用しているテーマ]/

functions.phpの場所と一緒です。
今回の例では、このディレクトリにJavaScriptファイルを配置しています。

add_action()

メソッドをアクションにフックさせる関数です。

参考:リファレンス

今回の例では、wp_enqueue_scriptsアクションに、自作メソッドをフックさせています。

wp_enqueue_scriptsは、フロントのみに適応なので管理画面には影響を与えないとう性質です。

アクションの種類については、プラグイン API/アクションフック一覧を御覧ください。

まとめ

WordPressが用意しているお作法に則った方法のご紹介でした。

複数JavaScriptを読み込ませたい場合は、add_js()にwp_enqueue_script()のコールを増やせばOKです。

自作のPHPを読み込む場合は、WordPressの投稿にPHPの処理を埋め込む方法を御覧ください。

最後までお読み頂きありがとうございまいた!

スポンサーリンク


-WordPress

執筆者:

関連記事

【WordPress】記事内でPHP処理を行う2つの方法

こんにちは! DENです。 ワードプレスの記事の中でPHP処理を行う方法について。 直接WordPressの投稿編集画面にPHPを書いても動作しません。 正しくPHP処理を動作させる為の2つの方法をご …

プロフィール

このサイトを運営しているDENです。
アングラーのフリープログラマー。 主にプログラミングと釣の話を発信しています。
プログラミングで自由になり思う存分に釣りをしまくる生活実践中。
詳しいプロフィールはこちら 
フォスターフリーランス