jQuery MobileでWordPressブログのテーマを制作して、スマートフォン対応させる手順(私の場合)。

先日このブログ用に、jQuery Mobileを使ってWordPressのスマホ向けテーマを制作しました。
この記事では、制作手順のおおまかな流れや、制作にあたって感じたことなどを中心にまとめています。
すでにWordPressのオリジナルブログがあって、これからスマホ対応にjQuery Mobileの採用を検討している方などの参考になれば幸いです。
「jQuery Mobileって何?」という方は、「jQuery Mobileとは――スマホ時代の到来とWeb制作」で分かりやすく解説されているのでチェックしてみてください。

私がjQuery Mobileを選んだ理由

先日「スマートフォン対応サイトを制作する5つの方法。」という記事でも、スマートフォン向けサイトを作る方法がいくつかあることをご紹介しましたが、その中で私が「jQuery Mobile」を選んだ主な理由は、下記の5点です。

マルチデバイス対応
iPhoneやAndroidだけでなく、Windows PhoneやBlackBerryなど幅広いデバイスに最適化してくれる。
タッチデバイスに適したユーザビリティ
iOSヒューマンインターフェイスガイドラインに準じたUIを手軽に実現できる。
高いアクセシビリティ
Web標準によるセマンティックなHTMLの記述を前提に設計されている。
かんたん
HTMLにカスタムデータ属性を追加することで簡単にスマホ向けの機能を追加できる。
かっこいい
ajaxでのページ遷移のエフェクトや、デフォルトのUIパーツがかっこいい。

もちろん、jQuery Mobileを使うデメリットもいくつかありますが、これだけ充実したフレームワークなら、覚えておいて損はないはず。ということで、勉強がてら挑戦してみました。
あとは、PC向けのサイトとデザインの統一感を出したかったので、ある程度柔軟にカスタマイズできるという点も、選んだ理由の一つです。それからそれから、JavaScriptに疎くても大丈夫というのも、私的に大きなポイント。

制作にあたって必要な知識

まず、HTMLとCSSは必須。デザインのカスタマイズをするなら、CSS3の知識があったほうがいいですね。それからjQuery MobileとWordPressのテーマ制作に関する基礎知識が必要となります。
jQuery Mobileの基礎知識については、私は下記のサイトを参考にしました。

【参考書籍】
jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
jQuery Mobile ポケットリファレンス

制作の工程

既存のWordPressブログサイトをスマホ対応させるための手順です。
なお、これは私の独学での制作手順かつ、サンプル画像等はこのブログのスマホ対応のために作成したものですので、あくまでも一つの例としてご覧下さい。

  1. サイトマップとワイヤーフレームの作成
  2. jQuery Mobileの「ThemeRoller」を使ってベースとなるテーマを作成
  3. トップページのコーディング
  4. WordPressのテンプレートファイルへの落し込み
  5. ユーザーエージェントの切り替え設定

1.サイトマップとワイヤーフレームの作成

スマホサイトのワイヤーフレーム

これは、既存のPCサイトをスマホ対応させる際に必須となる作業です。スマートフォンの画面サイズや通信速度を考慮して、必要なコンテンツとそうでないものを選別し、サイトマップを作成していきます。
ちなみに私のブログの場合、スマートフォンからのアクセスは、おそらくRSSやSNSのリンクから当該記事の閲覧のみ…という流れがほとんどかと思われるので、アーカイブ的なナビゲーションは「カテゴリー」のみ。あとはサイト内検索と、トップページにて新着順に投稿がリストアップされていれば十分だろう…と考えました。

デザインに関してはPCサイトのものを流用するので、図のようなレイアウト構成が分かる程度のワイヤーフレームを、必要なページパターン数だけ作成しました。
そしてこれらを踏まえて、WordPressのテーマ制作に必要となるファイル構成を、下記の図のように決めました。

サイトマップとテーマファイル構成
WPのテーマ制作に必要なファイル構成
パーツテンプレート 概要
header.php ヘッダー部分
footer.php フッター部分(MENU以下)
content.php 固定ページ用コンテンツ部分
content-single.php 個別記事ページ用コンテンツ部分
content-excerpt.php 記事一覧ページ用コンテンツ部分
ページ用テンプレート 概要
index.php トップページ
single.php 個別記事ページ
category.php カテゴリページ
page.php 固定ページ(コンタクト)
search.php 検索結果用ページ
404.php 404エラーページ

