iPhoneやiPadに自動対応させるWPプラグイン・WPtapを導入したけど文字化け箇所があったので対処法をメモ

Ads

さて、3連休中ですが、今日もWebのネタ。
昨日、ご紹介したWordPressモバイル対応
プラグイン・WPtapをこのブログに導入しまし
た。今更スマートフォン対応したのかよ的な
印象も否めませんが、導入時の事をいくつか
メモとして残しておきます。導入のきっかけに
なれば幸い。

基本的に導入にあたり、大きな問題はありませんでした。本当、オススメのプラグインです。(※詳しくは昨日の記事をご参照)ただ一点だけ、デフォルトのテーマで、タイトルを文字数で省略しているのですが、そこが文字化けしてたので対処法を書いておきます。

文字化けを直す


↑こんな感じで文字化けってます。ご紹介した手前、「なんだよ文字化けで使えねー」とか言われるのもアレなので文字化け対策を書いておきます。

直す箇所

wp-content/plugins/wptap/themes/News Press/にあるindex.phpとarchive.phpを直します。ファイルを開いて10行目くらい

<?php
	while(have_posts()): the_post();
	$np_title=get_the_title();
	$t_length=40;
	if($np_title!=substr($np_title,0,$t_length))			
	$np_title=substr($np_title,0,$t_length)."...";						
?>

ここを以下のように変更。

<?php
	while(have_posts()): the_post();
	$np_title=get_the_title();
	$t_length=40;
	if($np_title!=mb_substr($np_title,0,$t_length))			
	$np_title=mb_substr($np_title,0,$t_length)."...";						
?>

substrをmb_substrに変更するだけ。ただし、$t_length=40;のままだと文字数多すぎだと思いますので20(文字数です)とかにしてあげてください。

なぜ文字化けしたの?

バイト数で文字列を取り出す関数のsubstr()を使わず、文字数で取り出す関数のmb_substr()にすれば文字化けしないよというお話。1バイトで済む英語に対して、日本語は2バイト言語(1文字に2バイトを要する文字)なのでバイト数で文字列を切り出すと文字化けしてしまうわけですね。

バイト数で切り出したほうが文字列が綺麗に並ぶんですけど、文字化けの方が微妙なのでこの際目をつぶります。

むしろ省略しなければいいんじゃないかという気もしてきますが、僕は略してあるほうがスッキリ見やすいのでこのままでGoです。

表示確認


文字化け直ってます。やったねパパ。

省略部分の「…」が嫌なら、

$np_title=mb_substr($np_title,0,$t_length)."...";	

の”…”の部分を変更すればいいんじゃないかなと思います。

iPadでも確認してみた


iPadでも確認。GoogleアドセンスはiPhone向けのサイズだし、サムネイルはちっさいし、中途半端にカスタマイズしました。やったねパパ。

プラグインがうまく動作しない場合

他のプラグインを停止させてから、再度表示を確認してみてください。WPtapは、Ktai Styleを有効化したままでも動作していましたが、他の似たようなプラグイン、例えばWPtouch等が有効化されたたままであれば動かないかも知れません。「何このプラグイン動作しない・・使えない!」とか思われる前にまず、ぶつかりそうなプラグインを停止してからお試し下さい。

雑感

デザイン、途中までやる気が出てたんですけど、なんかもういいかなって思って途中でやめました。1日も集中力もたないwiPhone対応してると「よく使うリンクが無くてウザイ」みたいな声も見かけますがね・・・僕は別に気にならないのでこのブログもそんな迷惑なiPhone対応になっています。気が向いたら何か手を入れます。

因みに、もっとしっかりしたiPhone向けサイトを作りたいならjQuery Mobileを使ったテーマ作成Tips(テーマも配布されてた)もご参照下さい。