情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

WordPress初心者が間違いやすいJavaScriptファイルの設置方法

JavaScript (13) PHP (25) WordPress (76)

WordPressのテーマファイルにjavascriptを書こうとすると、どうしてもWordPressのエディタの都合上、テーマファイルのヘッダやら、bodyの中やらにjavascriptを書きたくなってしまうのですが、やはりちゃんと別ファイルにして、WordPressの流儀で読み込ませたほうがだいたいいい結果になります。というわけで、外部ファイルとしてJavaScriptを用意して、それを読み込み、ちゃんとWrodPressのテーマエディタで編集できるようにする手順をメモしておきます。注意点は、拡張子を.phpにすることと、wp_enqueue_scriptを使って読み込ませることの2点です。

ファイルを用意

まず、現在のテーマフォルダに、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のドキュメントへ。

コメント(0)

新しいコメントを投稿