WordPressテーマに使いたいJavaScriptを読み込む

0 google+0 はてなブックマーク0
2015年3月12日1:54 PM|WordPress テーマ

自分が使っているWordPressのテーマに、JavaScriptの機能を追加したい。
そんな時のテーマカスタマイズ方法。

追加するの以下。
・navmenu.css(外部ファイル)
・navmenu.js(外部ファイル)
・表示部分のJavaScript
内容はレスポンシブに対応したナビゲーションだけど。
もちろん他の機能でもOKです。

1.外部ファイルをディレクトリにアップロード

外部ファイル(navmenu.css、navmenu.js)はあらかじめテーマディレクトリにアップロード。
今回は以下のようにした。
 使用中テーマ/css/navmenu.css
 使用中テーマ/js/navmenu.js

2.ファイルの読み込みを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私的マニュアル

これで、ヘッダーにファイル読み込まれているはず。

3.表示部分のテーマにJavaScriptを書く。

テーマファイル内に表示用のJavascriptを書けば、OK。

CSSについては、テーマファイルのstyle.cssに直接書くという方法でもいいと思うのだけど。
JavaScriptファイルは、functions.phpで読み込むのが何かと便利。

素敵なナビゲーションや、エフェクトなどもちょいちょいと追加できますヨ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です