PowerPoint プレゼンテーション

Size: px

Start display at page:

Download "PowerPoint プレゼンテーション"

れれごちょう
7 years ago
Views:

1 年末年始で1つWordPressで Webサイトを作ってみようイベント株式会社コミュニティコム星野邦敏埼玉県さいたま市大宮区宮町 1-5 銀座ビル7 階 URL: 1

2 目次 0. 自己紹介質疑応答 2

3 目次 0. 自己紹介質疑応答 3

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

5 自己紹介 WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 5

6 自己紹介 WordPress 日本語サイトのイベントカレンダーを更新する係ココ 6

7 自己紹介公式ディレクトリにプラグインを登録したり Japan Tenkiプラグイン全国 142 地域の天気を自動表示 Hello Wapuuプラグインブログ更新を応援 7

8 自己紹介 WordPressに関して書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版速習デザインWordPress 8

9 自己紹介 WordPressに関して書籍や雑誌で執筆をしたり今も執筆中です 2012 年 7 月に出版 web creators 特別号スマートフォンソーシャルメディア WordPress 9

10 自己紹介最近の関心事はコワーキングスペースを作ることですコワーキングスペース7F 埼玉県さいたま市大宮駅東口徒歩 1 分 65 坪 215 平米年 12 月 1 日 ( 土 ) 本格オープン 10

11 目次 0. 自己紹介質疑応答 11

12 参考サイト A List Apart 日本語サイト 12

13 参考サイト OpenCU 13

14 CSS3のMedia Queriesによって WordPressテーマ側でレスポンシブウェブデザインにして画面サイズに応じて表示を振り分けることができます 14

15 参考サイト水族館コミュニティ 15

16 同一 URLでユーザーエージェントで振り分けることにより PCサイトスマートフォンサイトガラケー( 携帯 )サイトの振り分けることができます 16

17 方法 (ⅰ)レスポンシブウェブデザインによる画面切り替え (ⅱ)ユーザーエージェントによる振り分けメリット年末年始でWebサイトを作る(7) (1) 各端末ごとに自動で最適な表示ユーザーも見やすい収益の機会損失が無くなる (2) 同一 URLで自動で振り分けコンテンツを複数書く手間が無いミラーサイトにならないので被リンク分散が無くSEOにも合う 17

18 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 18

19 始めに結局何が良いの? 19

20 要は同じHTMLが良いと言ってる他の方法を否定はしていない Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 20

21 Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 21

22 Googleウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう g-tablet-users-full-sizedweb.html 22

23 まとめ年末年始でWebサイトを作る(7) レスポンシブウェブデザインを推奨するGoogleの公式見解 ( 方法 1) 各種バナーの振り分けをCSS3だけでは難しいのでその部分はWordPressの条件分岐タグを使う ( 方法 2) とは言えレスポンシブウェブデザインにするのが難しいサイト構成やデザインもある ( ココ重要 ) ( 方法 2) 簡易的に対応するならプラグインを入れて完了 ( 方法 4) 23

24 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 24

25 ( 方法 1) 年末年始でWebサイトを作る(7) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブウェブデザインって? ( 引用元 : ) 25

26 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブウェブデザインって? 要は画面サイズによってレイアウトを変えること 26

27 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 WordPress3.2からの新デフォルトテーマ Twenty Eleven テーマは Media Queriesに対応したテーマですのでこのテーマをベースにカスタマイズすることもできます 27

28 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 header.php meta 情報として viewportを設定する <meta name="viewport" content="width=device-width" /> Viewportとは? 一言で言うと表示領域のことカスタマイズ自体は中級編で! 28

29 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 viewportの属性 device-width デバイスの幅 (ピクセル値 )に応じる width 可視領域の幅 (ピクセル値 ) (デフォルトは 980px ) 例 : Appleのサイトはviewport 固定 iphoneでの見え方 <meta name="viewport" content="width=1024" /> 29

