公開ページの上部が、微妙にずれる。それも固定ページによってずれないものもある。
ちょっと時間を要した原因探しで見つけた、失敗談です。
ヘッダの表示が微妙に乱れる？
とあるサイトを作っていて、気になることを発見！
ほとんどのページを固定ページで作っていて、それらを全て専用のテンプレートで作成しています。当然、cssも多用しています。サイト共通のcss、ページ固有のcss。各cssの大きさを抑えるため、自分なりに工夫していました。
ところが作成した固定ページ。ページによって、上部が微妙に乱れます。
cssの仕業だろうと思って見直しました。いろいろ調べてみましたが、原因がわかりません。
そして、ある法則性が見つかりました。乱れというのはヘッダの、ある部分。見た目は１行下にずれています。
ずれているページと、ずれていないページ。規則性もありません。
？？？？？？？？？？？？
見つけたものは
cssを調べる方法は、chromuの「検証」機能。
でも、どこをどう調べても、違いが見つかりません。
諦めかけたとき、目に入ったのが一番上です。
なんか、不思議なものがあるぞ？
”＆＃６５２７９；” ってなんぞや？
と言うくらいだから、分かりません。phpのソースに書いた記憶は、さらさらありません。
ググりました。でも出てきません。「 に一致する情報は見つかりませんでした。 」って、何？
そこで、前後にダブルクオーテーション（”）を付けてググると、出てきました。
『』とは？ → BOM … だそうです。
BOMとは
BOM（Byte Order Mark）と呼ばれているものです。ボムと聞いて良くないものと思いがちですが、これはファイルを実行する前に「Unicodeで作成されたテキストのファイルですよ」と宣言する『見えない文字列』の事です。UTF-16では必須項目だそうです。
現在主流のUTF-8では「あっても無くても良い」ということになってはいるのですが、これがある事によりHTMLが正常に読み込めなかったり（今回のケースでは空間が出来てしまう。）、PHPが実行出来なかったりします。
ヘッダーの上の「妙な空間」は『』かもしれない。
『見えない文字列』なんて、見えないよー！
でもそういう事なんですね。そして、これが入ってしまう原因は、
今回、『』が入ってしまった原因は、ちょっとした編集をする際にWindows標準ツールの『メモ帳』を使ったことが原因でした。他のエディタ類でも設定を変更せず、そのまま使ってしまうとBOMが入ってしまうものもあるようですが、私の環境ではWindowsのメモ帳が原因でした。
メモ帳では特に設定項目もなくBOMを含んだ状態で保存されてしまうので使わないようにしましょう。
とほほ… そうなの？
信じたくないことだけど、「メモ帳」を使っていたのか…
解決策
簡単です。「メモ帳」以外のエディターで、BOM無しで保存すればいいだけです。これで、長い苦悩から開放されました。
補足：その作り方はよくない…
ところで、固定ページごとにテンプレートを作るのは、否定的な意見もあるようです。
①「サイトのテーマ」を変えた時に、固定ページが真っ白になる
当然ですね。サイトのテーマ（子テーマ）の下に固定ページのテンプレートを置くわけですから、テーマを変えれば移動しなければなりません。
でも、テンプレートをコピーすればいいわけだし。
テーマのcssによって見栄えが変化することも、元のcssをコピーすればいいわけだし。私は
②「サイト内検索」が効かなくなる
WordPressで提供されているサイト内検索は、サイト用のDBを検索する機能。固定ページの編集画面で入力された内容が検索対象になります。phpに記述された内容は、検索できないという事ですね。
でも、Googleの“サイト内検索”を利用すればいいわけだし。
ということで、私はこの作り方を通します！
テンプレートphpを編集するだけでページを編集できることは、いちいちWordpressを開かなくてもできる。これはとても便利で、時短になります。
cssの変更も、独自cssにすることで、Wordpressは無関係。
なお、cssの読み込みは各固定ページで自動でできるようfunction.phpで行っています。
コメント