目 次 Wordpressで 作 るスマートフォンサイト コーディング 編 2

1 株式会社コミュニティコム 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 URL： http://www.communitycom.jp/ E-MAIL： [email protected] 星野 邦敏

2

WordBench大阪 夏のスマホサイト祭り

目次

Wordpressで作るスマートフォンサイト

3

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次

4

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次

5 株式会社コミュニティコムという会社で、 自社運営サイトやアプリ、他企業様向けサイトも作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。 星野 邦敏_{(ほしの くにとし)} Twitter ： @khoshino

Facebook : 星野邦敏（Kunitoshi Hoshino）

WordBench大阪 夏のスマホサイト祭り

6 WordPressのイベントである 「_{WordCamp」や「WordBench」に} スタッフやスピーカーとして参加。 WordBench大阪 夏のスマホサイト祭り

自己紹介

7

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ

WordBench大阪 夏のスマホサイト祭り

8 公式ディレクトリにプラグインを登録したり。 Japan Tenkiプラグイン →全国142地域の天気を自動表示 Hello Wapuuプラグイン →ブログ更新を応援 WordBench大阪 夏のスマホサイト祭り

自己紹介

9 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年1月に出版 web creators特別号 Webサイト制作 最新トレンドの傾向と対策 2012年3月に出版 速習デザインWordPress 2012年2月に出版 Web Designing 2012年3月号 WordBench大阪 夏のスマホサイト祭り

自己紹介

10 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年7月に出版 web creators特別号 スマートフォン・ソーシャル メディア・WordPress

今も執筆中です。

自己紹介

11

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次

12

参考サイト

http://all-web.org/ala/

WordBench大阪 夏のスマホサイト祭り

13

参考サイト

http://www.opencu.com/

WordBench大阪 夏のスマホサイト祭り

14 CSS3のMedia Queriesによって、WordPressテーマ側で、 レスポンシブ・ウェブデザインにして、画面サイズに応じて、 表示を振り分けることができます。 WordBench大阪 夏のスマホサイト祭り スマートフォン対応サイトとその方法

15

参考サイト

http://www.japan-aquarium.com/

WordBench大阪 夏のスマホサイト祭り

16 同一URLで、ユーザーエージェントで振り分けることにより、 PCサイト・スマートフォンサイト・ガラケー（携帯）サイトの 振り分けることができます。 WordBench大阪 夏のスマホサイト祭り スマートフォン対応サイトとその方法

17 方法 （ⅰ）レスポンシブ・ウェブデザインによる画面切り替え （ⅱ）ユーザーエージェントによる振り分け メリット （１）各端末ごとに自動で最適な表示 → ユーザーも見やすい。収益の機会損失が無くなる。 （２）同一URLで自動で振り分け → コンテンツを複数書く手間が無い。 ミラーサイトにならないので被リンク分散が無く_{SEOにも合う。} WordBench大阪 夏のスマホサイト祭り スマートフォン対応サイトとその方法

18

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次

19 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り

Googleの見解

20

始めに、結局、

何が良いの？

WordBench大阪 夏のスマホサイト祭り

21 Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化された ウェブサイトの構築方法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html →要は、同じHTMLが良いと言ってる。他の方法を否定はしていない。 WordBench大阪 夏のスマホサイト祭り

Googleの見解

22 Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化された ウェブサイトの構築方法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html WordBench大阪 夏のスマホサイト祭り

Googleの見解

23

まとめ

Googleの見解

24

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次

25 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

26 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

27

レスポンシブ・ウェブデザインって？

（方法１）

28

レスポンシブ・ウェブデザインって？

（方法１）

29 WordPress3.2からの 新デフォルトテーマ 「Twenty Eleven」テーマは、 Media Queriesに対応した テーマですので、 このテーマをベースに カスタマイズすることもできます。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

30

header.php

meta情報として、viewportを設定する。

<meta name="viewport" content="width=device-width" />

CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

31 viewportの属性 device-width → デバイスの幅（ピクセル値）に応じる。 width → 可視領域の幅（ピクセル値）。 （デフォルトは、980px。） 例： Appleのサイトはviewport固定。iPhoneでの見え方 → <meta name="viewport" content="width=1024" />

CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

32 style.css →横幅に応じて自動対応させている。 /* =Responsive Structure --- */ @media (max-width: 800px) { ・・・・・ } @media (max-width: 650px) { ・・・・・ } @media (max-width: 450px) { ・・・・・ }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ・・・・・ } CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

