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

スポンサーリンク

話題の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 :
TRB :

Comments & Trackbacks (6)

  1. wokamoto

    jQuery Mobile 良さそうですね。

    テーマを作成したらユーザーエージェントでテーマごと切り替えればOKですかね。cssだけなら楽ですが、テーマを丸ごと切り替える必要があるので、PHPで切り替えたほうがいいのかな。

    UAでテーマを切り替えるには、このプラグインを使うと簡単に実装できそうです。
    [WordPress] UA スニッフィング機能を追加するプラグイン wp_attache_mobile
    http://spais.co.jp/20100510/wordpress-ua-%E3%82%B9%E3%83%8B%E3%83%83%E3%83%95%E3%82%A3%E3%83%B3%E3%82%B0%E6%A9%9F%E8%83%BD%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-wp_attache_mo/

    • シロ

      うお、こんな便利なプラグインあったんすねwちょっとテストしてみますー!いつもありがとうです:D

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services