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

この記事は約11分で読めます。
スポンサーリンク

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

サイト名 ワレコ公式サイト(当サイト) 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の「メニューを編集」機能の例

上図では、メニュー名「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 での文字エンコーディング/デコーディングについて説明します。

しかしながら、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バイトとか2バイトとか4バイトとかではなくて、思い切って、8バイト(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でサイドバーをレスポンシブ表示

を解除すると良い。

tool-bar-non-responsive

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

まとめ

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

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

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

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

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

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

スポンサーリンク
ワテ推薦のプログラミングスクールで学ぶ
コメント募集

この記事に関して何か質問とか補足など有りましたら、このページ下部にあるコメント欄からお知らせ下さい。

PHPWordPress
スポンサーリンク
warekoをフォローする
スポンサーリンク
われこ われこ

コメント