33 style.css →横幅に応じて自動対応させている。 /* =Responsive Structure --- */ @media (max-width: 800px) { ・・・・・ } @media (max-width: 650px) { ・・・・・ } @media (max-width: 450px) { ・・・・・ }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ・・・・・ } ビューエリアの最大幅 横幅800pxより小さい場合に適用 横幅650pxより小さい場合に適用 横幅450pxより小さい場合に適用 ビューエリアが320px～480pxの場合に適用 （iPhone3G/3GSを意識している）

「ブレークポイント」

（方法１）

34 Media Queriesの属性 @media (max-width: 800px) →画面サイズの最大幅。 800pxより小さい場合に、「{}」内に書かれているスタイルシートを適用。 @media (min-width: 800px) →画面サイズの最小幅。 800pxより大きい場合に、「{}」内に書かれているスタイルシートを適用。 @media (max-device-width 800px) @media (min-device-width 800px) →デバイスサイズの幅で適用。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

35 レスポンシブ・ウェブデザイン（Media Queries）に対応した WordPressのテーマは、たくさん登録されています。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

Whiteboard Hatch PageLines

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

36 レスポンシブ・ウェブデザイン（Media Queries）に対応した WordPressのテーマは、たくさん登録されています。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

Response Responsive BizVektor

（日本人作成）

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

37 レスポンシブ・ウェブ デザイン メディアクエリで、 横幅に応じて サイトを最適化。 デフォルトテーマ 「_{Twenty Eleven」を} 「子テーマ」で カスタマイズ。 8bitodyssey.com http://8bitodyssey.com/ WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

38 2012年12月リリース予定の、WordPress3.5からの 新デフォルトテーマ「Twenty Twelve」テーマも、 レスポンシブ・ウェブデザインに対応したテーマとなる予定です。 CSS3のメディアクエリ（Media Queries）を 使ってテーマで対応

（方法１）

39 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

40

（方法２）

ユーザーエージェント（

User agent）って？

41

（方法２）

ユーザーエージェント（

User agent）って？

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Galaxy S III SC-06D Android 4.0.4

Mozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

42

スマートフォン＆携帯サイトを

_{PCで確認の方法}

43

スマートフォン＆携帯サイトを

_{PCで確認の方法}

44 PCサイト スマートフォンサイト モバイルサイト （ガラケー携帯） Ktai Styleプラグイン ・パケット量節約 ・画像を自動縮小 など、日本のガラケー 独特の仕様に対応

（方法２）

（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）

（方法５）wp_is_mobile関数で条件分岐 （wp_is_mobile ＝iPhone＆Android＆BlackBerryなどのヘッダー情報でtrueになる。） ユーザーエージェントで振り分けて、PC・スマートフォン・ ガラケー、それぞれのサイトを作る WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

45 ユーザーエージェントで振り分け （方法１）WPtouchプラグインをそのまま使う or カスタマイズ （方法２）MobilePressプラグインをそのまま使う or カスタマイズ （方法３）Ktai Styleプラグインをカスタマイズ （方法４）ユーザーエージェントを振り分けるプラグイン

（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）

（方法５）wp_is_mobile関数で条件分岐 （wp_is_mobile ＝iPhone＆Android＆BlackBerryなどのヘッダー情報でtrueになる。） PCサイト スマートフォンサイト モバイルサイト （ガラケー携帯） Ktai Styleプラグイン ・パケット量節約 ・画像を自動縮小 など、日本のガラケー 独特の仕様に対応

（方法２）

46 （手順１） スマートフォンサイトに対応したテーマや、 ガラケーサイトに対応したテーマを作る。 （手順２） ktai-themesフォルダに、作ったテーマを入れる。 （手順３） 管理画面の_{Ktai Styleの［テーマ］をクリックして、} 各端末ごとで使うテーマを振り分ける。

「

_{Ktai Style」プラグイン}

47 ［いますぐインストール］を クリックして、有効化します。

Ktai Styleプラグイン

48

Ktai Styleでのテーマフォルダの確認

49 「Ktai Style」プラグインを有効化すると 管理画面のメニューに左のような項目が 追加されるので、 スマートフォンや携帯表示の設定ができます。 ［テーマ］をクリックして、各端末で使う テーマを、振り分けます。

Ktai Styleプラグイン

50 「_{Ktai Style」プラグインを} インストールすれば、 各端末のユーザーエージェント に応じて、同一URLで、 サイトを振り分けることが できます。

Ktai Styleプラグイン

51 PCサイト スマートフォンサイト モバイルサイト （ガラケー携帯） Ktai Styleプラグイン ・パケット量節約 ・画像を自動縮小 など、日本のガラケー 独特の仕様に対応

