WordPressの子テーマを使用中に、エックスサーバーの「mod_pagespeed」を有効にするとテーマカスタマイザーページでCSSがうまく読み込めない

WordPress4.1のアップグレードに合わせて「Twenty fifteen」というテーマが使えるようになったので、「東十条にある居酒屋のたぬきでよく料理の写真を撮るんで、ギャラリーサイトを作ってみようかな~」と思って、Twenty fifteen」を親テーマとして子テーマを作って適用したのですが・・・

WordPressの管理画面からテーマカスタマイザー(「外観」→「カスタマイズ」をクリックして開くページ)を見ると、CSSの読み込みができず、表示が崩れていました。

「外観」→「カスタマイズ」をクリックしてテーマカスタマイザーを開く

wpmodpagespeed02

「Twenty fifteen」を適用した場合

通常はこうなる。

wpmodpagespeed00

「Twenty fifteen」を親テーマとして子テーマを適用

下の画像のように崩れてしまった・・・

wpmodpagespeed01

「なんだろ?」と思ってたんですが、どうやらGoogle社で開発された拡張モジュール「mod_pagespeed」の設定を有効にしていると起こるようです。

mod_pagespeedとは

Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる機能です。
「mod_pagespeed設定」を有効にすると、ファイルを圧縮してデータ転送量を削減する、同種のファイルを一まとめにして無駄な通信を削減するなどの最適化処理を実施します。
この最適化処理により、Webサイトにアクセスしたブラウザはデータ転送量が減少し、また、ページのロード時間を短縮できるため、Webサイトの表示速度改善を期待することができます。

http://www.xserver.ne.jp/manual/man_server_mod_pagespeed.phpより)

対策はあるのか

エックスサーバーから提供されている「mod_pagespeed」は、設定を有効・無効にするいずれかの選択しかできないので、有効にした場合はテーマカスタマイザーの機能を満足に扱うことはできないようです。

なので、「mod_pagespeed」の設定を無効にしてテーマカスタマイザーの機能を使えるようにするか、機能は十分に使えなくてもいいから「mod_pagespeed」の設定を有効にしてWebサイトの表示速度を重視させるか、大きく分けるといずれかじゃないかな~とは思います。

場合によっては、テーマカスタマイザーを使いたい時に「mod_pagespeed」の設定を切り替えてもいいとは思いますけどね。

理想は「mod_pagespeed」の設定も有効にした状態で、テーマカスタマイザーが使えると一番いい感じですね。今後対応されるかもしれないので、気長に待とうと思っています。

もし何かいい方法がありましたらご教示くださいますと助かります。

著者:bouya Imamura