話題のjQuery Mobileを使用したWordPress
のiPhone用テーマを作成する方法のご紹介
です。あくまで、対応させる為のTipsという事
で了承願います。jQuery Mobileは、モバイル
に簡単に対応させる事が出来るライブラリで、
jQueryのプラグインです。
対応させるだけなのでcssの調整とか細かい点などはご自身で変更してみてください。
jQuery Mobile
基本的に、jQuery Mobileはライブラリを読みこめばあとはdivにidを振ったり、data-theme等を加えればいいだけのようなのでテーマファイルを作るときもその手順通りで済むようですね。
細かい作り方は割愛し、ここでは大まかな手順をご紹介します。デザインに関してはjQuery Mobileのドキュメントをご確認ください。
おおまかな手順
- 適当にWPテーマのフレームワークを用意
- header.phpにjQueryとjQuery Mobileのjsファイルへのリンクコード、cssを追記
- divにdata-roleとdata-theme、idを振る
- footer.phpに以下のコードを追記したり変更したり
- index.php、search.php、archive.php等のループを以下に変更
- 以下が完成したテーマ
<link rel="stylesheet" href="/css/jquery.mobile-1.0a1.min.css" /><script src="/js/jquery-1.4.3.min.js"></script><script src="/js/jquery.mobile-1.0a1.min.js"></script> |
<body <?php body_class(); ?>> <div data-role="page" data-theme="b" id="jqm-home"> <div data-role="header"> <h1><?php bloginfo('name'); ?></h1> </div> <div data-role="content"> |
</div><!-- data role content--> <div data-role="footer" class="ui-bar"> <a href="#jqm-home" data-role="button" data-icon="arrow-u">上へ</a></div> <?php wp_footer(); ?> </div></body> |
<ul data-inset="true" data-dividertheme="b" data-role="listview" data-theme="c"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php endwhile;endif ?></ul> |
ローカル環境でしか確認していませんけど、動作してたのでたぶん大丈夫じゃないかなと思います。
後は検索ボックスの装飾とかコメントとかcss書いたり広告入れたりですが、必要だったり不要だったりと個人差出るでしょうから、書いていません。
ユーザーエージェントで切り替える
テーマを作成したらユーザーエージェントでテーマごと切り替えればOKですかね。cssだけなら楽ですが、テーマを丸ごと切り替える必要があるので、PHPで切り替えたほうがいいのかな。
切り替える方法は、iWPhonePluginのコードを参考にするか、そのまま応用すれば楽そうだなぁと思いました。
このブログはまだ対応させていませんけど・・・暇ができたら対応したいです。
