スポンサーリンク
WordPressのテーマファイルにjavascriptを書こうとすると、どうしてもWordPressのエディタの都合上、テーマファイルのヘッダやら、bodyの中やらにjavascriptを書きたくなってしまうのですが、やはりちゃんと別ファイルにして、WordPressの流儀で読み込ませたほうがだいたいいい結果になります。というわけで、外部ファイルとしてJavaScriptを用意して、それを読み込み、ちゃんとWrodPressのテーマエディタで編集できるようにする手順をメモしておきます。注意点は、拡張子を.phpにすることと、wp_enqueue_scriptを使って読み込ませることの２点です。
スポンサーリンク
ファイルを用意
まず、現在のテーマフォルダに、script.jsを配置します。
いや、配置したいのですが、「.js」を配置しても、エディタが表示してくれないので、ここは「.php」にして、「script.php」をテーマフォルダに配置します。single.phpと同じフォルダに設置するだけです。
script.phpの中身
script.phpはあくまでphpファイルなので、JavaScriptを書くために、冒頭に次を書きます。
<?php
header('Content-Type: text/javascript; charset=UTF-8');
?>
とりあえず最低限これだけ書いておけばいいのかな、という感じです（どこかのウェブサイトで見たけどそのページを見つけられない！）。
この続きに、普通にjavascriptを書いていきます。scriptタグのようなものは必要ありません。いきなり「jQuery(function(){...」のように書き始めて大丈夫です。
javascriptファイルを読み込ませる（wp_enqueue_script）
これだと、ただ編集出来るだけで、実際に読み込んでもらえません。
ここで、いきなりヘッダに
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
のように書くのはやめてください。やめなくてもいいのですが、WordPress的には、ちゃんと依存関係を解決して読み込ませる方法があるので、それに従います。それに従わないと、javascriptを最適化してくれるようなプラグインを入れても、プラグインがそのjavascriptを認識してくれなかったりします。
というわけで、例えばfunctions.phpに、次を追加します（この例は、jQueryに対する依存を明示して、jQueryの読み込みを必須化しています）。
$cssdir = get_stylesheet_directory_uri();
wp_enqueue_script( 'theme-script', $cssdir.'/script.php', array('jquery'));
詳しくはwp_enqueue_scriptのドキュメントへ。
スポンサーリンク
スポンサーリンク