WordPressサイトの表示崩れ問題の顛末

6月 16, 2018 | IT, ウェブ

ブログ　WordPressサイトの表示崩れ問題の顛末

関連記事

さて、本日は私が制作管理しているWordPressサイトで発生した表示崩れ（ダッシュボードおよび公開サイト）の問題解決がしたのでその顛末を書いてみたいと思います。

現象としては、写真のようにCSSが効いていない感じでWordPressの管理画面（ダッシュボード）と公開ページで起こります。

ブログ　WordPressサイトの表示崩れ問題の顛末

いつから表示崩れの現象が発生したのか定かではありませんが、おおよそ１か月ほど前かなぁと。早速調査に乗り出すことに。色々とググって調べてみて試してみるも一向に問題は解決せず、日々が過ぎていくのでした。。。

途方に暮れていても仕方ないので、サーバ会社へも調査依頼をかけることにしました。しかし、1stレスポンスは、こちらが希望するような回答ではなかったので再度調査依頼をしました。その際にこちらで調査した内容や、発生時の状況などを詳しく伝えたのは言うまでもありません。

ブログ　WordPressサイトの表示崩れ問題の顛末

するとしばらくして、原因らしきものがわかったと連絡が入りました。なんと、サーバのディレクトリ直下に 不要と思われる.htaccessが存在していることが分かりました。もちろん、その中身は空ではなく圧縮形の記述がされていました。日付が2016年9月だったので、相当前から存在していたことになる？？
それまで発生していなかったのは、たまたま？もしくはWordPressのバージョンやその他プラグインのバージョンアップによって問題が発生した可能性があるのかなと。

以下が、その中身になります。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
<IfModule mod_setenvif.c>
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html


# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip


# MSIE masquerades as Netscape, but it is fine
# BrowserMatch bMSIE !no-gzip !gzip-only-text/html


# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html


# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>


<IfModule mod_headers.c>
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>

サーバ会社からの回答によると、ディレクトリ直下にある.htaccessはサイト全体に影響を及ぼす恐れがあるとのことなので、リネームして回避しました。

ブログ　WordPressサイトの表示崩れ問題の顛末

そういや、サーバで管理しているすべてのサイトで現象が発生していることからも納得です。

この類の現象は多数ネットで検索できます。しかし、サーバ環境や使っているプラグインなどで全く解決策が違ってきますので、今回の私の問題解決も誰かのために寄与できれば幸いです。トラブルを未然に防止するため、みなさまのサーバのディレクトリ直下に不要な.htaccessがないか確認してみてください。

また、丁寧に調査して頂いたmixhostさんには感謝申し上げます。

そんなmixhostに興味がある方はこちらからどうぞ。

Pin It on Pinterest