ブログ運営

WordPressの画面が真っ白に!エラーの原因でfunctions.phpがUTF-8(BOM付き)の対処法は?

2016-02-23 Yoshi(丼)

「ブログの過去記事のリライトでもしよっかな♪」と思って、いつもどおりWordPressの「更新」キーを押下したら・・・。

予期せぬエラーが発生した、こんばんわYoshiです。

WordPressの画面が真っ白のエラーになるのって、大抵functions.phpを触ってカスタマイズしている時ですよね・・・。

WordPressのCSS・PHPファイルは、保存する時に文字コードUTF-8N(BOMなし)にしないといけないって知ってる?

WordPressをカスタマイズしようとして、画面が真っ白のエラーになった事は1度や2度はあるんだけど・・・。

でも、今回はいつものfunctions.phpを触って画面が真っ白問題とは違ったので、自分の反省の意味もこめて残しておかないと!

結論をいうと、functions.phpをロリポップのサーバーで触った時に保存形式がUTF-8でBOMありになったことが原因でした!

ということで、今日は「WordPressの画面が真っ白に!エラーの原因でfunctions.phpがUTF-8(BOM付き)の対処法は?」を書くよ♪

スポンサーリンク

WordPressでfunctions.phpを触る時には必ずバックアップが必要

WordPressでfunctions.phpを触る時には必ずバックアップが必要

functions.phpを触る時には慎重にね!

WordPressをカスタマイズをしたい時は、WordPressテーマの編集で「functions.php」をいじりますよね?

そこで、画面が真っ白でエラー表示されてなにもできなくなる問題はみんな最初のうちに経験します!

次男:タクジ
およ!?WordPressの画面が真っ白になったケン!
ちょ!おまえfunctions.phpファイルいじったろ!?
長男:Yoshi

初めてWordPressの画面が真っ白になった時は、「WordPressが壊れた!」ってパニックになったね・・・。

ポイント

functions.phpで編集中に変な改行、スペースをいれるとコードエラーでエラー表示されて画面が真っ白になってWordPressが表示されなくなるから、必ずバックアップを取ってから編集しましょう!

functions.phpはテーマの機能の中枢を担っていて改行・スペースを余分にいれるだけでもエラーでWordPressの画面が真っ白になるので、編集する時は必ず「Terapad」などのテキストエディタにバックアップを取ってから編集しましょう!

ボクはそんな事は露知らず「これからガツガツいじって自分のブログをかっこよくするんだ!」といじって、エラー表示で画面真っ白でWordPressの自分のページが開かずに焦りました(笑)

その時はプラグイン「BackWPup」でバックアップを取っていたため、functions.phpをFTPソフトのffftpで戻して無事に元に戻りました♪

他にもWordPressで真っ白エラーになることはあるよ!

functions.phpを触ってないのにWordPressの画面が真っ白で「Cannot modify header information – headers already sent・・・」エラーになる原因

functions.phpを触ってないのにWordPressの画面が真っ白で「Cannot modify header information – headers already sent・・・」エラーになる原因

原因がわからないとめっちゃ悩むよね(ノω`●)

ロリポップのプラン変更をしてモジュール版phpにして、喜んでいたのもつかの間・・・。

今回はロリポップのモジュール版phpをONにしただけなのに、同じようにWordPressの画面が真っ白エラーになったの!

三男:増田っち
モジュール版PHPがWordPressと競合したのか!?
functions.phpはいじってないけど、WordPressの投稿画面で「更新」を押したら画面が真っ白になったよ!
長男:Yoshi

一応バックアップが手元にあったので、ffftpでfunctions.phpを戻して再度「更新」キーを押下しても同じくWordPressの画面が真っ白エラーが表示されたの・・・。

WordPress画面真っ白のエラー表示と原因を紹介するよ♪

WordPressの画面が真っ白で「Cannot modify header information – headers already sent・・・」と表示された

WordPressの画面には「Stinger5 Cannot modify header information – headers already sent・・・」と表示されているので、同じような症状が出ている人がいないか検索したボク。

結果、英語のページだらけだけどWordPressテーマのStinger5は関係なく、functions.phpのエラーが関係していることがわかりました。

ただ、日本語の同現象の人は少ないけど、かなりレアなケースであったよ!

WordPressの画面が真っ白エラー表示される現象

  • 投稿の編集画面で「更新」キー押下でエラー
  • 投稿の編集画面から「アイキャッチ画像を設定」に進むと、メディアライブラリに何も表示されない
  • プラグインの設定画面で有効または無効にするとエラー

このような現象がでた場合は、同じ原因でWordPressエラーが起きている確立が高いです!

UTF-8にはBOMあり・BOMなしの2種類

原因はfunctions.phpがUTF-8N:BOMありだとエラー表示される

原因はfunctions.phpがUTF-8N:BOMありだとエラー表示される

TeraPadで文字/改行コードを指定保存できるよ!

原因はfunctions.phpがUTF-8N:BOMありだとエラー表示される

UTF-8とUTF-8Nがあるよね?

ボクは普段CSSやPHPファイルをいじる時に、今まで「文字コード」なんて全然気にしていなかったけど・・・。

WordPressは「UTF-8」の文字コードが使われていて、UTF-8にはBOMあり・BOMなしの2種類があります!

まず、「BOM」って何?から始まりますよね?

バイトオーダーマーク (byte order mark) あるいはバイト順マーク(バイトじゅんマーク)は通称BOM(ボム)といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

出典 Wikipedeiaバイトオーダーマーク

つまり、UTF-8の場合は16進数表記で先頭に「0xEF 0xBB 0xBF」のコードが書かれていると「BOMあり」になります!

ポイント

WordPressの場合は、UTF-8コードでBOMなし=UTF8Nにしなければいけません。

ということで、WordPressが真っ白画面でエラー表示されたのは「BOMあり」でfunctions.phpを保存しているとエラー表示されるってことでした!

スポンサーリンク

functions.phpにBOMが付いているかの確認方法と修正方法

functions.phpにBOMが付いているかの確認方法と修正方法

見えないコードを確認しないといけないよ!

じゃあ、実際に「functions.phpにBOMが付いているのかどうか?」どうやって確認するのか?

BOM付きの確認方法と修正方法を探さないといけなくて、奮闘してました。

次男:タクジ
BOMって爆弾やね!いつのまにfunctions.phpにBOMを付けたんか?
ちょ!そんな新たな問題があったとは!今はBOMの確認と修正をせなあかんやん(ノω`●)「
長男:Yoshi

