http://jquerymobile.com/
jQuery
http://jquery.com/
jQuery
Mobile は、簡単で便利。
ブラウザ間の違いを気にしなくて良い。（IE対応など）
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
81
・ jQuery Mobileのタグ
・ PHP
・ WordPressテンプレートタグ
・ WordPress条件分岐タグ を組み合わせるのがコツ。
jQuery Mobile のタグはリファレンス等を参考に。
Designs | jQuery Mobile
http://jquerymobile.com/designs/
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
82
ダウンロード jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
83
ダウンロード jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
84
テーマフォルダの中に、 jQueryとjQuery Mobileを入れる。
ココでは、
jsフォルダを 作り、
その中に
入れました。
jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
85
jsフォルダの中身
jQueryと
jQuery Mobileの サイトから
ダウンロードした ファイル。
jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
86
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-1.0b3.min.css" />
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.6.4.min.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.mobile-1.0b3.min.js"></script>
通常のWordPressテーマにおいて 読み込むテンプレートタグ。
jQuery Mobile を使う準備
metaタグの中に、jQuery Mobileを読み出すタグを書く。
多くのテーマフォルダでは、header.phpファイル WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
87
metaタグの中に、jQuery Mobileを読み出すタグを書く。
<link rel="stylesheet" href="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.css" />
<script src="<?php ks_theme_url(); ?>js/jquery-1.6.4.min.js"></script>
<script src="<?php ks_theme_url(); ?>js/jquery.mobile-1.0b3.min.js"></script>
多くのテーマフォルダでは、header.phpファイル
Ktai Styleで読み込む場合のタグ。
→これで、ktai-themesフォルダを 読み込んでくれる。
jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
88
WordPressのコアファイルには、jQueryが同梱されているので、
以下のWordPressのテンプレートタグで、読み込むこともできます。
<?php wp_enqueue_script('jquery'); ?>
jQuery Mobile を使う準備
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
89
<body>
<div data-role="page" data-theme="c">
<div data-role="header" data-theme="a">
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
<div data-role="content" data-theme="c">
～～～
</div>
<div data-role="footer" data-theme=“a">
～～～
</div>
</div>
（１）テーマの色を確定
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
90
<div data-role="header" data-theme="a">
<a href="<?php echo get_bloginfo('url'); ?>"
data-icon="home">TOP</a>
<h1><?php echo get_bloginfo('name'); ?></h1>
</div>
サイトURL
（WordPressのテンプレートタグ）
（２）アイコンもタグだけで実現。
記事上の共通部分は、
header.phpファイルを用意 WordBench大阪 夏のスマホサイト祭り
WordPressにおける具体的な実装方法
91
<ul data-role="listview" data-inset="true">
<li data-role=“list-divider”>墨田区</li>
<li><a href=“×××.html“>隅田公園
</a></li>
<li><a href=“×××.html“>錦糸公園
</a></li>
</ul>
HTML では・・・
トップページは、
home.phpファイルを用意
（３）リストビューもタグだけで実現。
リストもタグ指定で簡単。
WordPressで、カテゴリごとにリスト化も簡単。
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
92
<?php
$my_query = new WP_Query(array(
'cat' => 1,
'posts_per_page' => -1,
'orderby' => 'comment_count', 'order' => 'DESC'
));
?>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><?php echo get_catname('1'); ?></li>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
HTML から
WordPress テーマ化
（３）リストビュー
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
93
<?php
$my_query = new WP_Query(array(
'cat' => 1,
'posts_per_page' => -1,
'orderby' => 'comment_count', 'order' => 'DESC'
));
?>
カテゴリーID「１」
の記事を
配列に入れる。
（３）リストビュー
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
94
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><?php echo get_catname('1'); ?></li>
<?php while($my_query->have_posts()) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
カテゴリーID「１」の カテゴリー名を取得
カテゴリーID「１」の記事を ループ処理（繰り返し処理）
（３）リストビュー
記事のタイトルを取得
記事のリンクURLを取得
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
95
<div data-role="collapsible" data-collapsed="true">
～～～
WEBAPIを利用して、
Yahoo!知恵袋の関連情報を自動取得＆表示
～～～
</div>
各記事は、
single.phpファイルを用意
（４）折り畳み
コンテンツの折り畳みも簡単。
WordPressと組み合わせれば、
表示するコンテンツの量も変えられる。
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
96
<div data-role="footer" data-position="fixed" data-theme="c">
<div data-role="navbar">
<ul>
<li><a href=“http://www.○○○.com/">TOP</a></li>
<li><a href=“http://www.○○○.com/profile.html">プロフィール</a></li>
<li><a href=“http://www.○○○.com/mail.html">お問い合わせ</a></li>
</ul>
</div>
</div>
（５）フッターナビゲーション
記事下の共通部分は、
footer.phpファイルを用意
動的にならないのなら、
直接URLを入れても良い。
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
97
（コラム）
レスポンシブ・ウェブデザイン のディレクションについて。
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
98
レスポンシブ・ウェブデザインのディレクション
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
前提：
「モバイルファースト」
モバイルユーザーに対応したコンテンツ
の出し方から考えていく。
99
レスポンシブ・ウェブデザインのディレクション
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
紙から考えるイメージでは無い。
レスポンシブ・ウェブデザインが普及したら、
Web ブラウザベースでデザインしていくことも？
例：
text-shadow →影を付ける
border-radius →角丸を付ける
参考：菊池崇さんの技術評論社さんでの記事
http://gihyo.jp/design/feature/01/css3-approach/0001
通常の制作の流れ
１．要件定義
２．ワイヤーフレーム
３．デザインをPhotoshopやFireworksなどで作る ４．モックアップ
５．実装
６．デバック ７．完成納品
レスポンシブ・ウェブデザインの
案件だったのに、実現不可能になることも。
ワイヤーフレームを決める段階から
入り込めないと厳しいのでは？ 100
レスポンシブ・ウェブデザインのディレクション
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
101
レスポンシブ・ウェブデザインのディレクション
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
グリッドレイアウト
均等なカラムと隙間から成り立っているCSSのレイアウト
（CSSフレームワーク）
を使うと、レスポンシブ・ウェブデザインがしやすい。
例： Twitter Bootstrap
http://twitter.github.com/bootstrap/scaffolding.html
102
レスポンシブ・ウェブデザインのディレクション
WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法
例： Twitter Bootstrap
http://twitter.github.com/bootstrap/scaffolding.html
103
http://www.zusaar.com/event/348004
詳しくは、おそらく、
WordBench神戸[番外編]で！
レスポンシブデザインやるなら 座談会
2012年8月26日（日）
13:30 -16:30
こうべまちづくり会館 （神戸本町）2F ホール 神戸市中央区元町通４丁目２番１４号
WordBench大阪 夏のスマホサイト祭り
WordPress 情報の調べ方
104
WordPressのコミュニティに、ぜひご参加を！
WordPressのイベントや勉強会に参加してみませんか？
http://ja.wordpress.org/
WordPress で繋がろう！
WordBench大阪 夏のスマホサイト祭り
WordPress 情報の調べ方
105
2012年9月15日（土）
10:00-17:00
大田区産業プラザ
東京都大田区南蒲田1-20-20
http://2012.tokyo.wordcamp.org/