• かちびと.net

    iPhoneやiPadに自動対応させるWPプラグイン・WPtapを導入したけど文字化け箇所があったので対処法をメモ。文字化け対策です。分からない方もいらっしゃると思ってメモ的にエントリ。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

さて、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(テーマも配布されてた)もご参照下さい。

URL :
TRB :

Comments & Trackbacks (13)

  1. wata

    すみません。コメントする記事間違えてしまいました。

    このプラグインを使ってみたのですが、サムネイル画像を表示させるにはどのようにしたらいいのか、おしえていただけませんか?

    • シロ

      こんにちは。

      サムネイル画像を表示させるにはどのようにしたらいいのか、おしえていただけませんか?

      サムネイルは僕がカスタマイズして表示させたもので、プラグインの機能にはありません。このブログのPC用テーマでもTOPページで画像を表示させているのですが、カスタムフィールドを使用して画像を表示させています。

      参考になれば幸いです:)

  2. こーち

    文字化けの修正ですが、mb_strimwidth関数を使うとこんなに簡単になりますよ。

    $np_title=mb_strimwidth($np_title,0,$t_length,”…”);

    マルチバイト文字は2文字として数えて丸めてくれます。

    http://php.net/manual/ja/function.mb-strimwidth.php

    • シロ

      こんにちは!おおー、これは知りませんでした!
      教えてくれて有難う御座います!

  3. parquen

    thx

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services