サイトをテーマLightningで作成して、２年ぐらい問題なく運営していましたが、11月下旬に、急に画面が乱れるようになってしまいました。原因がわからずにあれこれ試しながら２週間が過ぎました。
原因は、さくらインターネットサーバーの無料SSL化によるものではなということがわかりました。しかし、ネットで紹介されている解決方法をいろいろ試しましたが、画面の乱れは解決できませんでした。テーマはLightningですが、Lightningとは全くかけ離れた独自のカスタマイズが原因ではないかとあきらめて、私のカスタマイズに近いSimplicityをほぼそのまま使うように作り直しました。この記事はその経過を説明したものです。
突然の画面の乱れ 何？何？
2020年11月25日ごろ、当サイトの一部の画面の大きな乱れが発生しました。
次の画面が当サイトのトップ画面です。
このデザインは、高橋のりさんの「基礎からのWordPress」というわかりやすい本で紹介されていたデザインをいただいてPHPで組んだもので、気に入っていました。
グローバルメニューのどれかをクリックすると次のようなメニュー画面に切り替わります。
これまでは正しく表示されます。問題はこのメニューを選択して本文を表示する次の画面です。
本文はCSSが働いていないような表示になりました。そればかりでなく、ヘッダーもメチャメチャです。PHPの記述は、ヘッダーを表示して本文を表示するようになっているのに、一緒にヘッダーまで乱れてしまいました。
ソースの変更は一切していないのに、突然画面が乱れるようになってしまいました。
ブログは正しく表示されます。詳しく調べてみると、私がマルチループでアイキャッチとタイトルと抜粋を書き出しているメニューから入る本文が乱れるようです。
原因究明の苦しい日々が続く
ソースコードの修正は何もしていないので、原因はWordPressかテーマのLightningのバージョンアップによるものと推定しました。子テーマの中でテーマのLightningのページ表示と全く違うPHPコードを作っていましたので、WordPressやテーマのバージョンアップで、これをサポートしないようになったと推定しました。
WordPressやテーマの古いバージョンが残っているのはローカルホストです。そこでローカルを確認すると正しく表示されます。全く問題ありません。ますますバージョンアップの影響が濃くなりました。
ローカルのWordPressとテーマのバージョンアップをしたら同じ現象が発生するのではないか。そこで、ローカルのWordPressとテーマのLightningを別々にバージョンアップして、それぞれ確認してみました。しかし結果は同じです。ローカルでは正しく、レンタルサーバーでは乱れるのです。
次に確認したのがプラグインです。いずれかのプラグインのバージョンアップの影響で画面が乱れるのではと予想しました。そこで、すべてのプラグインを無効化してみました。結果は同じです。乱れます。プラグインの影響ではないようです。
ローカルとレンタルサーバーそれぞれのソースを比べてみたり、ネットで同じような現象が発生していないか、いろいろ試行錯誤をして、2週間の気の重い日々が続きました。テーマを変えようかと思いましたが、よいテーマが見つかりません。
原因はさくらインターネットのレンタルサーバーの無料SSLではないか？
そのような苦しい日々の中、ネット検索で、さくらインターネットの無料SSLで画面が乱れる現象があることを見つけました。難しくて理解できませんが、それが無料SSLの仕様のようです。
それを解消するには、.htaccess と wp-config.php にあるコードを追加する必要があるということです。確かにローカルとレンタルサーバーの大きな違いは、SSLのあるなしです。
次のサイトにその理由と対処方法が記されています。
さくらのレンタルサーバでHTTPS(SNI SSL)な独自ドメインのWordpressサイトを構築する際の注意点 – Qiita
これによると、.htaccess に次のコードを追加する。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$ RewriteRule ^(.*)$ https://www.example.com/$1 [R=301,L] </IfModule>
そして wp-config.php の先頭に次のコードを追加する。
if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) { $_SERVER['HTTPS'] = 'on'; $_ENV['HTTPS'] = 'on'; $_SERVER['HTTP_HOST'] = 'www.example.com'; $_SERVER['SERVER_NAME'] = 'www.example.com'; $_ENV['HTTP_HOST'] = 'www.example.com'; $_ENV['SERVER_NAME'] = 'www.example.com'; }
となっています。
他にも同じ方法で解決したという記事が多くあります。「これで解決しそう！」と希望が持てました。
試してみましたが、結果は同じです。上のサイト以外の方法も(内容は同じなんですけれど)試してみましたが結果は同じです。本文の画面の乱れは解決しません。
そもそも、さくらインターネットのSSL化を説明どおりに実行すると、.htacces の先頭にこのようなコードが入っているようです。（最初から入っていたかもしれない）
# 常時HTTPS化(HTTPSが無効な場合リダイレクト)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{REQUEST_URI} !/wp-cron\.php$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END Force SSL for SAKURA
上のサイトのように、www.example.com を自分のサイトのURLに置き換えると、常にトップページに戻ってしまいます。さくらインターネットのコードが正解のようです。
私がテーマを大幅に書き換えているので、このような対策を講じても画面の乱れは解決しないのかもしれません。あきらめてテーマを変えて作り直すことにしました。
テーマを Simplicity に変えて作り直す
たまたま他のサイトでSimplicity で作っていたサイトがあり、アイキャッチとタイトル、抜粋を表示するメニューを表示するようになっていたので、このテーマを使うことにしました。
これからは簡単にできました。Simplicity 独自のカスタマイズを加えて、トップページはこのようになります。
こだわりのメニューはこのようになります。
本文も正しく表示されます。
ん、ブログがおかしい
しかしブログページの表示がおかしいのです。
右のように、ブログのメニューの前にこのような入れた覚えのないものが延々と続きます。
サイドバーのようです。
この下にブログのメニューが現れます。
Chrom のデバッグで見てみましょう。Chrom には、F12 を押すとページのデバッグができる便利な機能があります。
右のコードを見ると、ブログページの始めにいっぱい <aside… が並んでいます。左のシャドウのかかった部分が右側の薄くシャドウのかかった部分です。確かにブログページの始めに何か入っています。
これらは、かつてサイドバーに入れていたもののようです。しかし、Lightning の時のものです。なぜこれが Simplicity のテーマの中に出てくるのかわかりません。
とりあえずWordpress 管理画面でテーマをLightning子テーマに戻してサイドバーのコンテンツを削除してみるこにします。
これは、ブログのサイドバーに入れていたコンテンツです。削除します。
余談ですが、Lightningのサイドバーは、固定ページとブログページで別々に設定できます。固定ページとブログページで表示する内容は異なるので便利です。Simplicityはサイドバーは1種類しかありません。この点は不便です。
ウィジェットのコンテンツを一つひとつ消しながら確認すると、「トップページコンテンツエリア上部」というウィジェットのコンテンツを消してブログが先頭から表示されるようになりました。
これはおそらくLightningとSimplicityで、CSSのクラスが重なっているのではないかと推測しました。
こうして一応Simplicityへの切り替えは完了しました。
