PHPファイルに書いたJavaScriptソースをWordPressに読み込ませる

 WordPress の記事を装飾したりするのに JavaScript を利用する場合、テーマのフォルダに「js」などのフォルダを作り、その下に JavaScript ファイルを作成して読み込ませることが多いと思いますが、実は PHP ファイルに JavaScript のソースコードを書いて読み込ませることもできたりするんです。

 前に「WordPressでJavascriptやCSSをどのように読み込むべきか | Naokix.net」で「wordpress javascript」などのキーワードで検索をしていて見つけた情報なのですが、一応メモしときます。あんまり需要はなさそうですが。

 使用するテーマは「Twenty Fifteen」です。「最新の投稿」の文字色を jQuery を使って変化させてみます。

20150812_1_1

以前のエントリーでも述べたように、Twenty Fifteen はテーマ側で jQuery を呼び出してくれているので、

のような、WordPress 標準装備の jQuery を呼び出すコードを省略することができます。Twenty Fifteen のテーマフォルダの下に「javascript.php」というファイルを作成しました。なんだか変なかんじ。

20150812_1_2

ソースコードは次のようになります。

1行目を忘れないようにしてください。WordPress 内部の jQuery 用のソースコードに変えてあることにも注意。これは以前のエントリーのものと同じです。文字コードは「Shift-JIS」、改行コードは「LF ONLY」です。

 次に function.php をカスタマイズ。次のソースコードを追記してください。

今回作成した JavaScript の書かれた PHP ファイル(ややこしい)は、jQuery ライブラリと依存関係にあるため、第3引数が「array(‘jquery’)」となっています。

 結果はこちら。

20150812_1_3

ちゃんと動くもんです。

 表示速度を考慮して、HTML ファイルの </footer> と </body> の間にファイルを読み込んでもらえるようにしてみましょう。先ほどの function.php に追記したソースコードを次のように変更してください。

wp_enqueue_script 関数の第5引数を「true」にするだけです。

20150812_1_4

もちろん、ちゃんと動作します。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP