WordPress の記事を装飾したりするのに JavaScript を利用する場合、テーマのフォルダに「js」などのフォルダを作り、その下に JavaScript ファイルを作成して読み込ませることが多いと思いますが、実は PHP ファイルに JavaScript のソースコードを書いて読み込ませることもできたりするんです。
前に「WordPressでJavascriptやCSSをどのように読み込むべきか | Naokix.net」で「wordpress javascript」などのキーワードで検索をしていて見つけた情報なのですが、一応メモしときます。あんまり需要はなさそうですが。
使用するテーマは「Twenty Fifteen」です。「最新の投稿」の文字色を jQuery を使って変化させてみます。
以前のエントリーでも述べたように、Twenty Fifteen はテーマ側で jQuery を呼び出してくれているので、
1 2 3 4 | function load_jquery(){ wp_enqueue_script('jquery'); } add_action('init', 'load_jquery'); |
のような、WordPress 標準装備の jQuery を呼び出すコードを省略することができます。Twenty Fifteen のテーマフォルダの下に「javascript.php」というファイルを作成しました。なんだか変なかんじ。
ソースコードは次のようになります。
1 2 3 4 5 | <?php header('Content-Type: text/javascript'); ?> jQuery(document).ready(function($) { $(".widget_recent_entries ul li a").css("color", "red"); }); |
１行目を忘れないようにしてください。WordPress 内部の jQuery 用のソースコードに変えてあることにも注意。これは以前のエントリーのものと同じです。文字コードは「Shift-JIS」、改行コードは「LF ONLY」です。
次に function.php をカスタマイズ。次のソースコードを追記してください。
1 2 3 4 | function test() { wp_enqueue_script('myscript', get_template_directory_uri().'/javascript.php', array('jquery'), false, false); } add_action('wp_enqueue_scripts', 'test'); |
今回作成した JavaScript の書かれた PHP ファイル（ややこしい）は、jQuery ライブラリと依存関係にあるため、第３引数が「array(‘jquery’)」となっています。
結果はこちら。
ちゃんと動くもんです。
表示速度を考慮して、HTML ファイルの </footer> と </body> の間にファイルを読み込んでもらえるようにしてみましょう。先ほどの function.php に追記したソースコードを次のように変更してください。
1 2 3 4 | function test() { wp_enqueue_script('myscript', get_template_directory_uri().'/javascript.php', array('jquery'), false, true); } add_action('wp_enqueue_scripts', 'test'); |
wp_enqueue_script 関数の第５引数を「true」にするだけです。
もちろん、ちゃんと動作します。
Comment