（方法２）

（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）

（方法５） wp_is_mobile関数で条件分岐 （wp_is_mobile ＝iPhone＆Android＆BlackBerryなどのヘッダー情報でtrueになる。） ユーザーエージェントで振り分けて、PC・スマートフォン・ ガラケー、それぞれのサイトを作る WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

52 iPhone＆iPod用、 iPad用、 Android用、 それぞれのテーマを 設定できる。

Mobile Theme Switcherプラグイン

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

53

WordPressのコアファイルの条件分岐を前提に、

プラグインを作って、端末ごとに振り分けることもできます。

WordPressテーマとして、

style.cssに「Theme Name: smartphone」と書いてあるモノを スマートフォンの時に読み込むプラグイン。 if (wp_is_mobile()) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; } WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

54 PCサイト スマートフォンサイト モバイルサイト （ガラケー携帯） Ktai Styleプラグイン ・パケット量節約 ・画像を自動縮小 など、日本のガラケー 独特の仕様に対応

（方法２）

（「iPhone theme switcher」「Mobile Theme Switcher」「UserAgent Theme Switcher」など）

（方法５） wp_is_mobile関数で条件分岐 （wp_is_mobile ＝iPhone＆Android＆BlackBerryなどのヘッダー情報でtrueになる。） ユーザーエージェントで振り分けて、PC・スマートフォン・ ガラケー、それぞれのサイトを作る WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

55

コアファイルを確認

56

$is_lynx = $is_gecko = $is_winIE = $is_macIE = $is_opera = $is_NS4 = $is_safari = $is_chrome = $is_iphone = false; if ( isset($_SERVER['HTTP_USER_AGENT']) ) {

if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Lynx') !== false ) { $is_lynx = true;

} elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'chrome') !== false ) {

if ( stripos( $_SERVER['HTTP_USER_AGENT'], 'chromeframe' ) !== false ) {

if ( $is_chrome = apply_filters( 'use_google_chrome_frame', is_admin() ) ) header( 'X-UA-Compatible: chrome=1' );

$is_winIE = ! $is_chrome; } else {

$is_chrome = true; }

} elseif ( stripos($_SERVER['HTTP_USER_AGENT'], 'safari') !== false ) { $is_safari = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') !== false ) { $is_gecko = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Win') !== false ) { $is_winIE = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mac') !== false ) { $is_macIE = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false ) { $is_opera = true;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Nav') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'Mozilla/4.') !== false ) { $is_NS4 = true;

} }

if ( $is_safari && stripos($_SERVER['HTTP_USER_AGENT'], 'mobile') !== false ) $is_iphone = true;

$is_IE = ( $is_macIE || $is_winIE );

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

57 function wp_is_mobile() { static $is_mobile; if ( isset($is_mobile) ) return $is_mobile; if ( empty($_SERVER['HTTP_USER_AGENT']) ) { $is_mobile = false;

} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.) || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false

|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {

$is_mobile = true; } else { $is_mobile = false; } return $is_mobile; } WordPressのバージョン3.4からの新機能。 条件分岐 _{wp_is_mobile関数} WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

58 WordPressのコアファイルの条件分岐を前提に、 パソコン用コンテンツと、スマートフォン用コンテツを 振り分けることも出来ます。 WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツ <?php else: ?> パソコン用コンテンツ <?php endif; ?> ※WordPressのバージョン3.4以上が必須です。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

59 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

60 各種バナー広告など、可変サイズに対応できない。 PCサイト用バナーと、スマートフォンサイト用バナーを 切り替えます。 レスポンシブ_{Webデザイン} にしても、バナーは切れる。 CSSで、display:noneで 対応しても、 Google AdSenseなどは リスクも考えられる。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

61 <?php if (wp_is_mobile()) :?> スマートフォン用バナーコード <?php else: ?> パソコン用バナーコード <?php endif; ?> 各種バナー広告など、可変サイズに対応できない。 PCサイト用バナーと、スマートフォンサイト用バナーを 切り替えます。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

62 こんな感じにしないと 成果報酬に繋がらない。 →ユーザーがちゃんとクリックしてくれる か分からない。機会損失。 →そもそも見た目が２行になる。 もし_{PC用とモバイル用で振り分けられなかったら・・・} では、別_{URLで、PCサイト・スマホサイト・ガラケーサイトを作る？} →手間が掛かる。ミラーサイトのようになる危険性も。 被リンクが分散してしまうので、SEO的にもマイナス傾向。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

63 （コラム）

アフィリエイトリンクの成果対象

