意外と簡単!WordPress海外産テーマの文字化けを直す方法

2014/07/22

WordPressはデザイン性に優れた、無料のテーマ(テンプレート)が数多くそろっているのが大きな特徴です。
僕は「Gazpo!」というWebサイトで配布されている「Max Magazine」というテーマを使用しています。画像のスライダーを使ったコンテンツ切り替えができること、レスポンシブデザインであることの2点から導入を決めましたが、導入してみて1つ問題が発覚しました。

自動的に記事から抜き出したテキストの末尾が文字化けしてしまう

画像のスライダー内に表示されるタイトルテキストは、自動で投稿した記事から出力され、スライダー内に表示されるのですが、表示されたテキストの末尾が文字化けしてしまうのです。

赤枠内が文字化けしている箇所。「CM」以降のテキスト2文字分が文字化けしている。

場所が限定的だったので、エンコードの問題ではないな、と思いつつ原因を調べてみると、PHPの substr 関数が、日本語の漢字などの2バイト文字を認識できずに起こる事象だということがわかりました。substr関数は指定されたバイト数だけ抜き取る関数なので、抜き取る文字の末尾が半端な数になったとき、文字化けを引き起こすというわけです。

対策

そこで、Wordpress管理画面の「テーマの編集」から、「carousel.php」や「feat_cat1.php」などから以下のような記述を見つけ、2バイト文字に対応したmb_substrに変更します。mb_substrは文字数に基づきマルチバイト対応の substr() 処理を行う関数です。

ついでに、文字数を指定する箇所に 「,’UTF-8’」を追加することで、エンコードエラーによる文字化けも防ぐことが出来ます。

変更前

<?php 
	// display only first 26 characters in the title.	
	$short_title = substr(the_title('','',FALSE),0,26);
		echo $short_title; 
		if (strlen($short_title) >25){ 
			echo '...'; 
} ?>	

変更後

<?php 
	// display only first 26 characters in the title.	
	$short_title = mb_substr(the_title('','',FALSE),0,26,'UTF-8');
		echo $short_title; 
		if (strlen($short_title) >25){ 
			echo '...'; 
} ?>
修正後の画像。文字化けせずに「CM」以降の文字が表示されている。
※表示する文字数を調整した後の画像のため、表示されている文字数が修正前と異なっております。

海外産のテーマを使用していくには、細かいカスタマイズが必要

今回利用してわかったのですが、海外産のWordPressのテーマは、きれいなデザインのテーマも多いのですが、2バイト文字に対応していないので、細かいカスタマイズが必要です。テーマを導入して、そのまま記事を投稿して表示させてみると、英語で見たときとは印象が違っていたりということがあります。

今回の文字化けも一例でしたが、いろいろ試した結果無事に解決することが出来ました。したがって、自分自身が読んだり使ったりして気持ちいいWebサイトにするには、CSSやPHPを知らないなりに修正して、細かくカスタマイズする必要があるなぁ、とあらためて実感した一件でした。

関連情報

このページに掲載されている記事が大変参考になりました。
海外産テーマ【Quest】の文字化け問題解決【WordPress】(雑感.com)

おすすめ商品

これらは皆様におすすめというより、自分が今後買ったほうがいいのでは?と思った書籍です。