「検索フォーム」「カテゴリリスト」「アバウト」の3つについては、jQuery Mobieのページ構造を利用して、footer.phpに記述することにしました。

2.jQuery Mobileの「ThemeRoller」を使ってベースとなるテーマを作成

ThemeRollerで作成したベースデザイン

詳しい使い方は省きますが、jQuery MobileのThemeRollerを使うと、配色や角丸の値を簡単にカスタマイズすることが可能で、作成したデザインをCSSファイルでダウンロードできます。
使い方も解説いらずで、直感的にとても分かりやすくできているので、オリジナルのカラーテーマで手っ取り早くjQuery Mobileをセミカスタマイズしたい人にもおすすめです。

私はこれを利用して、まずベースとなるデザインを画像のように設定しました。PCサイト用に作成したカラーテーマを、Adobe Kulerにアップロードしておくと、ThemeRollerから読み込めるので便利ですね。
作成してダウンロードしたCSSファイルは、WordPressのスマホ用テーマフォルダ内に「style.css」として保存しましょう。

3.トップページのコーディング

いよいよコーディングです。まずHTMLのヘッダーに、先ほどThemeRollerで作成したスタイルシートを読み込みます。そして、jQuer Mobileのカスタムデータ属性を使って、トップページ全体のHTMLファイルを作成します。あとは、CSSファイルにデザイン要素を追加してカスタマイズしていきます。
CSSのカスタマイズは、ブラウザのコードインスペクタでひとつずつclass名確認して…という作業なので結構手間取りましたが、慣れてしまえば要領がつかめると思います。

jQuery Mobileのコーディング方法は「西畑一馬のjQuery Mobileデザイン入門」でステップごとに詳しく解説されていますので、そちらでどうぞ。

4.WordPressのテンプレートファイルへの落し込み

3で作成したHTMLファイルをもとに、WordPressのテーマを制作していきます。各コンテンツはWordPressのテンプレートタグで呼び出し、ヘッダー、フッター、コンテンツの各パーツに分けてPHPファイルを作成します。トップページ(index.php)が完成したら、その他のページのコンテンツ部分を確認・調整しながら仕上げていきます。
で、私はこんな感じに仕上がりました。

スマホテーマのスクリーンショット

5.ユーザーエージェントの切り替え設定

スマホからアクセスされた場合に、PC用サイトと同じアドレスでもスマホ用のテーマに自動で切り替えてくれる「WPtap Mobile Detector」という便利なプラグインがあるので、WordPressにインストールして有効化します。
設定画面を開き、各デバイスごとに、使用したいテーマをプルダウンで選択したら、Updateボタンをクリックするだけ。最後に実機確認をして、スマホ対応完了です!

「WPtap Mobile Detector」の設定画面

まとめ

今回こうして制作してみて、モーダル・ダイアログの背景が半透明にできるといいのになーとか、jQuery Mobileのページ構造上仕方ないのかもしれないけど、ページ内の#リンク(アンカー)が動作しないのはやだなーとか、Androidのborder-radiusの汚さはどうにかならないのかなーとか、気になる点はいくつかありますが、はじめてのスマホサイト、短い制作時間でここまでできちゃうのは、やっぱりjQuery Mobileのおかげだと思います。

以上、こんな感じで流れだけをざーーっと説明してみましたが、お役に立てたましたでしょうか?ほんとは、もうちょっと細かい部分の説明をしたかったのですが…、それはまた次の機会に!
よかったらこのブログも、スマートフォンからアクセスしてご覧になってみてくださいね♪

meglog.net
Pocket

  • Pingback: 【メモ】wordpressのスマホテーマを自分好みに変えたい!⇒素敵な記事を発見! | つばめのおつかい()

  • かやはら

    この記事を参考にさせて頂きました!このプログのフォントがとても素敵なのですが、何のフォントを使っているのか教えて頂けませんでしょうか?

    • かやはら様
      コメントいただきありがとうございます!
      お役に立てたようで大変うれしく思います。
      このブログは、英字のフォントにはGoogle Fontsの「Open Sans」を使っています。
      シンプルで大好きなフォントの1つです。
      font-familyの設定はCSSをご覧になってみてください^^