WordPressでKtai Styleを使ってjQuery Mobileスマートフォンサイトを制作する流れ

  • 2011
  • 11月
  • 17日
tutorial
tn_wordpress-dreamweaver

前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので
作業の流れをまとめました。
やり方は人それぞれだと思いますが、
作業の参考になってくれたら幸いです。

  1. ラフの作成
  2. HTMLマークアップ
  3. デザイン（テーマ）のカスタマイズ
  4. WordPressテーマ作成
  5. Tipsなど

1.ラフの作成

スマートフォンサイトラフ

一般的なwebサイト制作と同様にまずラフを制作します。
また、jQuery Mobileの特徴でもある画面遷移時の効果や、
表示のされ方などもこの時点で決めておくと良いでしょう。

2.HTMLマークアップ

HTML5でマークアップ

jQuery MobileはHTML5のカスタムデータ属性を使用しますのでHTML5でマークアップします。
マークアップしながらjQuery Mobileの設定を定義するのが理想ですが、
慣れないうちはまずjQuery Mobileは考えずに通常のマークアップをすると良いと思います。
この時点ではCSSは適用させません。

codingプレビュー
DEMO

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="http://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="http://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="http://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>
<!--  以下省略  -->

jqeryMobileプレビュー

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 css

また、jQuery MobileはJavaScriptでclass属性などが追加されますので、
それらのスタイルを調べる際にはfirebugやsafariのWebインスペクタなどを利用すると便利です。

静的なサイトであればここまでの作業で一通り完成となります。

jQueryMobileオリジナルテーマプレビュー

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用に先ほど作成したテーマを選択します。

ktai style theme

以上でスマートフォンからアクセスした場合に、
jQueryMobileを使用したオリジナルテーマが適用されます。

iphone screenshot

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 スワップスキルズ

Similar Posts

  • くまきち

    初めまして。
    スマートフォンサイトを制作中で、参考サイトを探している間にこちらの記事へ辿り着きました。
    私も最初、Jquery mobile＋Ktai styleで制作しようと思っていたので（最終的にJquery mobileはボツにしましたが）、とても参考になりました。
    そして、制作中、この記事を読んでいてずっと気になっていたことがありました。

    PC表示とスマフォ表示を切り替えるKtai style独自タグのでは、ブラウザだと(PC 表示にする)と表示されますよね？
    あのメニューボタンは、どうやってデザインを変更しているのでしょうか？

    方法があるんだろうと思って検索してみたのですが、結局解決出来なくて困っています。
    もしよかったら、教えていただけないでしょうか？

  • http://twitter.com/barchin ヒロ -hiroyuki ogawa-

    >くまきちさん
    サイトを見ていただきありがとうございます！

    質問についてですが、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”>で試してみたら、出来ました！
    本当にありががとうございます～！！

  • http://twitter.com/barchin ヒロ -hiroyuki ogawa-

    >くまきちさん
    解決したのですね！
    お役に立てて良かったです！

twitter @barchin

    横浜のサイト制作TSUKURIBE