jQuery Mobileを使ってiPhone用のWordPressテーマを作るTips

Ads

話題のjQuery Mobileを使用したWordPress
のiPhone用テーマを作成する方法のご紹介
です。あくまで、対応させる為のTipsという事
で了承願います。jQuery Mobileは、モバイル
に簡単に対応させる事が出来るライブラリで、
jQueryのプラグインです。

対応させるだけなのでcssの調整とか細かい点などはご自身で変更してみてください。

jQuery Mobile


基本的に、jQuery Mobileはライブラリを読みこめばあとはdivにidを振ったり、data-theme等を加えればいいだけのようなのでテーマファイルを作るときもその手順通りで済むようですね。

細かい作り方は割愛し、ここでは大まかな手順をご紹介します。デザインに関してはjQuery Mobileのドキュメントをご確認ください。

おおまかな手順

  1. 適当にWPテーマのフレームワークを用意
  2. header.phpにjQueryとjQuery Mobileのjsファイルへのリンクコード、cssを追記
  3. <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>
  4. divにdata-roleとdata-theme、idを振る
  5. <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">
  6. footer.phpに以下のコードを追記したり変更したり
  7. </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>
  8. index.php、search.php、archive.php等のループを以下に変更
  9. <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>
  10. 以下が完成したテーマ

  11. ローカル環境でしか確認していませんけど、動作してたのでたぶん大丈夫じゃないかなと思います。

後は検索ボックスの装飾とかコメントとかcss書いたり広告入れたりですが、必要だったり不要だったりと個人差出るでしょうから、書いていません。

ユーザーエージェントで切り替える

テーマを作成したらユーザーエージェントでテーマごと切り替えればOKですかね。cssだけなら楽ですが、テーマを丸ごと切り替える必要があるので、PHPで切り替えたほうがいいのかな。
切り替える方法は、iWPhonePluginのコードを参考にするか、そのまま応用すれば楽そうだなぁと思いました。

このブログはまだ対応させていませんけど・・・暇ができたら対応したいです。

タイトルとURLをコピーしました