WordPress カスタマイズ中エラーで画面が真っ白
ワードプレスカスタマイズ中にエラー等で画面が真っ白になった時の原因と対策を紹介しています。
先日お話したstinger 5をカスタマイズ中、エラーが起きた事象を紹介します。
stinger 5をダウンロードして、子テーマを作成するためスタイルシート（style.css）および各ｐｈｐファイルを、テキストエディタ（TeraPad）で各ファイルを作成しました。（この時は以前stinger 3をカスタマイズしていた時はエラーは起きなかった）
stinger 5をダウンロードした時点でワードプレスをver 3.92からver 4.0に変更した。
stinger 5をカスタマイズするため子テーマに記述していましたが、３箇所位までは順調に進んで途中から管理画面のテーマ編集内の「ファイルを更新」ボタンを押したら、いきなりテーマ編集内の画面が「真っ白」になった。
戻るのボタンをクリックしたら画面は正常に戻り、カスタマイズも一様出来てたみたいです。
カスタマイズするたびに同じ症状でした。
最初はなんとも無かったのに、なぜ途中から？
記述間違い？、・・・悩んだ・・・。
もしかしてワードプレスのバージョンをver 4.0にしたから？
と思いver 3.92にダウングレード実施。
後日ワードプレスのダウングレードのやり方を紹介します。
それでも相変わらずエラー出っ放し状態。これはマズイと思い原因調査。
かれこれ１ヶ月・・・超悩みました。・・・。
ワードプレス画面が真っ白になる原因の一つ解決
原因が判明しました。
結論から言うと、WordPress初心者がテーマをカスタマイズしたり、あるいは自作するときに気をつけなきゃならないことがあります。
それは、文字コードと改行コード。文字コードは「UTF-8」、改行コードを「LF」にする必要があります。
でも、実はそれだけじゃダメだったんです。
私が愛用しているテキストエディタ（TeraPad）は、文字コードは通常「UTF-8」にしていたので、気にしないでカスタマイズしていました。（なぜかその状態で最初は異常は無かった）。
文字コードってなんですか？
Wikipediaで調べると、文字コードとは
文字コードとは、コンピュータなどの電子媒体において、文章を画像などの図形データとして扱わずに、テキストの形式で扱う場合に、その各文字（単一の文字でない場合もある）に対して持っているコードのことである。
Wikipedia 文字コード
日本語でブログを作る時、文字コードは「Shift_JIS」「UTF-8」「EUC-JP」の3つにわかれます。このうち、WordPressでは「UTF-8」という文字コードが使われています。
もしテーマを自作する場合、「UTF-8」以外で作ってしまうと文字化けやエラーが出てしまいます。
HTMLでは、<head>内で文字コードを指定します。
指定しなかった場合はブラウザが自動的に判別してくれますが、文字化けを避けるために指定は必須です。
テーマ作成時はこの指定をするだけでは駄目でした。テーマ作成時のテキストエディタの文字コードも「UTF-8」に設定しなければなりません。
言われたとおり文字コードを「UTF-8」でカスタマイズしたのに、なんでエラーになるの？？？
UTF-8には種類があった
文字コードを「UTF-8」に指定することはわかりましたが、実はこの「UTF-8」は2種類あった
ＢＯＭって何ですか？
IT用語辞典 e-Wordsで調べると、ＢＯＭとは
BOMはエンディアンの判別だけでなく、文書がUnicodeで記述されているかどうかを判別するために用いられることもある。このため、エンディアンが関係ないUTF-8などの文書でも先頭にBOMがついている場合がある。
IT用語辞典 e-Words
「UTF-8（BOMあり）」と「UTF-8（BOMなし）」の2種類で、「UTF-8」が「UTF-8（BOMあり）」と「UTF-8N」が「UTF-8（BOMなし）」という区別をすることもあります。
BOM（ボム）というのは「Byte Order Mark」の略。『これはUTF-8だよ！』と知らせるためのデータです。用途によって使い分ける必要がありますが、WordPressではBOMなしにしなければなりません。
素人の疑問？
HTMLで、<head>内で文字コード「UTF-8」を指定の記述をして、カスタマイズ時は「UTF-8N」で保存しないとエラーが出るの？
オリジナルのワードプレスのテーマを作成した場合、文字コードは「UTF-8N」で保存しないとダメのようです。
まとめ
テーマをカスタマイズする時、テキストエディタを使用する時は、文字コードは「UTF-8N」で保存、改行コードは「LF」でしてください。
テキストエディタ（TeraPad）で編集する時は、あらかじめオプションで文字コードを指定しておけば何も考えずに保存できます。
以上の操作したら無事にエラーも無くカスタマイズ出来ました。
ワードプレスver 4.0にバージョンアップしたのが原因ではなかったような気がします。
尚、本サイトはgush 2で運営していますが、別サイトでstinger 5で引き続き運営していますので、stinger 5のカスタマイズはこのサイトで紹介してまいります。
以上です。
コメント