24 Shares

エラーが起きた?それはUTF-8のBOMと改行コードが原因かもしれません

UTF-8 BOMとは

WordPress初心者がテーマをカスタマイズしたり、あるいは自作するときに気をつけなきゃならないことがあります。それは、文字コードと改行コード。文字コードは「UTF-8」にする必要があります。

でも、実はそれだけじゃダメ。さらにつっこんだ設定が必要でした。僕もちょっとハマってしまったので、詳しい内容をご覧ください。

文字コードって何?

Wikipediaによると、文字コードとは…

文字コードとは、コンピュータなどの電子媒体において、文章を画像などの図形データとして扱わずに、テキストの形式で扱う場合に、その各文字(単一の文字でない場合もある)に対して持っているコードのことである。

文字コード

はい。何のことだかさっぱりですね。基本だけ押さえておきましょう。

日本語のブログやサイトを作る時、大まかに「Shift_JIS」「UTF-8」「EUC-JP」の3つにわかれます。このうち、WordPressでは「UTF-8」という文字コードが使われています。

もしテーマを自作する場合、「Shift_JIS」で作ってしまうと文字化けやエラーが出てしまいます。

どこで設定するのか

HTMLでは、<head>内で文字コードを指定します。指定しなかった場合はブラウザが自動的に判別してくれますが、文字化けを避けるために指定は必須。

テーマ作成時はこの指定をするだけではダメ。テキストエディタの文字コードも「UTF-8」に設定しなければなりません。各エディタによって設定箇所は違いますが、保存するさいに文字コードの指定方法が選べるはずです。

TeraPad文字コード指定

WordPressテーマをカスタマイズする時、ダウンロードしたりテキストエディタにコピペして編集することがあると思いますが、保存時は必ず文字コードを指定しましょう。

UTF-8には種類がある!

文字コードを「UTF-8」に指定することはわかりましたが、実はこの「UTF-8」は2種類あります。僕がうっかりハマってしまったところです。

BOMって何?

「UTF-8(BOMあり)」と「UTF-8(BOMなし)」の2種類で、「UTF-8」と「UTF-8N」という区別をすることもあります。

BOM(ボム)というのは「Byte Order Mark」の略。『これはUTF-8だよ!』と知らせるためのデータです。用途によって使い分ける必要がありますが、WordPressではBOMなしにしなければなりません。

僕はオリジナルテーマを作成した時に、気づかず「BOMあり」で保存していました。完成間近になってなぜかブログ上部に指定した記憶のない余白ができてしまい、もしやと思って確認したら…というわけです。

TeraPad UTF-8N

BOMの有無を確認する方法

環境によってはfunctions.phpがうまく動かないなど、どこかしら影響が出てくると思います。挙動がおかしかったら、念のためBOMを確認したほうが良いでしょう。

確認にはバイナリエディタが必要です。Vectorでダウンロード可能。

BOMありの場合、先頭に「EF BB BF」という文字列があります。

utf-8

BOMなしでは文字列がありません。

utf-8n

BOMを消す方法

BOMを消すには、テキストエディタでいったんファイルを開いてUTF-8(BOMなし)で上書きすればOK。

ただし、Windows付属のメモ帳は必ずBOMありになってしまうので使えません。WordPressをいじるときは他のテキストエディタを使ってください。

先ほどから画像で出てくるのは、「TeraPad」というフリーウエアです。あらかじめオプションで文字コードを指定しておけば何も考えずに保存できます。

TeraPad設定

改行コードにも気をつけよう

上記画像では、文字コードのほかに「改行コード」というのもありますね。

こちらも同様に指定しておく必要があります。FTPソフトによっては、自動的に最適な改行コードに変更してアップロードしてくれますが、WordPress管理画面からテーマをアップロードする時は注意しましょう。

改行コードは「LF」を指定してください。

まとめ

WordPressカスタマイズ時は、文字コードを「UTF-8(BOMなし)」に、改行コードを「LF」に設定して作業しましょう。

修正後FirefoxやChromeではとくに不具合がなくなりましたが、XP+IE8の環境でサムネイルを取得できないバグが発生してしまいました。もうメンドーだからいいや…

テーマを作ってみると、いろいろ勉強になります。カスタマイズに飽きたら、ぜひオリジナルテーマ自作にチャレンジしてみてください。新しい世界が拓けるかも。

それでは、また。