64 （コラム）

WordPressでのアフィリエイトリンク対応まとめ

65 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

66

（方法４）スマートフォンに自動対応するプラグイン

67

プラグイン、管理画面からも選べます！

「

WPtouch」

で検索！

68

プラグインフォルダの確認

「

_{wptouch」フォルダ}

69 WPtouch Languageを 「_{Japanese」に} 選択して、 Saveする。

WPtouchは日本語にも対応しています。

70

WPtouchには有料版があります。

71

WPtouch有料版は、色々できます。

iPadに対応。

WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

72

WPtouch有料版は、色々できます。

「

_{Enabled」を選択。}

iPad対応

73

WPtouch有料版は、色々できます。

74

で、結局、

WordPressでは

どう実装するの？

75 レスポンシブ・ウェブデザイン対応の_{WordPressテーマを} 作成して、各種バナーなど可変サイズに対応できない 部分の振り分けは、_{WordPressの条件分岐タグ} 「wp_is_mobile」関数を使いましょう。 ただ、レスポンシブ・ウェブデザインにするのが難しい サイト構成やデザインもあります。 その場合は、ユーザーエージェントによって、 テーマ自体を切り替えて、対応しましょう。 工数を掛けられない時は、プラグインで！ WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

76

（コラム）

3Gなど回線が細い場合は？

77

（コラム）

3Gなど回線が細い場合は？

WordPress ＋ jQuery での実装方法

78

（コラム）

ユーザーエージェントで

振り分けて、

専用のテーマを作る場合、

jQuery Mobileも便利。

79 WordPressによる実装方法 （方法１） Media Queriesを使ってテーマで対応。 レスポンシブ・ウェブデザイン。 （方法２） ユーザーエージェントで振り分けて、PC・スマート フォン・ガラケー、それぞれのテーマを作る。 （方法３） それらを組み合わせる。 （方法４） スマートフォンに自動対応するプラグイン。 このスマホ用テーマを 作るということ。 WordBench大阪 夏のスマホサイト祭り WordPressにおける具体的な実装方法

80 jQuery Mobile http://jquerymobile.com/ jQuery http://jquery.com/ jQuery

Mobileは、簡単で便利。

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を使う準備

85 jsフォルダの中身 jQueryと jQuery Mobileの サイトから ダウンロードした ファイル。

jQuery Mobileを使う準備

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を使う準備

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を使う準備

88 WordPressのコアファイルには、jQueryが同梱されているので、 以下のWordPressのテンプレートタグで、読み込むこともできます。 <?php wp_enqueue_script('jquery'); ?>

jQuery Mobileを使う準備

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>

（１）テーマの色を確定

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のテンプレートタグ）

（２）アイコンもタグだけで実現。

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では・・・

（３）リストビューもタグだけで実現。

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テーマ化

（３）リストビュー

93

<?php

$my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' )); ?> カテゴリー_ID「１」 の記事を 配列に入れる。

（３）リストビュー

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「１」の記事を ループ処理（繰り返し処理）

（３）リストビュー

95

<div data-role="collapsible" data-collapsed="true">

～～～ WEBAPIを利用して、 Yahoo!知恵袋の関連情報を自動取得＆表示 ～～～ </div> 各記事は、 single.phpファイルを用意

（４）折り畳み

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>

（５）フッターナビゲーション

97

（コラム）

レスポンシブ・ウェブデザイン

のディレクションについて。

98

レスポンシブ・ウェブデザインのディレクション

前提：

「モバイルファースト」

モバイルユーザーに対応したコンテンツ

の出し方から考えていく。

99

レスポンシブ・ウェブデザインのディレクション

紙から考えるイメージでは無い。

レスポンシブ・ウェブデザインが普及したら、

Webブラウザベースでデザインしていくことも？

通常の制作の流れ

レスポンシブ・ウェブデザインのディレクション

101

レスポンシブ・ウェブデザインのディレクション

グリッドレイアウト

例：

Twitter Bootstrap

102

レスポンシブ・ウェブデザインのディレクション

例：

Twitter Bootstrap

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で繋がろう！

WordPress情報の調べ方

105 2012年9月15日（土） 10:00-17:00 大田区産業プラザ 東京都大田区南蒲田_1-20-20 http://2012.tokyo.wordcamp.org/

WordCamp Tokyo 2012

WordPress情報の調べ方

106

今後のお問い合わせなど

最後に

107

１．自己紹介

２．スマートフォン対応サイトとその方法

３．

_{Googleの見解}

４．

_{WordPressにおける具体的な実装方法}

５．質疑応答

目次