30 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 style.css 横幅に応じて自動対応させている /* =Responsive Structure (max-width: 800px) { (max-width: 650px) { (max-width: 450px) { only screen and (min-device-width: 320px) and (max-device-width: 480px) { } 30

31 ( 方法 1) style.css 横幅に応じて自動対応させている /* =Responsive Structure (max-width: 800px) { (max-width: 650px) { (max-width: 450px) { only screen and (min-device-width: 320px) and (max-device-width: 480px) { } 年末年始でWebサイトを作る(7) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応ブレークポイントビューエリアの最大幅横幅 800pxより小さい場合に適用横幅 650pxより小さい場合に適用横幅 450pxより小さい場合に適用ビューエリアが320px~480pxの場合に適用 (iphone3g/3gsを意識している) 31

32 ( 方法 1) 年末年始でWebサイトを作る(7) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 Media Queriesの属 (max-width: 800px) 画面サイズの最大幅 800pxより小さい場合に {} 内に書かれているスタイルシートを適 (min-width: 800px) 画面サイズの最小幅 800pxより大きい場合に {} 内に書かれているスタイルシートを適 (max-device-width (min-device-width 800px) デバイスサイズの幅で適用 32

33 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブウェブデザイン(Media Queries)に対応した WordPressのテーマはたくさん登録されています Whiteboard Hatch PageLines 33

34 ( 方法 1) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応レスポンシブウェブデザイン(Media Queries)に対応した WordPressのテーマはたくさん登録されています Response Responsive BizVektor ( 日本人作成 ) 34

35 レスポンシブウェブデザインメディアクエリで横幅に応じてサイトを最適化 8bitodyssey.com デフォルトテーマ Twenty Eleven を子テーマでカスタマイズ 35

36 ( 方法 1) 年末年始でWebサイトを作る(7) CSS3のメディアクエリ(Media Queries)を使ってテーマで対応 2012 年 12 月リリース予定の WordPress3.5からの新デフォルトテーマ Twenty Twelve テーマもレスポンシブウェブデザインに対応したテーマとなる予定です 36

37 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 37

38 ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作るユーザーエージェント(User agent)って? ユーザーエージェント (User agent 略称 UA)とは利用者があるプロトコルに基づいてデータを利用する際に用いるソフトウェアまたはハードウェアを指す利用者エージェントとも言う (Wikipediaより) 38

39 ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作るユーザーエージェント(User agent)って? どの端末から訪れたか端末のヘッダー情報から分かるということ ( 逆にユーザーエージェントの偽装もできる ) 例 : ios5.1.1 年末年始でWebサイトを作る(7) Mozilla/5.0 (iphone; CPU iphone OS 5_1_1 like Mac OS X) AppleWebKit/ (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/ Galaxy S III SC-06D Android Mozilla/5.0 (Linux; U; Android 4.0.4; ja-jp; SC-06D Build/IMM76D) AppleWebKit/ (KHTML, like Gecko) Version/4.0 Mobile Safari/

40 スマートフォン& 携帯サイトをPCで確認の方法 <Chromeの場合 > デフォルトの機能右クリックで要素の検証から User agentを設定できます 40

41 スマートフォン& 携帯サイトをPCで確認の方法 <Firefoxの場合 > Firefoxのアドオン FireMobileSimulator を使いましょう有効後ツール > FireMobileSimulator にてスマートフォンや携帯サイトのようにユーザーエージェントを切り替えられます 41

42 ( 方法 2) 年末年始でWebサイトを作る(7) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5)wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 42

43 ( 方法 2) 年末年始でWebサイトを作る(7) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ Ktai Styleプラグイン ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズパケット量節約 ( 方法 3)Ktai Styleプラグインをカスタマイズ画像を自動縮小 ( 方法 4)ユーザーエージェントを振り分けるプラグインなど日本のガラケー ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5)wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) 独特の仕様に対応 Ktai Styleプラグインでスマホ&ガラケーの両方に対応してみます 43

44 Ktai Style プラグイン ( 手順 1) スマートフォンサイトに対応したテーマやガラケーサイトに対応したテーマを作る ( 手順 2) ktai-themesフォルダに作ったテーマを入れる ( 手順 3) 管理画面のKtai Styleの[テーマ]をクリックして各端末ごとで使うテーマを振り分ける 44

45 Ktai Styleプラグイン [いますぐインストール]をクリックして有効化します 45

46 Ktai Styleでのテーマフォルダの確認 wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php languages / plugins / themes / upgrade / uploads / index.php ktai-themes/ フォルダを追加! ( 注意 ) plugins/ktai-style の中の themesフォルダに入れるとプラグインバージョンアップ時に作ったテーマが消えてしまうので必ずこの方法で行いましょう! ktai-tokyohanami / smart-tokyohanami / ココに作ったテーマフォルダを入れる! 46

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

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

49 ( 方法 2) 年末年始でWebサイトを作る(7) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5) wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 49

50 Mobile Theme Switcherプラグイン iphone&ipod 用 ipad 用 Android 用それぞれのテーマを設定できる 50

51 WordPressのコアファイルの条件分岐を前提にプラグインを作って端末ごとに振り分けることもできます WordPressテーマとして style.cssに Theme Name: smartphone と書いてあるモノをスマートフォンの時に読み込むプラグイン if (wp_is_mobile()) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; } 51

52 ( 方法 2) 年末年始でWebサイトを作る(7) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのサイトを作る PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) ユーザーエージェントで振り分け ( 方法 1)WPtouchプラグインをそのまま使う or カスタマイズ ( 方法 2)MobilePressプラグインをそのまま使う or カスタマイズ ( 方法 3)Ktai Styleプラグインをカスタマイズ ( 方法 4)ユーザーエージェントを振り分けるプラグイン ( iphone theme switcher Mobile Theme Switcher UserAgent Theme Switcher など) ( 方法 5) wp_is_mobile 関数で条件分岐 (wp_is_mobile =iphone&android&blackberryなどのヘッダー情報でtrueになる ) Ktai Styleプラグインパケット量節約画像を自動縮小など日本のガラケー独特の仕様に対応 52

53 コアファイルを確認こうなっているというイメージだけでOK! wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php vars.php 53

54 $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 ); 54

55 WordPressのバージョン3.4からの新機能条件分岐 wp_is_mobile 関数 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; 55

56 WordPressのコアファイルの条件分岐を前提にパソコン用コンテンツとスマートフォン用コンテツを振り分けることも出来ます WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン用コンテンツ <?php else:?> パソコン用コンテンツ <?php endif;?> WordPressのバージョン3.4 以上が必須です 56

57 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 57

58 各種バナー広告など可変サイズに対応できない PCサイト用バナーとスマートフォンサイト用バナーを切り替えますレスポンシブWebデザインにしてもバナーは切れる CSSで display:noneで対応しても Google AdSenseなどはリスクも考えられる 58

59 各種バナー広告など可変サイズに対応できない PCサイト用バナーとスマートフォンサイト用バナーを切り替えます <?php if (wp_is_mobile()) :?> スマートフォン用バナーコード <?php else:?> パソコン用バナーコード <?php endif;?> カスタマイズ自体は中級編で! 59

60 もしPC 用とモバイル用で振り分けられなかったらこんな感じにしないと成果報酬に繋がらないユーザーがちゃんとクリックしてくれるか分からない機会損失そもそも見た目が2 行になるでは別 URLで PCサイトスマホサイトガラケーサイトを作る? 手間が掛かるミラーサイトのようになる危険性も被リンクが分散してしまうので SEO 的にもマイナス傾向 60

61 (コラム) 年末年始でWebサイトを作る(7) アフィリエイトリンクの成果対象 PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) PC 用アフィリエイトリンクモバイル用アフィリエイトリンクバリューコマース A8 リンクシェアアクセストレードなど多くのASPはこの仕様 PC 用とモバイル用で振り分けないと収益の成果対象にならない楽天アフィリエイトのように PC 用とモバイル用のアフィリエイトリンクを統一したASPもある 61

62 (コラム) 年末年始でWebサイトを作る(7) WordPressでのアフィリエイトリンク対応まとめ PCサイトスマートフォンサイトモバイルサイト (ガラケー携帯 ) PC 用アフィリエイトリンクモバイル用アフィリエイトリンク ( 方法 1)Media Queries 対応テーマ ( 方法 2)ユーザーエージェントで振り分け ( 方法 3)それらを組み合わせる ( 方法 4)スマートフォンに自動対応のプラグイン Ktai Styleプラグイン 62

63 (コラム) スマホ専用のバナーもあります( 例 :バリューコマース) 1[オファー検索 ]をクリック 2[スマートフォン対応 ]をクリック 3[ 検索 ]をクリック 63

64 (コラム) スマホ専用のバナーもあります( 例 :バリューコマース) 1[スマートフォン広告 ]をクリック 2[コードを取得 ]をクリック 3そのコードを</body>の直前にコピー&ペースト 64

65 (コラム) スマホ専用のバナーもあります( 例 :バリューコマース) スマートフォン専用のバナーが表示される 65

66 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグイン 66

67 ( 方法 4)スマートフォンに自動対応するプラグイン WPtouch プラグインをインストールして有効化するとスマートフォン対応が自動でされた上にデザインもスマートフォンっぽくなっています 67

68 プラグイン管理画面からも選べます! WPtouch で検索! 検索できます! WordPress.orgからも選べます! 68

69 プラグインフォルダの確認 wp-admin / wp-content / languages / wp-includes / plugins / index.php themes / license.txt upgrade / readme-ja.html uploads / readme.html index.php wp-activate.php wp-app.php wp-atom.php wptouch フォルダ akismet / wp-multibyte-patch / hello.php index.php ココにプラグインフォルダを入れる! 69

70 WPtouchは日本語にも対応しています ( 一部翻訳が微妙 ) 年末年始でWebサイトを作る(7) WPtouch Languageを Japanese に選択して Saveする 70

71 WPtouchには有料版があります基本的に Developer を選ばざるを得ないライセンスキーを各サイトごとに入力して管理する方法を取っている 1 回 199ドルを支払えばその後は無制限無期限で使える PayPalかクレジットカード決済 71

72 WPtouch 有料版は色々できます ipadに対応 72

73 WPtouch 有料版は色々できます ipad 対応 Enabled を選択 73

74 WPtouch 有料版は色々できますその他にもアイコン変更メニュー変更広告削除広告設定複数テーマ設定デザイン色変更など 74

75 で結局 WordPressではどう実装するの? 75

76 レスポンシブウェブデザイン対応のWordPressテーマを作成して各種バナーなど可変サイズに対応できない部分の振り分けは WordPressの条件分岐タグ wp_is_mobile 関数を使いましょうただレスポンシブウェブデザインにするのが難しいサイト構成やデザインもありますその場合はユーザーエージェントによってテーマ自体を切り替えて対応しましょう工数を掛けられない時はプラグインで! 76

77 (コラム)3Gなど回線が細い場合は? レスポンシブWebデザイン(Media Queries)に対応した上でページ下にスクロールしたらページ送りをしてソースコードが新たに出るようにするページを開いただけの時点は全 HMTLソースコードは出ないので軽い HTMLソースが出ないということはSEO 的にはどうだろう? 77

78 (コラム)3Gなど回線が細い場合は? WordPress + jquery での実装方法 <WordPress> wp_link_pages テンプレートタグでテーマ実装投稿本文に  で区切る <jquery> jquery.autopager プラグインをheaderまたはfooterに入れる 78

79 (コラム) ユーザーエージェントで振り分けて専用のテーマを作る場合 jquery Mobileも便利 79

80 WordPressによる実装方法 ( 方法 1) Media Queriesを使ってテーマで対応レスポンシブウェブデザイン ( 方法 2) ユーザーエージェントで振り分けて PC スマートフォンガラケーそれぞれのテーマを作る ( 方法 3) それらを組み合わせる ( 方法 4) スマートフォンに自動対応するプラグインこのスマホ用テーマを作るということ 80

81 jquery Mobileは簡単で便利ブラウザ間の違いを気にしなくて良い (IE 対応など) jquery jquery Mobile 81

82 jquery Mobileのタグはリファレンス等を参考に jquery Mobileのタグ PHP WordPressテンプレートタグ WordPress 条件分岐タグを組み合わせるのがコツ Designs jquery Mobile 82

83 jquery Mobileを使う準備ダウンロード 83

84 jquery Mobileを使う準備ダウンロード 84

85 jquery Mobileを使う準備テーマフォルダの中に jqueryとjquery Mobileを入れるココでは jsフォルダを作りその中に入れました 85

86 jquery Mobileを使う準備 jsフォルダの中身 jqueryと jquery Mobileのサイトからダウンロードしたファイル 86

87 jquery Mobileを使う準備 metaタグの中に jquery Mobileを読み出すタグを書く通常のWordPressテーマにおいて読み込むテンプレートタグ <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory');?>/js/jquery.mobile- 1.0b3.min.css" /> <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery min.js"></script> <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.mobile- 1.0b3.min.js"></script> 多くのテーマフォルダでは header.phpファイル 87

88 jquery Mobileを使う準備 metaタグの中に jquery Mobileを読み出すタグを書く Ktai Styleで読み込む場合のタグこれで ktai-themesフォルダを読み込んでくれる <link rel="stylesheet" href="<?php ks_theme_url();?>js/jquery.mobile-1.0b3.min.css" /> <script src="<?php ks_theme_url();?>js/jquery min.js"></script> <script src="<?php ks_theme_url();?>js/jquery.mobile-1.0b3.min.js"></script> 多くのテーマフォルダでは header.phpファイル 88

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

90 (1)テーマの色を確定 <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

91 (2)アイコンもタグだけで実現 <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ファイルを用意 91

92 (3)リストビューもタグだけで実現 HTMLでは <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> トップページは home.phpファイルを用意リストもタグ指定で簡単 WordPressでカテゴリごとにリスト化も簡単 92

93 (3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' HTMLから WordPressテーマ化 ));?> <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> 93

94 (3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' ));?> カテゴリーID 1 の記事を配列に入れる 94

95 (3)リストビューカテゴリーID 1 のカテゴリー名を取得 <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 1 の記事をループ処理 ( 繰り返し処理 ) 記事のタイトルを取得記事のリンクURLを取得 95

96 (4) 折り畳み <div data-role="collapsible" data-collapsed="true"> ~~~ WEBAPIを利用して Yahoo! 知恵袋の関連情報を自動取得 & 表示 ~~~ </div> 各記事は single.phpファイルを用意コンテンツの折り畳みも簡単 WordPressと組み合わせれば表示するコンテンツの量も変えられる 96

97 (5)フッターナビゲーション動的にならないのなら直接 URLを入れても良い <div data-role="footer" data-position="fixed" data-theme="c"> <div data-role="navbar"> <ul> <li><a href= <li><a href= <li><a href= 問い合わせ</a></li> </ul> </div> </div> 記事下の共通部分は footer.phpファイルを用意 97

98 (コラム) グリッドレイアウト均等なカラムと隙間から成り立っているCSSのレイアウト (CSSフレームワーク) を使うとレスポンシブウェブデザインがしやすい例 :Twitter Bootstrap 98

99 (コラム) 例 :Twitter Bootstrap 99

100 最後に WordPressで繋がろう! WordPressのコミュニティにぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? 100

101 最後に今後のお問い合わせなど何かありましたら Mail: URL: などにご連絡くださいありがとうございました! 株式会社コミュニティコム星野邦敏 101

目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2

目次 0. 自己紹介 1.スマートフォン対応 2. 質疑応答 2 Google ウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法の記事を受けて WordPressでのテーマカスタマイズ方法株式会社コミュニティコム星野邦敏 116-0013 東京都荒川区西日暮里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/