WordPress のテーマ制作やカスタマイズにおいて、文字コードと改行コードの設定を見落とすことがある。両方とも正しく設定されていないと、予期せぬ不具合(文字化けや原因不明の余白など)が起きるので注意が必要だ。

テキストエディタで各ファイルを編集するさい、文字コード・改行コードは以下のとおり設定しよう。

  • 文字コード:UTF-8(BOM なし)
  • 改行コード:LF

とくに文字コード UTF-8 の「BOM あり」と「BOM なし」の違いに気をつけてほしい。

文字コードとは

文字コードとは、文字に割り振られた固有の番号を指す。

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

文字コード(Wikipedia)

コンピュータは、固有の番号をもとに「あいうえお」など人が読める文字に変換して表示している。

日本語の Web サイトでは「Shift_JIS」「UTF-8」「EUC-JP」のいずれかが使われており、WordPress は「UTF-8」が標準となっているので必ずこの文字コードに合わせよう。

WordPress 3.5 から UTF-8 がデフォルトになり、管理画面から変更できなくなっている。

テーマ制作やカスタマイズ時に文字コードの存在に気づかず、「Shift_JIS」など別の文字コードでファイルを作成・更新すると文字化けやエラーの原因となる。

文字コードをどこで設定するのか

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

<meta charset="utf-8">

WordPress のテーマ制作やカスタマイズでコードを書く場合、テキストエディタの文字コードも「UTF-8」に設定する必要がある。

たとえば「Notepad++」というエディタでは、「エンコード」から文字コードを指定できる。

Notepad++ エンコード

上の画像でわかるとおり、「UTF-8」と「UTF-8 BOM」の 2 種類が選択できるが、WordPress で使うのは「BOM なし」のほうである。

単に「UTF-8」と表示されていても、エディタによって「BOM あり」か「BOM なし」か違ってくるため、各エディタのヘルプを参照してほしい。

エディターBOM ありBOM なし
Windows メモ帳UTF-8(BOM 付き)UTF-8
TeraPadUTF-8UTF-8N
Notepad++UTF-8 BOMUTF-8
テキストエディターによる表示の違い

Windows 付属のメモ帳は「Windows10 19H1」より、「UTF-8(BOM なし)」が扱えるようになった。

UTF-8「BOMあり」「BOMなし」の違い

BOM は Byte Order Mark の略で、「これは Unicode で書かれたファイルである」というのを明示するデータのことだ。

UTF-8 ならどちらでもよさそうに思うかもしれないが、WordPress では BOM があると functions.php が正常に動かないなど予期し得ないエラーを起こす原因となる

とくに WordPress 初心者は文字コードの存在を知らず、テキストエディタではなく Word など文章作成ソフトで編集してしまうケースが多い。必ず文字コードを変更できるテキストエディタを使おう。

「コードをコピペしたのに動かない」「カスタマイズしたらブログが真っ白になってしまった」という相談をいただくが、かなりの確率で文字コードが間違って指定されていた。

BOMの有無を確認する方法

コードが正常に動かないなど不具合が出たときは、バイナリエディタで BOM の有無を確認するとよいだろう。Vector でダウンロードできる。

Vector:バイナリエディタ

「BOM あり」のファイルをバイナリエディタで開くと、以下のとおり先頭に「EF BB BF」という文字列が確認できるはずだ。

utf-8

「BOM なし」にはその文字列がない。

utf-8n

通常のテキストエディタでもファイルの文字コードを確認できる。先に紹介した Notepad++ であれば、右下に文字コードが表示されている。

UTF-8 BOM ありのファイル

「BOM あり」になっていたら、「BOM なし」に変更して作業を進めよう。

UTF-8(BOMなし)に変更する方法

文字コードの変更は簡単で、テキストエディタで上書き保存するだけだ。

Notepad++ は上部メニューの「エンコード」から変換し、そのままファイルを上書き保存すれば OK。

Notepad++ 文字コード変換

一般的なテキストエディタであれば、同様の手順で変換できる。

改行コードは「LF」を使うのが無難

文字コードのほかに「改行コード」というものもある。

標準の改行コードは OS によって変わるが、WordPress では「LF」を指定しておくのが無難だ。

Notepad++ は「編集」から「改行コード変換」で指定し、変換後にファイルを上書き保存する。

Notepad++ 改行コード変換
Unix(LF)に変換する

テーマファイルの変更なら「CR LF」でもとくに不具合は出ないと思うが、データベースを操作するさいは「LF」にしておいたほうがよい。

まとめ

WordPress テーマファイルを編集するときは、文字コード「UTF-8(BOMなし)」・改行コード「LF」に設定して作業する、と覚えておこう。

なお、WordPress 管理画面から直接テーマファイル・プラグインファイルを編集できるが、最悪の場合ログインできなくなるなど致命的なエラーの原因となりやすいため、あまりおすすめしない。

面倒でも FTP で各ファイルをダウンロードして編集するか、各ファイルのコードを全コピーしてテキストエディタに貼り付けてから編集しよう。作業直前にはバックアップをとる習慣もつけておきたい。

Reinx 記事執筆:Reinx 編集部 瀬尾 真

Web 業界歴 20 年の知見と経験をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。Twitter では最新ニュース・小技集を配信中。

ブログ初心者向けサービス

Reinx では、WordPress ブログ初心者向けに様々なサービスをご用意しています。

  • Google AdSense 審査対策 ブログ診断
  • WordPress エラー・トラブル対応(復旧代行)
  • ブログ宣伝掲示板(無料)
  • 365 日 24 時間無制限で相談できる個別サポート

その他、運営に関するお悩みなどがありましたら、お気軽にお問い合わせください。