【ワレコの講座】WordPressの文字化け – メニューのタイトル【解決】

ワテの場合、現在では以下の二つのサイトを運営している。

サイト名	ワレコ公式サイト（当サイト）	Wareko.NET
URL	https://www.wareko.jp/	https://www.wareko.net/
運営開始年月日	2015年6月~	2015年12月~
サーバー種類	共用サーバー	Windows VPS
サーバー会社	エックスサーバー社	ABLENET社
サーバー会社公式サイト
OS	Linux	Windows Server 2012R2
WEBサーバー	Apache	IIS
DB	MySQL	SQL Server Express, MySQL
追加ソフト	–	SSMS, MySQL WorkBench
稼働アプリ	WordPressなど	各種の自作革新的超便利無料ツール
SSL	Let’s Encrypt	Let’s Encrypt

表　ワテが運営している二つのサイト

WEBサイト運営に関して何の知識も無かったワテが、約二年前にレンタルサーバーを借りて自力でこれらのサイトを作成して現在に至る。

そのうちのWindows VPSには、

Windows Server 2012 R2 に
IISサーバー
PHP5
WordPress 4.3.1

を入れてWordPressのブログを立ち上げた。

現在では、WordPressブログはエックスサーバー社に引っ越したので、Windows VPSではWordPressは運営していない。

さて、そのWindows VPSにWordPressをインストールして運営していた時に、いろんな問題に悩まされた。

Windowsオペレーティングシステム上でWordPressを運営している人は少ない。一般的にはLinux上のApacheサーバーとMySQLを組み合わせてWordPressを使うのが普通であるからだ。

その為に、Windows環境でWordPressを使っていて何らかのトラブルが起こっても、ネット検索しても解決方法が殆ど見付からない。

当記事では、そんなワテが直面したWordPressのトラブルとその解決方法を紹介したい。

では、本題に入ろう。

WordPressのメニューの文字が化ける
日本語の文字コードはややこしい
WordPressのメニュータイトルの文字化け解決方法
レスポンシブ表示でもメニューを表示したい場合
まとめ

WordPressのメニューの文字が化ける

WordPressでは、自分で好きなメニューを作成する機能がある。

通常は、このブログの上部に横に並んだメニューボタンのような使い方をする。

あるいは、ページの下部にメニューボタンを並べる人もいる。

さて、そのメニューであるが、WordPressのダッシュボード（管理画面）にログインして、下図に示す「メニューを編集」画面を開くと自作のメニューをカスタマイズ出来る。

図　WordPressの「メニューを編集」機能の例

上図では、メニュー名「my top menu」と言う名前を付けたメニューを編集している。

このメニューは正しく表示されるとこんな風になる予定だ。

[Home]　[Wareko Map]　[Wareko Map This]　[Tools]　[ホームページ]

ところが、この編集画面では問題無く編集できるのだが、そのメニューを実際に表示すると、何故か日本語が化けるのだ。

入力して、保存するまでは全く問題ないのだが、それを表示させてみると化け化けに化けている。

上図の例では、[カスタムリンク] を選んで[ホームページ] というメニューを追加したところだ。

この時点では全く問題なく追加できて保存も出来る。

で、このメニューをブラウザーで表示させると[ホームページ]と言う日本語の部分が化けてしまう。

日本語の文字コードはややこしい

文字コードというものは本当に厄介で、日本語だけでも、

SJIS
EUC
JIS
UTF-8 BOM有り
UTF-8 BOM無し
UTF-16
UTF-16 BE（ビッグエンディアン）
UTF-16 LE（リトルエンディアン）
UTF-32
Unicode
その他いろいろ

ある。

Windows 9x 系（Windows 95/98/Me）はShift JISだった

日本語Windows 9x 系（Windows 95/98/Me）では、オペレーティングシステム内部、DOS プロンプトウインドウ、ファイルシステム（FAT16/FAT32）がマイクロソフト固有のCP932と言う文字コードだった。

正式名称は「Microsoftコードページ932」であり、マイクロソフト社がShift_JISを独自に拡張した文字コードだ。

まあ、兎に角、Windows 9xの時代に、例えば電子メールやInternet Explorerで見たサイトが文字化けしていたら、Shift_JIS以外の文字コードであるJISやEUCに変更してみると文字化けが解消する事も多かった。

Windows 2000/XP/Vista/7/8/8.1/10 系は内部はUTF-16

一方、その後のWindows 2000/XP/Vista/7/8/8.1/10/ などでは、オペレーティングシステムの内部はUnicode UTF-16 に統一されている。

例えばVisual Studio のC#でプログラミングをしていて、文字列変数に日本語を代入してその変数の中身を16進表示すると、確かにUTF-16でデータが格納されている事が確認出来る。

マイクロソフト公式サイトにも .NET ではUTF-16が使われていると記載されている。

.NET で文字エンコーディングクラスを使用する方法 - .NET

.NET で文字エンコーディングクラスを使用する方法について説明します。

しかしながら、Windows 9x系に搭載されていたDOS プロンプトに変わってこれらのオペレーティングシステムに搭載されているコマンドプロンプトでは、未だにCP932が使われている。ただし、chcpコマンドで切り替えは可能だ。

chcp コードページ番号

もしコードページ番号を指定せずにchcpを実行すると現在のコードページが表示出来る。

