WordPressをスマートフォンで最適化させるプラグイン「WPtouch」を導入する場合の注意点をまとめる。表示上のカスタマイズを紹介しているサイトは多いが、最初に考えるべきはナビゲーションだと思う。
WordPressはご承知のとおり、「投稿」と「固定ページ」から成り立っている。WPtouchは、デフォルトでは投稿を表示するだけだ。単にブログとして使用している場合はそれでいいが、固定ページを駆使してCMSとして活用している場合は、見せ方から考えなければならない。
また、テーマと違ってプラグインのデザイン変更なので、そのままではバージョンアップで上書きされてしまう。そこまで考えた運用が必要だろう。これらを踏まえて、私が注意したことをまとめた。WPtouch 1.9.6で、設定画面は日本語の場合である。
「iPhone Style Icon Generator」設定画面（部分）
モバイルテーマとデスクトップテーマの切替ボタン（MobilizerのiPhone 4表示イメージ）
- アイコンを設置する
まず、デザインの要となるアイコンがないと話にならない。サイトとの統一感を出すため、faviconと同じデザインで用意すべきだ。faviconがないなら、サイトのfavicon.icoとセットで作成する。WPtouch設定画面からリンクしているオンラインアイコンジェネレータ「iPhone Icon Generator 2.0」は本日現在動かないので、「iPhone Style Icon Generator」をオススメする。PhotoShopでつくるよりずっと早い。
デフォルトのままだとアイコンの反射がきついので、私は下記のとおり変更した。
- Type Of Glass Reflection：iPhone Style ⇒ Convex Glass
- Level of Glass Reflection：Middle ⇒ Normal
- Export Icon Dimensions (pixel)：57×57(iPhone 3) ⇒ 32×32
出来たPNGファイルをWPtouch設定画面からアップロードする。
- 固定ページをどこまで公開するか考える
投稿はカテゴリーIDやタグIDで除外設定しない限り表示されるが、固定ページはデフォルトでは非表示のままだ。なにをどのように公開するか、よく考えたい。固定ページを表示しすぎると、メニューがいっぱいになってしまうし、固定ページを階層化していても、WPtouchはすべて親として表示する。このため固定ページは必要最小限とし、サイトマップのみを表示して、他の固定ページはそこから入らせるのも一つの方法だ。
アイコンは固定ページごとに設定可能なので、これを使ってデザインに変化をつけることも出来る。アイコンは1と同じ方法で作成し、カスタムアイコンプール（wp-content/uploads/wptouch/custom-icons）にアップロードしておく。
- footer.phpを確認する
WPtouchは、画面下部にモバイルテーマとデスクトップテーマを切り替えるボタンが表示される。このとき、デスクトップテーマ（PC側で使用しているテーマ）のfooter.phpにテンプレートタグ「wp_footer」がない状態でデスクトップテーマに切り替えると、ボタンが再表示されなくなってしまう。モバイルテーマに戻せなくなるのだ。
<?php wp_footer(); ?>
「wp_footer」がないと正常に動かないプラグインは多いが、WPtouchもその一つだ。事前に確認し、ない場合は必ず記述しておくこと。
- デフォルトタイムゾーンを修正する
「WordPressで一部スクリプトが9時間ズレる場合の対応」に書いたとおり、WordPressはデフォルトタイムゾーンがUTC（協定世界時）のため、テーマの中で動くスクリプトの日付/時刻関数が9時間ズレる。WPtouchも同じで、日付/時刻関数を使うスクリプトを動かす場合は修正が必要だ。
アクセスカウンタを使用している場合、モバイルテーマにも同じカウンタを埋め込まないとアクセス数がカウントされない。このとき、モバイルテーマでもデフォルトタイムゾーンを修正しておかないと、デスクトップテーマで日付が変わっているのにモバイルテーマは前日のままになり、アクセスログのデータがメチャクチャになってしまう。前日のアクセス数が極端に減って表示される場合は、これが原因だ。
対応はデスクトップテーマと同様に、テーマのための関数（wp-content/plugins/wptouch/themes/default/functions.php）に下記を追加する。ただし、デスクトップテーマのようにWordPress管理画面「テーマの編集」から直接修正することは出来ない。ローカル環境でファイルを編集してからアップロードすること。
（修正前）
<?php include( dirname(__FILE__) . '/../core/core-functions.php' );
（修正後）
<?php date_default_timezone_set( 'Asia/Tokyo' ); include( dirname(__FILE__) . '/../core/core-functions.php' );
- Google AdSenseとGoogle Analyticsを設定する
スマートフォンからのアクセス数は増加している。貴重なアクセスを逃さないために、デスクトップテーマと同様の設定を必ずしておきたい。
WPtouchは、設定画面からGoogle AdSenseとGoogle Analyticsを簡単に挿入出来る。Google AdSenseは、IDとスマートフォン用チャネルを入力するだけでいい。Google Analyticsは、「Stats & カスタムコード」にスクリプトをコピー&ペーストする。これはデスクトップテーマに埋め込んでいるものと同一でよい。
- 日付・時刻の書式を修正する
多くのサイトで紹介されている日本語サイトらしい表示形式への変更。メインインデックス、アーカイブ、単一記事、コメントの4か所が対象になるが、わかりやすくまとめておきたい。
WPtouchでは、アーカイブテンプレート（archive.php）は存在せず、メインインデックス（index.php）に内包されている。検索結果テンプレート（search.php）も存在せず、アーカイブと同じ表示になる。表示形式は、「WordPress Codex 日本語版」を参照して自由に変更すればよい。
これらも「テーマの編集」から直接修正することは出来ない。ローカル環境でファイルを編集してからアップロードすること。
- メインインデックス
※カレンダーアイコンを表示する場合は修正不要デフォルト 17.06.2011 at 20:22
修正例 2012-06-17 @ 20:22
修正ファイル wp-content/plugins/wptouch/themes/default/index.php（修正前）
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?><span class="lead"><?php _e("Written on", "wptouch"); ?></span> <?php echo get_the_time('d.m.Y') ?> <?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?><br /><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?>（修正後）
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?><span class="lead"><?php _e("Written on", "wptouch"); ?></span> <?php echo get_the_time('Y-m-d') ?> <?php _e("@", "wptouch"); ?> <?php echo get_the_time('H:i') ?><br /><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?> - アーカイブ
デフォルト 6月 17, 2012
修正例 2012-06-17
修正ファイル wp-content/plugins/wptouch/themes/default/index.php（修正前）
<?php echo get_the_time('M') ?> <?php echo get_the_time('j') ?>, <?php echo get_the_time('Y') ?>（修正後）
<?php echo get_the_time('Y-m-d') ?> - 単一記事
デフォルト 6月 17th, 2012 @ 08:22 pm
修正例 2012-06-17 @ 20:22
修正ファイル wp-content/plugins/wptouch/themes/default/single.php（修正前）
<div class="single-post-meta-top"><?php echo get_the_time( __( 'M jS, Y @ h:i a', 'wptouch' ) ) ?> › <?php the_author() ?><br />
（修正後）
<div class="single-post-meta-top"><?php echo get_the_time( __( 'Y-m-d @ H:i', 'wptouch' ) ) ?> › <?php the_author() ?><br />
- コメント
デフォルト 1 月, 2 週s 前 ⇒「1か月と2週間前」の意味だろう
修正例 2012-06-17 @ 20:22
修正ファイル wp-content/plugins/wptouch/themes/default/comments.php（修正前）
<?php if (function_exists('wptouch_time_since')) { echo wptouch_time_since(abs(strtotime($comment->comment_date_gmt . " GMT")), time()) . " " . __( 'ago', 'wptouch' ); } else { the_time('F jS, Y'); } ?>（修正後）
<?php echo get_comment_date('Y-m-d @ H:i');?>
- メインインデックス
- はてなブックマークの被ブックマーク数を表示する
これも好みだが、メインインデックスにはてなブックマークの被ブックマーク数を表示したい場合は、下記のとおり。
これも「テーマの編集」から直接修正することは出来ない。ローカル環境でファイルを編集してからアップロードすること。
修正ファイル wp-content/plugins/wptouch/themes/default/index.php
表示位置はタイトル横が自然だが、タイトルがブロックレベルになっているので、そのままだと被ブックマーク数がズレてしまう。このため、筆者横に表示させることにした。
（修正前）
<?php if (bnc_show_author()) { ?><span class="lead"><?php _e("By", "wptouch"); ?></span> <?php the_author(); ?><br /><?php } ?>（修正後）
<?php if (bnc_show_author()) { ?><span class="lead"><?php _e("By", "wptouch"); ?></span> <?php the_author(); ?> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" /></a><br /><?php } ?> - バージョンアップ時の対策
テンプレートのカスタマイズは、5～7以外にもいろいろ出来る。メインインデックスに画像のサムネイルを表示したければ、「けんけん.com」を参考にするとよい。
ただし、どんなにカスタマイズしても、これらはプラグインのテンプレートなので、WPtouchをバージョンアップすると最新のファイルに上書きされてしまう。テーマをdefaultとは別名にして、実行ファイル（wp-content/plugins/wptouch/wptouch.php）から呼び出す方法もあるが、テーマのテンプレート自体が改善されることもあるので、これは一長一短だと思う。いまのところ、下記で対応しようと考えている。
- defaultとは別名のフォルダを作成し、テンプレートをバックアップする。
- WPtouchをバージョンアップする。
- DFでテンプレート部分の変更個所を比較し、影響がないならバックアップしたテンプレートを戻す。
- スマートフォンでの動作確認
実際の動作確認だが、複数のデバイスを持っている人は少ないと思うので、スマートフォン用エミュレータ「Mobilizer」を使う。iOS・Android両方でアプリを動かすランタイム「Adobe AIR」上で動くもので、先にAdobe AIRをインストールしておく。
1件のコメント
Comments are closed.
大変参考になりました。ありがとうございました。
私も実際にこのページを参考にして、htmlを編集しました。
しかし一点だけ、コメント欄の修正前と後のhtmlに誤りがあるようです。
当方初心者ですのでどのように改善すればよいのかわからず、困っています。
もし可能であれば、正しい記述を示して頂けるとありがたいのですが・・・
すいません、コメント欄の日付表示の変更方法は、39行目だけを入れ替えるのではなく、40、41行を削除して新しい記述だけにするということだったのですね。勘違いしておりました。これにてうまくできました。
お騒がせして申し訳ございませんでした。