functions.phpをバイナリエディタで開くことで、BOMが付いているかどうか確認することができます!

バイナリエディタはVectorなどのフリーソフトでダウンロードでき、ボクは「Stirling 」ってソフトで開きました!

functions.phpにBOMが付いているかの確認方法と修正方法を紹介するよ♪

バイナリエディタでBOMが付いているかどうか確認する

バイナリエディタでBOMが付いているかどうか確認する

BOM付きの場合は「EF BB BF」の文字があるよ!

バイナリエディタでBOMが付いているかどうか確認する

BOMなしの場合は「EF BB BF」の文字がないよ!

functions.phpが「BOM付き」か「BOMなし」かをバイナリエディタで確認する方法は

「BOM付き」か「BOMなし」かをバイナリエディタで確認する方法

  • 「BOM付き」でfunctions.phpが保存されている場合:バイナリエディタ「Stirling」で開いたときに○で囲ってある部分に「EF BB BF」がある!
  • 「BOMなし」でfunctions.phpが保存されている場合:バイナリエディタ「Stirling」で開いたときに○で囲ってある部分に「EF BB BF」がない!

バイナリエディタで開いたときに「EF BB BF」の文字があればBOM付き、文字がなければBOMなしということになります!

ボクのfunctions.phpは見事に「BOM付き」で、どおりでWordPressの画面が真っ白のエラーがでるわけです・・・。

TeraPadを使ったよ!

UTF-8のBOMをBOMなしに修正する方法

UTF-8のBOMをBOMなしに修正する方法

文字/改行コード指定保存で「UTF-8N」を選択して、上書き保存してやればOKだよ!

原因は「BOMあり」でfunctions.phpが保存されていることだったとわかったけど、どうやって「BOM」を消せれるのか?

「BOMなし」に修正する方法を知りたいよね!?

ポイント

functions.phpを「BOMなし」にする修正方法は、テキストエディタでfunctions.phpを開いて「BOMなし=UTF-8N」で保存しなおせばOKです。

UTF-8N形式で保存できるテキストエディタならなんでもいいけど、ボクはTeraPadを使いました。

プログラミングをやる人や、ボクも今となってはSublime Text3を使っているけどね!

テキストエディタは、Vectorなどのフリーソフトでダウンロードできるよ!

TeraPadでBOMなし(UTF-8N)で保存する方法

TeraPadの場合は、UTF-8の保存形式でBOMあり・BOMなしが分かれます。

TeraPadのUTF-8の保存形式

  • UTF-8:BOM付き
  • UTF-8N:BOMなし

TeraPadでローカルにダウンロードしたfunctions.phpを開き、ファイル>文字/改行コードを指定保存で「UTF-8N」に指定して上書き保存すれば「BOMなし」になります。

また、今後の事も考えるのであれば表示>オプション>文字コードで保存文字コードを「UTF-8N」にしておけば、毎回文字コードを指定せずとも「UTF-8N(BOMなし)」で保存してくれます!

あとはFTPソフトでファイルをWordPressのThemaフォルダにアップロードして、既存のfunctions.phpファイルと置き換える・上書きしてやれば修正完了です。

ボクが使っているSEOに強いWordPressテーマのAFFINGER5について参考にしてね♪

AFFINGER5(アフィンガー5)の評判は速度?デザインセンスがある人におすすめする理由を徹底解説
AFFINGER5(アフィンガー5)の評判は速度?デザインセンスがある人におすすめする理由を徹底解説

