WordPressで運営していると、WordPressで作成するサイトは実に様々なものが外部から読み込まれています。
WordPressではプラグインの追加などにより冒頭の行がどんどん増えていく傾向にあります。
その場合プラグインなどのファイルと重複したり、同じファイルを複数回読み込んだり、また、ファイルに依存関係がある場合に正しい順序で読み込まれなかったりする可能性があります。
<link rel='stylesheet' id='' src="．．．>
<script type='text/javascript' src='．．．>などというコードがソースの先頭の方にずらっと並んでいると思います。
ただ、そもそもjavascriptの読み込み方がわからない人も多いと思います。
- WordPressでどうやってJavaScriptやそのライブラリを用いたファイルを読み込むのかわからない。
【Wordpress】JAVASCRIPTの外部スクリプト読み込み！高速化のテクニック！読み込まない
WordPress内でのJavaScriptの読み込み方法の種類について説明していきます。
なお、テンプレートに直接記述するパターンは基本のJavaScriptの読み込み方と同じなので、WordPressでの関数を用いた読み込み方について解説していきます。
①テンプレートに直接記述して読み込み
まずはWordPressテーマのテンプレートに記述する方法です。
head内に<script>タグを記述して読み込んでいるパターンです。
| 1 | <script src=”<?php echo get_template_directory_uri(); ?>/something.js” ></script> |
後述しますが、正直なところ、表示が遅くなる可能性があるので、オススメはしません。
②WordPressのwp_enqueue_scripts関数で読み込み
2つ目はWordPressにある関数を用いて読み込む方法です。
具体的にはwp_enqueue_scriptsという関数を読み込みます。
functions.phpに下記のように読み込みます。
外部CSS・JavaScriptファイルを削除したい場合と、それとは反対に外部ファイルを追加したい場合に利用できるソースコードの例となります。
function add_my_files() {
//スタイルシートの読み込み
wp_enqueue_style( $handle, $src, $deps, $ver, $media)
//JavaScript の読み込み
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
//アクションフック（wp_enqueue_scripts）への登録
add_action(‘wp_enqueue_scripts’, ‘add_my_files’);
wp_enqueue_scriptの書式は下記です。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
| $handle | スクリプトの識別名。任意で付けられるけど、すでに読み込まれているスクリプトと被らないように注意。 なお、これ以外の引数は全てオプションなので、無くてもいい。 |
| $src | スクリプトの場所。URLを記述。 |
| $deps | 依存するスクリプトを配列で指定。jQueryを利用するスクリプトなら、array( ‘jquery’ )のように書く。無かったら空でarray()。 |
| $ver | バージョン。 ‘1.0.0’みたいな感じ。 |
| $in_footer | trueを指定すると、</body>終了タグの前にスクリプト読み込みされる。指定なし、もしくはfalseで、</head> タグ内で読み込み。 |
| $handle | （必須）スタイルシートを識別するためのユニークな（他と重複しない）ハンドル名を指定。link 要素の id 属性の値としても使用されます。 |
| $src | スタイルシートの URLを指定。（初期値： 空文字列） |
| $deps | 依存するスタイルシートのハンドル名を配列で指定（指定されたスタイルシートは先に読み込まれます）。依存関係がない場合は空の配列「array()」を指定。 |
| $ver （文字列|真偽値） | スタイルシートのバージョン番号を指定する文字列を指定。ファイル名の末尾にクエリパラメータとして追加されます。指定しないと WordPress のバージョン番号がパラメータに付与されます。NULL を指定するとパラメータは付与されません。（初期値： false） |
| $media （文字列|真偽値） | スタイルシートのメディアを指定。（初期値： ‘all’） |
③プラグインを用いて読み込み
3つ目はプラグイン「Simple Custom CSS and JS」などがあります。
管理画面からの管理も容易になり、テーマやコードに関する専門的な知識を持たないでもJavaScriptを反映しやすいのが特徴です。動作が重くなったり、予期せぬエラーが起きたりする場合もありますので、それは注意です。
最適な外部JavaScriptの読み込ませ方は？
WordPressでも基本のJavaScriptの読み込み方は何も変わりません。
基本はdefer属性を付与して読み込む サードパーティースクリプト等はasyncを使う シンプル、インラインはファーストビューで使う今回はasyncを利用するが良いと思われる。async属性を利用することで簡単にスクリプトを非同期で読み込むことが出来ます。
非同期でjsを読み込むとスクリプトをバックグラウンドでダウンロードできるので、ページのレンダリングを速くすることが出来ます。
defer属性
外部のJSライブラリ（jQueryとか）の機能を使ったJSファイルやプラグイン等、スクリプト間に依存関係がある場合にはこちらを指定する。
WordPressでJavaScriptを読み込む際も、基本はdeferを用いた非同期読み込みをします。
src属性を持つ<script>要素にdefer属性を付与することにより、パースが中断されなくなる。
そのスクリプト内に記述されたdocument.write()メソッドは無視されるようになる。
そのスクリプト内でdocument.write()メソッドが実行されない事が保証されることで、HTMLパーサーはパースを続行できる。
なお、defer属性はスクリプトが<script>要素の順に実行されることが保証される。
HTMLのパースは中断されないが、実行されるのはDOMツリー構築後であることに注意。
スクリプトが<script>要素の順に実行されることが保証される。
HTMLのパースは中断されないが、実行されるのはDOMツリー構築後であることに注意。
サードパーティースクリプトはasync属性を使う
サードパーティースクリプトasync属性を利用する。スクリプトが<script>要素の順に実行されることが保証されない。
スクリプトのダウンロードが終わると直ちにコンパイル＆実行されるため、スクリプト間の依存関係が無い場合はこちらの方が高速。ダウンロードが完了した順に実行される
javascriptで対応できない場合
外部CSS・JavaScriptファイルを読み込むタグが、タグの前にある場合があり、それらは上記のアクションフックwp_enqueue_scriptsでは削除できません。
そのような場合には、アクションフックwp_footerを利用することで、直前にあるタグの削除や、直前にタグを追加できます。
アクションフックwp_footerを利用することで、</body>直前にあるタグの削除や、</body>直前にタグを追加できます。</body>タグの前にあるcssファイルを読み込むタグを削除する場合となります。
functions.phpに記述します。
function my_wp_footer(){
// プラグイン「YARPP」のスタイルシートを削除
wp_dequeue_style( 'yarppRelatedCss' );
}
add_action( 'wp_footer', 'my_wp_footer' );まとめ
WordPressでもJavaScriptを用いる場合は表示速度に大きく影響します。
メンテナンスをしっかりすることで、JavaScriptを使いつつ、表示高速化も可能です。
コメント