jQuery Mobileとwordpressのテーマを使用して
スマートフォン対応にしてみました。
制作するときに下記のサイトを参考にしました。
参考サイト
http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile
今回のjQuery Mobileは1ページで作らずに
既存のwordpressのテーマにjQuery Mobileを呼び込む要素を配置する方法で複数ページで作成しました。
その時にjQuery Mobileの仕様で内部リンクのページ遷移で下記ような
- 「header部の「Back」ボタンとサイトのタイトルが被る」
- 「トップページの画像をエフェクトさせるjavascriptが効かない」
等のエラーが出ていたので下記のサイトを参考に修正しました。
参考サイト
http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/
回避作として「Back」ボタンや「戻る」ボタンのリンクに対して「rel=”external”」か「data-ajax=”false”」のいずれかを追加します。
<a href=”http://kys-web.com/maeda/lab/” rel=”external”>HOME</a>
また、スマートフォンごとにテーマを振り分けるプラグインとして
「WPtap Mobile Detector」を使用しました。
http://wordpress.org/extend/plugins/wptap-mobile-detector/
この辺もwordpressは便利ですね。