C:\Users\wate>chcp
現在のコード ページ: 932

utf-8に変更する場合には、以下のコマンドで可能だ。

C:\Users\wate>chcp 65001
Active code page: 65001

ところが、utf-16に変更しようとして、以下のコマンドを打つとエラーする。

C:\Users\wate>chcp 1200
Invalid code page

理由は、たぶんWindowsを設計した人の能力不足か手抜きだと思う。

コマンドプロンプトのchcpで良く使いそうなコードページをマイクロソフトのサイトから引用しておこう。

Identifier	.NET Name	Additional information
932	shift_jis	ANSI/OEM Japanese; Japanese (Shift-JIS)
1200	utf-16	Unicode UTF-16, little endian byte order (BMP of ISO 10646); available only to managed applications
20127	us-ascii	US-ASCII (7-bit)
20932	EUC-JP	Japanese (JIS 0208-1990 and 0121-1990)
50220	iso-2022-jp	ISO 2022 Japanese with no halfwidth Katakana; Japanese (JIS)
50222	iso-2022-jp	ISO 2022 Japanese JIS X 0201-1989; Japanese (JIS-Allow 1 byte Kana – SO/SI)
51932	euc-jp	EUC Japanese
65001	utf-8	Unicode (UTF-8)

引用元　https://msdn.microsoft.com/en-us/library/dd317756(VS.85).aspx

一体全体、どんな文字コードを使えば良いのか？

世の中はUTF-8が多い

ワテの知る限り、世の中ではUTF-8が多いようだ。

UTF-8でも「UTF-8 BOM無し」が多いと思う。

「BOM有り/BOM無し」ってなんだよ？と思う人はWikipediaなどで調べると良いだろう。

でも、それがとってもややこしい。

兎に角、文字コードの違いが原因の文字化けを避けるために業界で統一した文字コードとしてUnicodeが制定されたはずなのに、UnicodeですらUTF-8, UFT-16, その他多数の方言みたいなのがある。

まあ、文字コードは今後も統一することは不可能だろうなあ。

メールやウェブサイトの文字化けは最近ではかなり減ってきたが、データを転送する際に各種の文字コードを変換して文字化けせずに表示出来るようにするための労力は大変な作業量だと思う。

全世界、あるいは全宇宙で統一した文字コードが制定できて、みんなでそれを使えば、そういう無駄な作業が無くなるので生産性が向上すると思うのだが。

文字コードは1バイトとか２バイトとか４バイトとかではなくて、思い切って、８バイト(64bit)くらいにしておけば 2 の64 個の文字を表現できるから、どんなマイナーな文字(古代文字とか)でも表現できると思うのだが、そうするとどんな短いメール送っても、今より数倍ファイルサイズが増えるので反対意見も出るだろうし。

ということで、ワテは文字コードをプログラムで扱うのはとても苦手だ。

さて、本題に戻ろう。

WordPressのメニュータイトルの文字化け解決方法

本題のWordPressのメニュータイトルの文字化けに関してだけれど、数か月前に初めてWordPressをインストールした直後に、

【ワレコWordPress】日本語タイトル記事が「ページが見付からない」解決

2015年に某レンタルサーバー会社のWindows VPSサーバーを借りて、自力でセットアップを行った。主な作業内容な以下の通り。 Windows Server 2012R2のインストールドメインの取得、DNSの設定 IISのインストー

と言う問題が見つかり、その時にはphp.iniの日本語設定を行ったら治った。

で、今回も、そのあたりが怪しいのかなと思ってググッてみたら、解決した。

原因は、php.iniの mbstring.encoding_translation が原因だった。

修正前：mbstring.encoding_translation = On

修正後：mbstring.encoding_translation = Off

としたら正常に表示されるようになった。

ちなみに、この設定の意味、良く分かっていない。

やはりワテは文字コードが苦手だ。

レスポンシブ表示でもメニューを表示したい場合

2015/10/04

文字化けとは関係ないが、ワテが使っているSimplicity2と言うWordPressテーマの場合、パソコン表示において、これらの上部のメニューボタンはブラウザーの幅が狭くなると消える。

これを消さずに表示したままにしたい場合は、以下の設定で可能だ。

具体的には、

□ PCでサイドバーをレスポンシブ表示

を解除すると良い。

このようにすると、ブラウザーのウインドウ幅が狭くなってもメニューが表示される。

まとめ

この記事では、Windows Server 2012R2にインストールしたWordPressにおいて、メニューのタイトルに日本語を使った場合に発生した文字化けの対策を紹介した。

また、Windowsオペレーティングシステムにおける文字コードの歴史なども紹介した。

結論としては、今後も世界の文字コードが統一される可能性は少ないが、現実的にはUTF-8 BOM無しがデファクトスタンダード（事実上の標準）になりつつある。

従って、自分で作成するファイルの文字コードは、UTF-8 BOM無しにしておくのが無難だろう。

例えばWindows標準のメモ帳（Notepad.exe）で文章を作成してファイル保存する場合など。

そうすれば、他の人にそのファイルを渡しても文字化けせずに見られる確率が高くなる。

Windows 10完全ガイド基本操作+疑問・困った解決+便利ワザ (一冊に凝縮)

SBクリエイティブ

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESSプラスシリーズ)

技術評論社