WordPressプラグインやテーマには、独自のスタイルシートやJavaScriptを読み込み、表示の高速化の妨げになるものがあります。今回はそれらを削除・圧縮・結合・下方へ移動させる方法を紹介します。
ゆめぴょんです。こんちはっ(^^)/
WordPressプラグインをうまく使うと、かなりの時間短縮ができて便利です。しかし入れすぎると高速化にマイナスです。前回の記事までで6種類ものプラグインをはずすことに成功しました。
- 【WordPress】カスタムフィールド設置でAll in One SEOも不要に！プラグインなしで
- 【WordPress】RSSフィードに画像や関連記事を表示！YARPPプラグイン不要
- 【WordPress】カテゴリー順番を自由にプラグイン不要で変更する方法
- 【WordPress】サムネイル付の新着記事一覧をカテゴリー別でプラグイン不要で表示する方法
- 【WordPress】セルフピンバック・リビジョン・自動保存の停止方法！プラグイン不要
- 【WordPress】ページネーションの自動生成でSEO対策！プラグイン不要
今回はプラグインはずしの記事は一休みします。代わりに、テーマやプラグイン導入により高速化を妨げる要因となった部分を、改善する方法を考えてみました。
テーマ・プラグインでCSSやJSが挿入される場所
WordPressのテーマやプラグインを導入した時に、いくつかのCSS（スタイルシート）やJS（JavaScript）ファイルが読み込まれる場合があります。
まずプラグインの場合は、コンテンツがはじまる前のheadタグ内などに挿入されることが多いです。
または、フッター下方部のbodyタグの直前に挿入されることもあります。
テーマファイルで言うと「header.php」「footer.php」の中にそれぞれ「<?php wp_head() ?>」「<?php wp_footer() ?>」というPHPの記述があります。この場所に追加されます。
ちなみにテーマや一部のプラグインには、「functions.php」の中にCSS・JSの挿入記述がある場合もあります。私は確認できませんでしたが。「All in One SEO」とかかな。
挿入されるCSSやJSファイルを削除する方法
さて、WordPressテーマやプラグインによって挿入されたCSS・JSファイルを、あらかじめ確認しておきましょう。具体的にはブログのソースコードで「.css」「.js」を検索すると楽です。
そして不要で削除したり、まとめたり、下方へ移動したい場合は、いったんオリジナルを削除する必要があります。まずはテーマファイルの該当箇所を見てみましょう。
テーマファイルはWordPressで最重要です。修正前には必ずバックアップをとってください。もし問題が起こったらすぐ元に戻してください。全て自己責任でお願いします。
まずテーマファイル（functions.phpも含む）に直接記述しているCSS・JSの挿入については、コメント化するだけでいいでしょう。
それ以外は「<?php wp_head() ?>」「<?php wp_footer() ?>」によって生成されています。WordPressの独自関数によってそれぞれのCSS・JSを削除できます。
「wp_head」からCSS・JSを削除する方法
まずは削除したいCSS・JSをソースコードから見つけて、id名やファイル名をメモしておいてください。
そして「functions.php」に下のようなコードを挿入します。この例ではjQueryと「Crayon Syntax Highlighter」というプラグインで挿入されるCSSファイルを削除しています。
[php]
function my_scripts_method() {
wp_deregister_script(‘jquery’);
wp_dequeue_style(‘crayon-font-monaco’);
wp_dequeue_style( ‘crayon-theme-classic’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
[/php]
「crayon-font-monaco」などはハンドル名と呼ばれるのですが、ほとんどの場合は「id名」です。先ほどメモした内容を記述すればいいです。ただcrayonでは「-css」は不要でしたが。
「wp_deregister」や「wp_dequeue」などについては詳しく解説しませんので、気になる方はググって調べてください。私は下のブログも参考にしました。
⇒【Wordpress高速化日記】プラグインやテーマが読み込ませる.css,.jsファイル数を関数で減らしてみた｜ウェブシュフ
「jQuery」ファイルを削除するのは、テーマファイル「functions.php」の上方でも大丈夫です。重複した「jQuery」を削除して独自に読み込みたい場合などにもこの方法は使えます。
「wp_footer」からCSS・JSを削除する方法
これも「functions.php」の中に記述するのがスマートかもしれないけど、何を削除したのか忘れてしまうため、私は直接「footer.php」に下のように記述しています。
[php]
[/php]
「wp_footer」から取り除くためには、その直前に削除したい内容を記述すると、後々もわかりやすいかと思います。
テーマ・プラグインのCSSやJSを圧縮・まとめる方法
さて最初にCSS・JSファイルを削除する方法を書きましたが、それだけではテーマやプラグインが動かなくなるので、作業的にはこちらが先です。
CSS・JavaScriptファイルは数が増えるほど、表示速度の高速化を妨げる要因となります。それを防ぐためには次のような方法があります。
- なるべく1つにまとめる。または数を減らす
- 圧縮する
というわけで、可能な限りはどんどんマージ（結合）して1ファイルにまとめるのが最善策です。
ただし、標準のCSSファイル「style.css」などに取り込むのは私はオススメしません。なぜならプラグインを削除・変更した場合に、関連CSSを削除するのを忘れてしまうからです。
CSSやJavaScriptファイルを圧縮
このブログでは何度か紹介していますが、CSSやJavaScriptファイルを圧縮するウェブサービスを利用するのが便利です。下のサービスはYahoo!が提供するYUIというAPIを使っています。
下の記事でも紹介していますので、もしよければ参考にしてみてください。
まとめたCSSやJSをテーマファイル下方に移動
上で圧縮したり、まとめたりしたCSS・JSファイルは、可能な限り下方で読み込んだ方が、コンテンツ表示の妨げにもならず高速化につながります。
ただしファーストビューで利用するCSS・JavaScriptなどは、下方に移動させると画面が乱れる原因にもなるため、よく考えて実験も繰り返しながら調節するのがオススメです。
必要な時だけ読み込む設定方法
WordPressプラグインは便利だけど、不要な時にも読み込まれるのが無駄だと感じる時があります。
例えば上で紹介した「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」などソースコードを装飾するプラグインは、映画の感想記事では全く不要です。
だから私のブログでは、WordPressやブログ作成術などのカテゴリーに属する記事のみで、これらプラグインを読み込むように設定しています。
また「ホーム」「カテゴリーの一覧ページ」などで利用しているAutopager（もっと読む！のリンク）も、個別記事や固定ページでは読み込まないようにしています。
例えば次のように記述できます。利用する場合は「$cate_slug」にあらかじめ「get_the_category()」などでカテゴリー名を入力しておくのを忘れずに！
[html]
[/html]
まとめ：今日のゆめぴょんの知恵
今回の記事内容をざっくり言うと。
- まずはプラグインなどが挿入するCSS・JSファイルを見つける
- 次にそれらを圧縮したり、まとめたりする
- まとめたCSS・JSは下方へ配置。オリジナルは削除
- 表示速度の高速化は、地道な作業の積み重ねが大切！
ゆめぴょんでした。ちゃおっ！
