WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。
WordPressのプラグインKtai Styleを使ったjQuery Mobileスマートフォンサイトを制作する流れです。
前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので
作業の流れをまとめました。
やり方は人それぞれだと思いますが、
作業の参考になってくれたら幸いです。
1.ラフの作成
一般的なwebサイト制作と同様にまずラフを制作します。
また、jQuery Mobileの特徴でもある画面遷移時の効果や、
表示のされ方などもこの時点で決めておくと良いでしょう。
2.HTMLマークアップ
HTML5でマークアップ
jQuery MobileはHTML5のカスタムデータ属性を使用しますのでHTML5でマークアップします。
マークアップしながらjQuery Mobileの設定を定義するのが理想ですが、
慣れないうちはまずjQuery Mobileは考えずに通常のマークアップをすると良いと思います。
この時点ではCSSは適用させません。
jQueryMobileの設定
HTMLマークアップが完了したら、jQuery Mobileの定義を設定していきます。
最初にCDNからファイルを読み込みます。
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
コードは、Download | jQuery Mobileより取得できます。
HTMLにdata-roleなどのカスタムデータ属性を追加して行きます。
マークアップの詳細は、ASCII.jp：西畑一馬のjQuery Mobileデザイン入門 や
jQuery Mobile 1.0b1 日本語リファレンスが非常に参考になります。
<body> <!-- jQueryMobile page --> <div data-role="page"> <header> <!-- jQueryMobile header --> <div data-role="header" data-backbtn="false"> <nav data-role="navbar"> <ul> <li><a href="/">Home</a></li> <li><a href="#menu" data-transition="slidedown">Menu</a></li> <li><a href="#search" data-rel="dialog">Search</a></li> <li><a href="#pcView" data-rel="dialog">PC</a></li> </ul> </nav> </div> <!-- /jQueryMobile header --> <h1><img src="https://design-spice.com/wp/wp-content/uploads/2011/11/img_logo.png" width="290" height="50" alt="Design Spice"></h1> <p>デザインスパイスでは、webデザインのtips、tutorial、topicsなどを公開しています。</p> </header> <!-- jQueryMobile content --> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li> <a href="single.html"> <img src="https://design-spice.com/wp/wp-content/uploads/2011/11/img_thumbnail.png" alt="サムネイル" width="60" height="45" /> <header> <h2>Dreamweaverとwordpressを連携させてテーマを編集する方法</h2> <data>2011.10.17</data> </header> <p>dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。。</p> </a> </li> </ul> <ul data-role="listview" data-inset="true"> <li> <a href="single.html"> <img src="https://design-spice.com/wp/wp-content/uploads/2011/11/img_thumbnail.png" alt="サムネイル" width="60" height="45" /> <header> <h2>Dreamweaverとwordpressを連携させてテーマを編集する方法</h2> <data>2011.10.17</data> </header> <p>dreamweaverCS5からはWordPress（他にも一部のCMS）との連携が更に強化されました。</p> </a> </li> </ul> <!-- 以下省略 -->
jQueryMobileの機能を実装する為に一部HTMLのタグを変更する場合もあります。
その辺りは臨機応変に対応します。
3.デザイン（テーマ）のカスタマイズ
マークアップが終わったらデザイン（テーマ）のカスタマイズをします。
jQueryMobileにはa～eの5つのテーマが用意されてるので、
それ以外の適当な文字をdata-theme属性で指定します。
<div data-role="header" data-backbtn="false" data-theme="z">
今回は、x,y,zの3種類のテーマを併用しました。
それぞれにCSSスタイルを適用して行きます。
また、jQuery MbileのCSSの設定を変更する場合は、
jQuery MbileのCSSの後にオリジナルのCSSを読みこんでスタイルを上書きします。
スタイルの変更はjQuery MbileのCSSを複製して変更すると簡単です。
また、jQuery MobileはJavaScriptでclass属性などが追加されますので、
それらのスタイルを調べる際にはfirebugやsafariのWebインスペクタなどを利用すると便利です。
静的なサイトであればここまでの作業で一通り完成となります。
4.WordPressテーマ作成
作成したhtmlをWordPressのテーマファイルに変更して行きます。
その前に、今回はスマートフォン対応にWordPressプラグインのKtai Styleを使用しました。
WordPress Plugins/JSeries ? Ktai Style (携帯対応プラグイン)
Ktai Styleには独自タグが用意されてるので、
サンプルで使用しているタグの一部はktai styleの独自タグとなります。ご注意ください。
テーマファイル作成
まずKtai Styleでは下記のテンプレートファイルは必須となります。
- style.css(テーマの名称、配布元、説明、バージョン、作者を記述)
- index.php(トップページ・カテゴリ一覧・検索結果）
- comments.php(コメント閲覧・投稿を行うなら必須）
今回はこれ以外に下記の4つのファイルを作成しました。
- header.php（ヘッダー部分共通）
- footer.php（フッター部分共通）
- single.php（個別記事ページ）
- function.php（独自関数定義ファイル）
- css/ds-style.css（オリジナルcss。style.cssとは別にした）
先ほど作成したHTMLのソース一部をWordPressのテンプレートタグに変えて行きます。
この部分は一般的なWordPressテーマを作成する流れと変わりません。
WordPress テーマ作成の具体的な方法は多くのサイトで紹介されるのでそちらを参照してください。
WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと. net
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
index.phpのソースのみサンプルで掲載します。
<?php ks_header(); /*Ktay Style独自タグ*/ ?>
<!-- jQueryMobile content -->
<div data-role="content">
<?php if (is_category()) : /* If this is a category archive */ ?>
<h1 id="categoryTitle">Category: <?php single_cat_title(); ?></h1>
<?php elseif( is_tag() ) : /* If this is a tag archive */ ?>
<h1 id="categoryTitle">Tag: <?php single_tag_title(); ?></h1>
<?php endif; ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<ul data-role="listview" data-inset="true" data-theme="y">
<li>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
<header>
<h2><?php the_title(); ?></h2>
<?php the_date('Y.m.d', '<data>', '</data>'); ?>
</header>
<?php the_excerpt(); ?>
</a>
</li>
</ul>
<?php endwhile; ?>
<aside class="ui-grid-a">
<div id="pageNaviNext" class="ui-block-a"><?php previous_posts_link('次の5件', '0'); ?></div>
<div id="pageNaviPre" class="ui-block-b"><?php next_posts_link('前の5件', '0'); ?></div>
</aside>
<?php else : ?>
<h2>記事が見つかりませんでした。</h2>
<?php endif; ?>
</div>
<!--/jQueryMobile content-->
<?php ks_footer(); /*Ktay Style独自タグ*/ ?>
</body>
</html>
プラグイン・テーマファイルのアップロード
Ktai Style (携帯対応プラグイン)よりプラグインをダウンロードし展開して、
ktai-style フォルダーごと wp-content/plugins/ に転送します。
オリジナルのテーマファイルは、wp-content/ktai-themes/ ディレクトリーを作成して、
そこに転送します。
WordPressの管理画面よりKtai Styleを有効にし、
「携帯表示」→「テーマ」でiPhone,Android用に先ほど作成したテーマを選択します。
以上でスマートフォンからアクセスした場合に、
jQueryMobileを使用したオリジナルテーマが適用されます。
5.Tipsなど
制作時のtipsや気を付けたい点など羅列していきます。
テキストを省略させない
ヘッダーやフッターなど一部で長いテキストを表示すると、
自動的に末尾のテキストが省略して表示されます。
テキストを省略せずに表示するためにデフォルトのCSSを上書きします。
/* テキストを省略せずに表示する */
.ui-header .ui-title, /* ヘッダー */
.ui-footer .ui-title, /* フッター */
.ui-btn-inner, /* ボタン */
.ui-li-heading, /* リスト見出し */
.ui-li .ui-btn-text a.ui-link-inherit, /* リンクリスト */
.ui-li-desc /* リスト詳細 */
{
overflow: visible;
white-space: normal;
}
Ajaxでページ遷移させない
複数ページを包含したページにリンクする場合はリンクに rel=“external” か
data-ajax=“false” を追加する必要があります。
今回殆どのページがこれに当たりましたので全リンクでAjaxを使用しない設定にしました。
jQueryとjQueryMobileのjsの間に記述します。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
jQueryでカスタムデータ属性追加
「前の5件」などのリンクはWordPressのテンプレートタグで出力してるのですが、
このリンクのカスタムデータ属性はjQueryで追加する方法を取りました。
//#indexはこのリンクを内包してるpageにつけたID
$("#index").live('pagecreate', function(){
$("#pageNaviNext a").attr("data-role","button").attr("data-icon","arrow-l").attr("data-theme","x");
$("#pageNaviPre a").attr("data-role","button").attr("data-icon","arrow-r").attr("data-theme","x").attr("data-iconpos","right");
});
Ktai StyleのTips
※ktai Style固有の内容なので別の方法でスマートフォン対応してる場合は当てはまりません。
viewport
iPhone,Android用のテーマには自動で
<meta name="viewport" content="width=device-width,initial-scale=1" />
が追加されるのでテーマファイルからviewportの記述を削除して問題ありません。
サムネイルのサイズを変更する
Ktai Styleは自動的に小さいサイズのサムネイルを生成しますが、
このサイズを変えたい場合は以下のコードをテーマの functions.php に追加します。
※既に違うサイズでサムネイルを生成してしまってる場合は、それらのファイルを削除する必要があります
function my_thumbnail_max_size() {
return 280;//サムネイルのサイズpx
}
add_filter('ktai_thumbnail_max_size','my_thumbnail_max_size');
他のプラグインが動作しない場合
ページヘッダの表示用 add_action('wp_head'); を利用しているプラグインの場合、
ks_wp_head() の引数をKTAI_DO_PC_HEAD に変更すると動作するようになります。
<?php ks_wp_head(KTAI_DO_PC_HEAD) ?>
同様にページフッタの表示用 add_action(‘wp_footer’); を利用しているプラグインの場合、
ks_wp_footer() の引数をKTAI_DO_PC_HEAD に変更すると動作するようになります。
<?php ks_wp_footer(KTAI_DO_PC_HEAD) ?>
※それでも他の全プラグインの動作を保障するものではありません
ソーシャルボタンなどのリンク
Ktai Styleではリンクのドメインが省略されます。
ドメインからのURLを取得する場合は頭に bloginfo('url') を付けます。
<a href="http://b.hatena.ne.jp/entry/<?php bloginfo('url') ?><?php the_permalink() ?>" data-hatena-bookmark-title="<?php wp_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加">
外部サイトの画像をそのまま表示させる
ソーシャルボタン、バナーなどで外部サイトの画像をそのまま表示させたい場合は、
以下コードをテーマの functions.php に追加します。
http://ecx.images-amazon.com/images/の部分は、
実際に挿入される画像 URL にあわせて適宜修正してください。
function ks_keep_hatena_image($replace, $orig, $src) {
if (preg_match('#^http://b.hatena.ne.jp/#', $src)) {
$replace = $orig;
}
return $replace;
}
add_filter('ktai_image_to_link', 'ks_keep_hatena_image', 10,3);
その他Ktai Styleで困ったら目を通すページ
WordPress Plugins/JSeries » Ktai Style よくある質問と答え
WordPress › フォーラム » タグ — Ktai Style
終わりに
jQuery Mobileを使ったサイトってどれも似たようなサイトになってしまうと思ってましたが、
結構弄れるものです。
また全体にjQuery Mobileを使うのでなく、フォームやリスト、画面遷移だけなど一部のみに使う方法もアリかなと思います。
個人的にはスマートフォンサイトデザインの知識が不足してるのでそちらも合わせて学んで行かなければなと。
最後に今回のKtai Styleを使ったWordPressのスマートフォン対応はSwapSkillsのセミナー
「スマートフォン+ jQuery Mobile in WordPress」の内容をベースにさせてもらいました。
充実した内容だったのでお礼の意味も込めて取り上げさせてもらいました。
Webプロフェッショナル向け勉強会 SwapSkills スワップスキルズ
Add Comment
初めまして。
スマートフォンサイトを制作中で、参考サイトを探している間にこちらの記事へ辿り着きました。
私も最初、Jquery mobile＋Ktai styleで制作しようと思っていたので（最終的にJquery mobileはボツにしましたが）、とても参考になりました。
そして、制作中、この記事を読んでいてずっと気になっていたことがありました。
PC表示とスマフォ表示を切り替えるKtai style独自タグのでは、ブラウザだと(PC 表示にする)と表示されますよね？
あのメニューボタンは、どうやってデザインを変更しているのでしょうか？
方法があるんだろうと思って検索してみたのですが、結局解決出来なくて困っています。
もしよかったら、教えていただけないでしょうか？
>くまきちさん
サイトを見ていただきありがとうございます！
質問についてですが、Ktai styleの仕様では
http://XXXXX.com?pcview=true
のようにURLの最後にパラメータ”pcview=true”をつけるとPC表示に切り替わるようです。
なので僕はデザインを変更してると言うよりは、
ボタンを作成してリンクにそのページのURLにパラメータ付けた値を指定してます。
具体的には、
<a href="<?php the_permalink() ?>?pcview=true">
と書いてますね。
＞ヒロさん
返信ありがとうございます！
私も/?pcview=true”がついてるので、試したことはあったのですがダメだったのですが、やり方がちょっと違ってたようです。
<a href="?pcview=true”>で試してみたら、出来ました！
本当にありががとうございます～！！
>くまきちさん
解決したのですね！
お役に立てて良かったです！
はじめまして
スマートフォンサイトを、Ktai styleで制作中の者です。
Ktai styleの独自タグを使用して、スマフォのテンプレートに「(PC表示にする)」リンクを貼り、PCサイトへリンクするところまでは問題なかったのですが、PCサイト側から戻れなくなってしまいました。
スマフォの「戻るボタン」を押しても、検索結果から訪問しても、URLを打って表示させても、キャッシュを削除しても、何故かPCページを表示するようになってしまいました。
PCサイトのどこかに「(携帯表示にする)」リンクが表示されると思っていたのですが、何も表示されていません。
PCサイトとスマフォサイトが同じURLの場合、PCサイト側から戻るにはどうすれば良いのでしょうか？
どうして、PCサイトしか表示しなくなってしまったのか？？？
検索して探したのですが、どうしても解決できず困り果てています。
初心者で、ピントの外れた質問かもしれませんが、ヒントだけでも結構ですので、ご教授いただけないでしょうか？
よろしくお願いいたします。
>yamaさん
コメントありがとうございます。
スマホサイトからPCサイトに切り替えた場合、最下部に「携帯表示にする」というリンクが表示されます。
小さくて分かりづらいと思いますが…
そちらは表示されてますか？
またキャッシュではなくクッキーを削除すると携帯表示に戻ると思います。
試してみてください。
早速のお返事ありがとうございます。
クッキーを削除しましたら、スマフォサイトを表示できました！
ありがとうございました。
ただ、PCサイトに切り替えた場合の「携帯サイトを表示する」リンクはないです。
HTMLソースでも確認しましたが何処にもありませんでした。
「PCサイトを表示する」タグですが、
<?php ks_switch_pc_view('’,”); ?>
と書いて、PCサイトを表示できていますが、間違っているのでしょうか？
長いコメントを書いて申し訳ありませんが、
何卒、よろしくお願いいたします。
>yamaさん
※ご希望通りコメントの削除、及び中途半端になってしまったのでheader.phpのコードも削除致しました。
不都合がありましたら言って下さい
PCサイト表示のタグは書かれた通りで問題ないです。
携帯表示のリンクは、
ktai_style.php内の
add_action(‘wp_footer’, array($this, ‘switch_ktai_view’));
に当たると思います。
wp_footerをフックに表示してるので、pcサイトでwp_footerを読み込んでなければ表示されません。
そのケースが考えられます。
今のところ、それ以外の原因はちょっと思い付かないです…
ヒロさん、こんにちは。
お返事を、ありがとうございます。
また、削除の件、お手数をおかけしました。
お答えいただいた内容は、今の私の知識では、難しくて解りませんが、ヒントをいただけましたので、ここからは自分で調べて解決できるように頑張ります。
ありがとうございました。
yamaさん
具体的には、PCサイト用のテーマ内に、という記述があれば、
携帯表示のリンクも表示されるはずです。
この情報がお役に立てれば良いのですが…
早く解決されることを願ってます！
ヒロさん こんばんわ！
「PC側に（携帯表示にする）」件、解決いたしましたので、ご報告させていただきます。
おっしゃるとおり、が、入っていなかったのが、原因でした。wordpressの仕事を受けているのに、お恥ずかしい話ですが今回初めて知りました。
それでも、PC側の表示が最下部では、見にくくて気がついてもらえそうにないとの事で、またまた四苦八苦しましたが、ktai styleの独自フィルター「ktai_switch_mobile_view_css」で、CSSをフィルターして、PC側の「携帯表示にする」のスタイルや表示位置を、コントロールできました。
ここまで、一人で悩んでいたのでは、いつまでも解決できなかったと思います。本当にありがとうございました。
ただ、切り替えメニューをフィルターする
「ktai_switch_mobile_view」（引数: $menu, $path）の使い方が解らず解決していません。
自分で考えると言った先から申し訳ありませんが、コードをみていただけませんでしょうか？
下記のコードを、ktai styleのテンプレートデレクトリーのfunctions.phpに追記しました。
引数「$path」について、さっぱり解らないです。
下記は、$pathの記述がないのが問題でしょうか？
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
function ktai_switch_mobile_view( $menu ) {
return $menu . “スマートフォン表示”;
}
add_filter( ‘wp_footer’, ‘ktai_switch_mobile_view’ );
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
何度もすいませんが、お時間がゆるす時で結構ですので、
またお返事いただけましたらうれしいです。
yamaさん
解決したのですね。良かったです！
ktai_switch_mobile_viewは僕も使ったことないのですが、下記の方法で実装できました。
function switch_mobile_view_txt($menu) {
$html = str_replace(‘携帯表示’, ‘スマホ表示’, $menu);
return $html;
}
add_filter(‘ktai_switch_mobile_view’, ‘switch_mobile_view_txt’);
ちなみにこれに関しては、携帯用テーマのfuncition.phpではなく
PCテーマのfunciton.phpに書かないと動作しなかったです。
試してみてください！
ヒロさん こんばんわ。
すごいです！
見ず知らずの私の勝手な要望に対して、大変お手数をおかけしました。
上記のコードを見ても、今の私には解りませんが、、
勉強して使いこなせるようになりたいと思います。
本当にありがとうございました。
>yamaさん
いえいえ、僕も調べてみた結果ですので。
お互い勉強していきましょう！