自分が使っているWordPressのテーマに、JavaScriptの機能を追加したい。
そんな時のテーマカスタマイズ方法。
追加するの以下。
・navmenu.css（外部ファイル）
・navmenu.js（外部ファイル）
・表示部分のJavaScript
内容はレスポンシブに対応したナビゲーションだけど。
もちろん他の機能でもOKです。
１．外部ファイルをディレクトリにアップロード
外部ファイル（navmenu.css、navmenu.js）はあらかじめテーマディレクトリにアップロード。
今回は以下のようにした。
使用中テーマ/css/navmenu.css
使用中テーマ/js/navmenu.js
２．ファイルの読み込みをfunctions.phpに書く
外部ファイルの読み込みは、functions.phpに以下の内容を追記する。（公式テーマのTwenty Fourteenにもコメント付で書かれているので、見ると判りやすいとの事。）
functions.phpの追加内容
function navmenu_scripts() {
wp_enqueue_style( ‘navmenu-style‘, get_template_directory_uri() . ‘/css/navmenu.css‘ );
wp_enqueue_script( ‘navmenu-script‘, get_template_directory_uri() . ‘/js/navmenu.js‘ );
}
// navmenu_scripts() をサイト公開側で呼び出す
add_action( ‘wp_enqueue_scripts’, ‘navmenu_scripts‘ );
追記した部分についてザッと書くと。
navmenu_scripts
最初と最後にあるnavmenu_scriptsは、呼び出し時のスクリプト名。
スクリプト名_scriptsなど簡単な名前がいいと思う。
navmenu-style
CSS（スタイルシート）の名前。ここもスクリプト名-styleなど任意。
/css/navmenu.css
テーマディレクトリ内のCSSの場所。
以下はメモ。wp_enqueue_styleの内容を書くと
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_style( 識別名, URL, 依存スタイルシート, バージョン, メディア指定 );
$handle以外はオプション。詳しくは以下参照。
関数リファレンス/wp enqueue style – WordPress Codex 日本語版
navmenu-script
JavaScriptファイルの読み込み。同じくスクリプト名-scriptなど任意の名前。
/css/navmenu.css
テーマディレクトリ内のJSファイルの場所。
以下はメモ。詳しい利用方法は
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );wp_enqueue_script( 識別名, URL, 依存スクリプト, バージョン, HTML上の読み込み場所 );
$handle以外はオプション。以下参照。
関数リファレンス/wp enqueue script – WordPress Codex 日本語版
ちなみにjQueryを使う場合は、array( ‘jquery’ )が必要になるのだけど、これについてはまた別記事に。
参考サイト：
WordPress で CSS、JavaScript ファイルを読み込む正しい方法 | EastCoder;
wp_enqueue_script:WordPress私的マニュアル
これで、ヘッダーにファイル読み込まれているはず。
３．表示部分のテーマにJavaScriptを書く。
テーマファイル内に表示用のJavascriptを書けば、OK。
CSSについては、テーマファイルのstyle.cssに直接書くという方法でもいいと思うのだけど。
JavaScriptファイルは、functions.phpで読み込むのが何かと便利。
素敵なナビゲーションや、エフェクトなどもちょいちょいと追加できますヨ。
初めての方へ