[WordPress] 自作モバイルテーマを作成しました & 役立ち情報・コツをお教えします
先日、自作ブログテーマを作成したので、モバイルテーマもあわせて作りました。シンプル・イズ・ベター！
モバイルテーマ作成初心者ですが、作る際にいろいろと調べたり、コツのようなものも学んだので、シェアします。
この記事が役に立ったり、きっかけを与えられたらなあと思います。
モバイルテーマにスイッチさせるプラグイン
WPtap Mobile Detector というのを使いました。@nori510 さんが詳しく説明されています。
参考：WPtouch を卒業!!iPhone に最適化されたテーマと簡単なカスタマイズ方法など[wordpress] | nori510.com
スマートフォン表示の確認方法
iPhone で表示を確認する際は、Safari の開発モードで見ると便利です。
参考：iPhone、iPad でどのように Web ページ・ブログが表示されているのかを確認する方法 | OZPA の表 4
しかし、このモードでも表示のズレが発生するので、Xcode に内蔵されている iOS シミュレータが見た目そのままで表示してくれていい感じです。
iOS シミュレータは、以下のアドレスに入ってます（Spotlight で検索するほうが早いです）。
Developer/Platforms/iPhoneSimulator.platform/
Developer/Applications/
難点は Xcode の容量が大きいことですかね。
PC テーマを削いで、モバイルテーマを作る
僕はモバイルテーマを作る際に、PC 向けブログテーマファイル（2 カラム）をコピーして、それを雛形としました。
モバイルテーマでは、サイドバーを表示すると記事が見難くなるので、サイドバーを表示させる WordPress の関数を削除しました。
<?php get_sidebar(); ?>消した後に、記事を表示させている横幅をブログテーマ全体の横幅と一致させると、それだけでわりとそれっぽくなります。
横幅の見た目を自分で設定する
iPhone Safari は、PC におけるブラウザのウィンドウサイズに該当する Viewport という概念を持っているらしいです。なんで、iPhone でサイトを開くとなんだか違った感じに表示されます。
そこで、ViewPort を設定して、こちらが指定したブラウザサイズをするように iPhone に伝えるとこちらの思い通りの横幅で表示できます。
僕は以下のように設定しました。画像横幅が 500px、昨日利用したスライドシェアが 450px なので、それよりも少し大きい 600px で設定しました。
<meta name="viewport" content="width=600, user-scalable=yes" />微調整を繰り返して完成！
で、後は機能を削ぎに削ぎ落として、iPhone で表示を確認しつつ、微調整を繰り返します。
僕は作業開始してから、3 時間程度で今のカタチになりました。基本的に、PC 向けテーマからコードを消していくだけでできたので、思ったよりも時間がかかりませんでした。
現在は、フッターに検索しかありませんが、後でアーカイブ・カテゴリ・タグなどのコードを貼り付ける予定です。
自作ブログテーマを作られた方は、是非、モバイルテーマを自作されてみては？
そう、君のことです！