今日覚えたWordPressの小技シリーズだ。
この写真のお姉さんに教えて貰ったのだ。
と言うのは妄想。
例えば、WordPressサイトをパソコンのブラウザーで表示した場合にのみ特定のJavaScriptファイルをロードしたい。
スマホやタブレット端末などのモバイルデバイスではロードしたくない。
最近物忘れが激しいので、そう言う小技を備忘録としてメモしておく。
ワテの場合には、この「われこのサイト」のWordPressのテーマにはSimplicity2を使っている。
＝＞現在は、Simplicity2の後継のCocoonを使っている。同じ作者さんだ。
では、本題に入ろう。
JavaScriptファイル読み込みはwp enqueue script() に任せる
一般に、JavaScriptファイルをサーバーサイドで読み込みたい場合には、PHPで以下のように記述しておけば良い。
<?php <script src="https://www.wareko.jp/・・・/my.js" ></script> ?>
ワテの場合も、当初はWordPressのテーマ（Simplicity2を使用）の中で、header-insert.php ファイルの中に上の記述をしていた。
これだと無条件に読み込むので、表示デバイスがPCでもモバイルでも兎に角このJavaScriptファイルがページに読み込まれる。
今回は、PCの場合にのみJavaScriptファイルを読み込ませたい、そんな状況に直面した。
そのやり方であるが、
Simplicity2の場合には、以下のPHPコードをfunction.phpに追加しておけば、PC表示の場合にのみ特定のJavaScriptファイルを読み込むように出来る。
add_action( 'wp_enqueue_scripts', 'my_PC_only_js');
function my_PC_only_js(){
if( !wp_is_mobile() ){
wp_enqueue_script( 'my-PC-only-js', 'URL_TO_MY_JS_FILE', array(), '1.0', true );
}
}
PC表示の場合にのみ特定のJavaScriptファイルを読み込む手法
要点としては、add_action() 関数で引数 ‘wp_enqueue_scripts’ を指定して使うのだ。
wp enqueue scriptとは
ワテの場合、こんな関数は使った事が無い。
wp enqueue script()の説明を引用すると以下の通り。
説明
スクリプトファイルがまだインクルードされていない場合、また、すべての依存するスクリプトが登録済みの場合、依存関係に従った適切なタイミングでファイルを生成されたページにリンクします。スクリプトのリンクは、wp_register_script() /en 関数ですでに登録済みのハンドル、またはこの関数に必要なパラメータを与えることで行えます。これは WordPress が生成するページに JavaScript をリンクする際に推奨されている方法です。
引用元 https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script
説明を読んでも良く分からん。
「適切なタイミング」とは何なのかな？
まあ兎に角、この関数wp enqueue script()にJavaScriptスクリプトファイルの読み込みを任せておけばいいタイミングで読み込んでくれるのかな。
wp enqueue scriptの使い方
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
ワテの実例
wp_enqueue_script( 'my-PC-only-js', 'URL_TO_MY_JS_FILE', array(), '1.0', true );
wp enqueue scriptのパラメータ
同じく https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script から引用する。
$handle
（string） （必須） スクリプトのハンドルとして使われる名称。
まあ$handleにはスクリプトに適当な名前を付けておけば良いようだ。
$src
（string） （オプション） スクリプトの URL。例: http://example.com/wp-content/themes/my-theme/my-theme-script.js。ローカルスクリプトの URL は絶対に直接書き込むべきではない。
URLは絶対パスで指定するのが良いらしい。相対パスだと何か問題があるのかな？
少し調べたが分からなかった。まあ、確かに絶対パスのほうが間違いは無いし、分かり易い。
$deps
（array） （オプション） このスクリプトが依存する他のスクリプトのハンドル配列、つまり、このスクリプトより前に読み込まれる必要があるスクリプト。このパラメータは、その $handle のスクリプトが wp_register_script() を使って登録されていない場合のみに必要。デフォルトのハンドルはすべて小文字。
初期値： array()
読み込むスクリプトが複数有る場合に、依存関係を設定して、読み込み順番を指定出来るらしい。
まあ、今回はそんなややこしい事はやらないので、初期値 array() を入れておいた。
$ver
（string） （オプション） クエリストリングとしてファイルパスの最後に連結される、スクリプトのバージョン番号を指定する文字列 (存在する場合) 。
初期値： false
ブラウザーがJavaScriptファイルを読み込む場合にキャッシングの機能があるが、ここで指定したバージョン番号がそれに使われるようだ。
まあ、ワテの場合には取り敢えず Ver 1.0 にしておいた。
$in_footer
（boolean） （オプション） スクリプトは通常 HTML ドキュメントの <head> に置かれるが、もしこのパラメータが true の場合 </body> 終了タグの前に配置される。テーマ内の適切な位置に wp_footer() テンプレートタグが含まれていることが必須となる。
初期値： false
戻り値
(void)
この関数には戻り値はありません。
読み込むJavaScriptファイルをどこに入れるかを指定出来るらしい。
true : </body> の直前
false: <head> 内（デフォルト）
との事だ。
ワテの場合には、他のJavaScriptファイルの読み込みが完了した時点で、目的のJavaScriptを読み込みたいので true にセットしして、body最後尾で読み込む事にした。
モバイルの場合にのみJavaScriptファイルを読み込みたい場合
今回は、Simplicity2の子テーマの header-insert.php の中で以下の記述をした。
これでPCの場合にのみ何かをやる事が出来た。
if( !wp_is_mobile() ){
・・・ // ＰＣ表示の場合にのみやりたい処理
}
関数 wp_is_mobile() はWordPressが持っているモバイルデバイス判定関数だ。
なので、もしモバイルの場合にのみ何かやりたいなら、以下のようにすれば良い。
if( wp_is_mobile() ){
・・・ // モバイル表示の場合にのみやりたい処理
}
まあ要するに、if文条件の否定(!) の有無の違いだけだ。
まとめ
当記事では、WordPressにおいてPCで表示された場合にのみ特定のJavaScriptファイルを読み込む手法を紹介した。
要点としては、add_action() 関数で引数 ‘wp_enqueue_scripts’ を指定して使う。
そうしておくと、WordPressが適当なタイミングで上手い具合にJavaScriptファイルを読み込んでくれる。
またオプションパラメータを指定すると、バージョン番号の指定、依存ファイルとの関係を指定して読み込み順番の指定、HTMLページのheadにいれるかbody末尾に入れるかの指定などが可能になる。
WordPressを使ってアフィリエイトをやる
ワテがこの本よりもやさしい教科書を書いてみるかな！
ほんまかいな！？
PHPをマスターする
C, C++が好きなワテとしてはPHPの文法は馴染みにくい。
特にPHPでは配列が連想配列なのが馴染みにくい。
ワテの場合、配列と言えばインデックス式でアクセスするシンプルな方式が好きなのだ。
ちょっとしたループ処理をしたい場合でも、PHPは連想配列なので、
- えっと~、Keyは何だっけ？
- Valueはどうやって取り出すんだっけ？
- なんで簡単にインデックスでアクセスできひんのや！
なんて混乱する。
まあ、慣れの問題やな。
コメント