wordpressでcssとjsの追加と読み込み位置を後にする方法
ワードプレスのcssやjsに限りませんが、ホームページ全体だとHEADタグ内においてcssやjsを読込みしているケースが多いと思います。これが当たり前の時期もあったのですが、いつしか「レンダリングを妨げるリソースの除外」という風潮が強まってきました。これは、HEAD内にcssやjsが存在すると、その読み込みが終わるまで次の処理に移れないためです。つまり、レンダリングブロックによる空白表示をなるべく抑えて、少しでも形あるものを表示させようという発想からきています。
wordpressのcssとjsをまとめてフッターに移動
以下の方法ではまとめて処理しています。一つ一つ変更する方法は後述します。いずれも「functions.php」に記述して利用します。
wordpressのcssの読み込み位置を変更
ワードプレスのcssをオブジェクトのforeachで解除しています。cssに限ってはフックを二つ使っています。このやり方ではURLも対になって配列に代入されるため、個別に変更することはできません。
wordpressのcssを個別に移動
以下は上記のやり方と違い、ハンドル名ごとに一つ一つ処理してます。上のフックでハンドル名の解除、下のフックで再登録しています。追加する場合、ヘッダーに出力させるには上のフックに「wp_enqueue_style('好きなハンドル名','任意のURL');」のコードを入れて置き換えるだけです。フッターに出力させるには下のフックに上述したコードを入れて置き換えます。
wordpressのjsの読み込み位置を変更
以下はワードプレスのjsをオブジェクトのforeachでそのまま出力させています。jquery関連は登録方法が異なるためか、オブジェクトにforeachかけても出てきませんでした。そのため、同一フック内で個別に処理しています。cssと異なり、こちらは解除から出力までの一連を一つのフックで完了します。ただ、個別にする場合は以下の通り、三つの処理が必要である上にURLも登録しなければなりません。
jsの追加も同様で、追加するのが目的である場合は、foreachの部分を取り除いて下さい。jqueryのハンドル名が入っている終わりから三行目までの部分です。それ以外はアクションフックの無名関数（クロージャ）から取り除けばOKです。アクションフックと無名関数は必要です。
追加分が複数ある場合は、その三行部分の書式で繰り返してください。二つ登録するなら六行、三つ登録するなら九行となります。いずれもセミコロン（;）までを一行としています。URLは追加する分だけ用意して下さい。
ワードプレスでcssを弄っていると、その内容が反映されない時があります。というより、対処していなければ大抵反映され...
ワードプレスには圧縮プラグインも色々ありますが、これを自分で作ってしまおうという記事です。プラグインは簡単に導入で...
wordpressのcssとjsのバージョン情報を削除
ワープレは基本的にcssやjsのURLにバージョン情報を追加しています。セキュリティ的に脆弱性のあるバージョンが分かるということで、この追加情報を削除したほうが良いといった見解もあるようですが、それほど気にすることではないように思います。
むしろ、ワープレ本体で脆弱性のあるバージョンが表示されてしまうほうが問題かも知れません。とはいえ、ワープレにも自動アップデートが導入されているため、バージョンが分かるというだけでいきなりリスクが高まるというものではありません。自動アップデートを拒否して、尚且つ脆弱性のあるワープレで公開している場合は別ですけれども。
ワープレは標準だとそのシステムや他のプログラムファイルなどのバージョン情報がhtmlソースに含まれています。例...
まとめ
cssとjsは、インターネットの黎明期ではHEADタグ内に記述するのが普通でした。styleタグを使おうと外部から引っ張ろうと、HEAD内に記述するのが当たり前だったのです。それがいつの間にかレンダリングブロックをする要素としてcssとjsが矢継ぎ早に指摘されるようになったわけです。黎明期に比べると回線速度は速くなっているのに、なぜ指摘されるのか。それはcssとjsの大容量化がはじまったからだと思います。あと、検索エンジンの後押しもありますかね。
これらの問題は、回線速度と端末のスペックが上がれば解決するでしょうか。進化というのは停滞期はあっても後退するなんていうのは殆どのケースでないでしょうから。いつの時代か、こんなことしてたんだ、って過去の技術になるのかも知れません。