PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

WEBサイトのCSSや、JavaScriptは、高速化の観点から、縮小化(余計な改行や スペース、コメントを取り除く)した方が良いとされています。

PageSpeed Insightsで、よく注意されるアレです。

PageSpeed Insightsでよく表示される改善点

ただ僕の場合、リソースを縮小化してしまうと、開発者ツールでデバッグがしづらいですし、不具合の原因にもなり得るため、あまり使用してきませんでした。高速化や、SEO的効果といっても、対応する面倒さ以上の効果もあまり感じないですし。

けれど、最近AMPなるものも出てきました。

これに対応させるには、CSSの総容量を50KBまでに抑える必要があります。今までは、CSSの総容量とかには、あまり気を遣う必要がなかったので、縮小化などは「まぁいいや」程度に思っていました。けれども、総容量に制限のあるAMPでは、なるべく多くのスタイルを書くとなると、縮小化は必要になってくるかもしれません(50KBあればかなり書けますが)。

なので、「何かCSSを縮小化するのに良いものはないか?」と探したら、CSSのみならず、JavaScriptやHTMLも縮小化することのできるライブラリ「PHP Function to Minify HTML, CSS and JavaScript」を見つけたので使い方などを紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

PHP Function to Minify HTML, CSS and JavaScriptを利用するには、以下の手順が必要です。

  • PHPファイルのダウンロード&設置
  • PHPファイルの読み込み
  • 縮小化関数を呼び出す

今回紹介するライブラリを利用することで、基本的にPHPコードで関数を呼び出すだけで、CSS、JavaScript、HTMLの縮小化をすることができます。

PHPファイルのダウンロード&設置

まずは、GitHubからPHPファイルをダウンロードします。

PHP Function to Minify HTML, CSS and JavaScript · GitHub

ダウンロードしたzipファイルを展開(解凍)すると「php-html-css-js-minifier.php」というファイルが出てきます。

php-html-css-js-minifier.php

これを、利用するPHPファイルと同じ階層のフォルダに置いてください。

PHPファイルの読み込み

あとは、PHPファイル内で、以下のようにライブラリを読み込みます。

縮小化関数を呼び出す

あとは、CSS、JavaScript、HTMLを以下のように関数を呼び出します。

CSSの縮小化

CSSファイルを読み込んで、縮小化してstyleタグ内に出力する方法は以下。

※見やすくするために、改行を入れています。

JavaScriptの縮小化

JavaScriptファイルを読み込んで、縮小化してscriptタグ内に出力する方法は以下。

HTMLの縮小化

一応、HTMLの縮小化方法は以下。

WordPressのCSSを縮小化する

例えば、WordpressでAMP用にstyle.cssファイルを縮小化するには以下のように行います(以下はTwenty Sixteenテーマでの例)。

functions.phpでstyle.cssの読み込みを解除

まずは、functions.phpで、ライブラリの読み込みと、style.cssの呼び出しを解除します。

<head></head>内でstyleタグ内に縮小化したCSSを出力

あとは、ヘッダーのheadタグ内で、style.cssを読み込んで、縮小化して出力します。

WordPressでファイルを読み込む場合は、file_get_contents()関数を利用すると、作法的に良くなさそうなので、WP_Filesystemオブジェクトからget_contents()メソッドで読み込んでいます。

まとめ

こんな感じで、GitHubで公開されているライブラリを使用することにより、単にコードを縮小化するだけなら、関数を一行書くだけで、手軽にできるようになっています。

このライブラリを利用することで、自前で、Autoptimizeプラグインのような処理を書くこともできると思います。

というわけで、「自前で動的にリソースを縮小化したい」とか「AMP用のCSSをなるべく縮小化して出力したい」なて時には便利かと思います。

サイト  PHP Function to Minify HTML, CSS and JavaScript

『PHPでCSSやJavaScriptを縮小化するWordPressカスタマイズ方法』へのコメント

  1. 名前:2001Y 投稿日:2016/10/18(火) 00:07:00 ID:1ea7139c2

    こちらはSimplicityには実装されないのでしょうか。

  2. わいひら 名前:わいひら 投稿日:2016/10/18(火) 12:15:09 ID:b35db8e67

    現在検討中です。

  3. 名前:2001Y 投稿日:2016/10/20(木) 00:40:27 ID:2f992ecd5

    現在検討中です。

    ありがとうございます!

  4. 名前:tasa 投稿日:2016/10/26(水) 01:07:09 ID:3a79a5d57

    こんにちは、
    Wordpress を利用しています tasa といいます。

    WordPress 用のフリーアドオン 『Easy Backup』 を公開しましたので
    その宣伝も兼ねて・・・、ではなくそれにかこつけてブログの宣伝に来ましたm(_ _)m。

    以下のリンクで公開してますので、ぜひ見に来てください。
    http://tenki.club/2016/10/post-131/

    ではでは。

  5. わいひら 名前:わいひら 投稿日:2016/10/26(水) 22:55:27 ID:b633e7146

    こんにちは。
    ご紹介ありがとうございます。
    今度試しに使ってみたいと思います。