AFFINGER6(ACTION)のスゴいところ Gutenberg対応でブロックエディタが使いやすい!独自ブロックエデ ...

続きを見る

まとめ WordPressのfunctions.phpはBOM付き=UTF-8文字コードに注意してください

チェック!
まとめ WordPressのfunctions.phpはBOM付き=UTF-8文字コードに注意してください

エラーの原因は「ロリポップのFTPサーバー」でファイルをいじったからか!

WordPressをカスタマイズする時に、functions.phpファイルをイジることが多々あります。

しかし、functions.phpに変な改行やスペースをいれると画面が真っ白になるエラーが発生するので、必ずテキストエディターでバックアップか元ファイルを別の場所に保存しておきましょう!

またバックアップ時に「UTF-8=BOM付き」で保存されていると、ボクのように「白い画面にエラーコード」が表示されるので注意してくださいね!

「BOM付き・BOMなし」の確認方法や修正方法は、こんな感じですね♪

BOM付き・BOMなしの確認方法や修正方法

  • バイナリエディタで対象ファイルを開いて、先頭に「EF BB BF」がある場合はBOM付き。
  • テキストエディタで対象ファイルを開いてUTF-8N(BOMなし)で上書き保存。

ボクが今回BOM付きになった原因は、ロリポップのFTPサーバーでfunctions.phpを保存した時にUTF-8=BOMありになったことでした!

次男:タクジ
でも、今まで問題なかったのに、モジュール版PHPにしただけでBOMありになっちゃったのけ?
三男:増田っち
そんなはずはないやろ?ロリポップのFTPでファイルをいじったとか?
そういえば最初の頃はロリポップのFTPサーバーでファイルをいじってたな・・・ってFTPで保存形式が「UTF-8」しかないやん(ノω`●)
長男:Yoshi

これが原因なのかはっきりわからないけど、これからはCSS・phpをいじってテーマをカスタマイズするのはTeraPadでちゃんとやろうと心に固く誓いました!

たまに面倒でWordPressのテーマ編集で子テーマをいじって表示がおかしくなるならまだいいけど、functions.phpをいじるのは怖いしもうロリポップ上のFTPでテーマファイルの編集はやらないでおこうと誓った日でした♪

あわせて読みたい!

簡単解決!WordPressで「現在メンテナンス中のため、しばらくご利用いただけません。」のエラー対処法は?

2023/1/14

簡単解決!WordPressで「現在メンテナンス中のため、しばらくご利用いただけません。」のエラー対処法は?

日本に一時帰国してやる事がいっぱいあったけど、なんとか次々とこなしています。 ちょっと放置していたブログをいじろうと思ってさっそくトラブった、こんにちはYoshiです。 WordPressでブログを書いている人は、色々なプラグインを入れていてよくプラグインのアップデートがありますね。 プラグインやWordPressのアップデート中は、メンテナンスモードが「有効」になります。 WordPressのメンテナンスモード中に、ついつい他の画面に遷移したりして「現在メンテナンス中のため、しばらくご利用いただけません ...

mixhostが遅いし重い?新サーバーに移行したら解決した方法を紹介するよ

2023/2/9

mixhostが遅いし重い?新サーバーに移行したら解決した方法を紹介するよ

WordPressでサイトやブログ運営をしていると、色々と悩みが出てきてネットで調べます。 またもやちょっとサイトの表示速度が遅いってか重いので悩んでいた、こんにちはYoshiです。 このサイトではないけど、別サイトがレンタルサーバーのmixhostを利用しているけど・・・。 mixhostが今年に入ってから重くなってません?たまにサイトを開くのにめっちゃ時間かかるし、管理画面が特に重くない? 「どうにかしないとな~」と思って久々にネットで調べていたら、mixhostの新サーバーに移行したら軽くなったとの ...

WordPressで「このサイトのアップロードサイズ上限を超えています」と表示された時の対処方法は?

2021/12/12

WordPressで「このサイトのアップロードサイズ上限を超えています」と表示された時の対処方法は?

ゴールデンウィークなのに、真ん中が普通に出勤日になっている・・・。 有給の残り日数の関係上、3連休と4連休に分かれている、こんにちはYoshiです。 今ボクが使っているWordPressのテーマのAffinger5の高速化の一環で、PHPバージョンをこの前推奨の7.1にすべてのサイトをアップデートしてました。 リライト作業もやっと落ち着いてきて新規記事を書いて写真をアップロードしようとしたら、「このサイトのアップロードサイズ上限を超えています」って表示された事はありませんか? あかん!そういえばWordP ...

  • この記事を書いた人
  • 最新記事
3バカ兄弟の日常 Yoshi

Yoshi(丼)

長男の設定で「3バカ兄弟の日常」を書いてる中の人です。
世界一周バックパッカー旅行を2年1ヶ月56カ国した後、フィリピンのセブ島で現地採用で働いていました!
詳しいプロフィール

-ブログ運営
-