年 末 年 始 で1つWordPressで Webサイトを 作 ってみようイベント 株 式 会 社 コミュニティコム 星 野 邦 敏 330-0802 埼 玉 県 さいたま 市 大 宮 区 宮 町 1-5 銀 座 ビル7 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 2
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 3
自 己 紹 介 星 野 邦 敏 (ほしの くにとし) Twitter : @khoshino Facebook : 星 野 邦 敏 (Kunitoshi Hoshino) 株 式 会 社 コミュニティコムという 会 社 で 自 社 運 営 サイトやアプリ 他 企 業 様 向 けサイトも 作 っています オープンソースの 活 動 をしたり IT 系 の 勉 強 会 を 主 催 したり 地 域 の 活 動 をしたり WordPressをCMSとしてWEBサイトを 作 ることが 増 えています 4
自 己 紹 介 WordPressのイベントである WordCamp や WordBench に スタッフやスピーカーとして 参 加 5
自 己 紹 介 WordPress 日 本 語 サイトの イベントカレンダー を 更 新 する 係 ココ 6
自 己 紹 介 公 式 ディレクトリにプラグインを 登 録 したり Japan Tenkiプラグイン 全 国 142 地 域 の 天 気 を 自 動 表 示 Hello Wapuuプラグイン ブログ 更 新 を 応 援 7
自 己 紹 介 WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 2012 年 1 月 に 出 版 web creators 特 別 号 Webサイト 制 作 最 新 トレンドの 傾 向 と 対 策 2012 年 2 月 に 出 版 Web Designing 2012 年 3 月 号 2012 年 3 月 に 出 版 速 習 デザインWordPress 8
自 己 紹 介 WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 今 も 執 筆 中 です 2012 年 7 月 に 出 版 web creators 特 別 号 スマートフォン ソーシャル メディア WordPress 9
自 己 紹 介 最 近 の 関 心 事 は コワーキングスペースを 作 ることです コワーキングスペース7F 埼 玉 県 さいたま 市 大 宮 駅 東 口 徒 歩 1 分 65 坪 215 平 米 http://office7f.com/ 2012 年 12 月 1 日 ( 土 ) 本 格 オープン 10
目 次 0. 自 己 紹 介 1. 2. 質 疑 応 答 11
参 考 サイト A List Apart 日 本 語 サイト http://all-web.org/ala/ 12
参 考 サイト OpenCU http://www.opencu.com/ 13
CSS3のMedia Queriesによって WordPressテーマ 側 で レスポンシブ ウェブデザインにして 画 面 サイズに 応 じて 表 示 を 振 り 分 けることができます 14
参 考 サイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 15
同 一 URLで ユーザーエージェントで 振 り 分 けることにより PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けることができます 16
方 法 (ⅰ)レスポンシブ ウェブデザインによる 画 面 切 り 替 え (ⅱ)ユーザーエージェントによる 振 り 分 け メリット 年 末 年 始 でWebサイトを 作 る(7) (1) 各 端 末 ごとに 自 動 で 最 適 な 表 示 ユーザーも 見 やすい 収 益 の 機 会 損 失 が 無 くなる (2) 同 一 URLで 自 動 で 振 り 分 け コンテンツを 複 数 書 く 手 間 が 無 い ミラーサイトにならないので 被 リンク 分 散 が 無 くSEOにも 合 う 17
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 18
始 めに 結 局 何 が 良 いの? 19
要 は 同 じHTMLが 良 いと 言 ってる 他 の 方 法 を 否 定 はしていない Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 20
Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 21
Googleウェブマスター 向 け 公 式 ブログ: タブレット 端 末 ユーザーには フルサイズのウェブを 表 示 しましょう http://googlewebmastercentralja.blogspot.jp/2012/11/givin g-tablet-users-full-sizedweb.html 22
まとめ 年 末 年 始 でWebサイトを 作 る(7) レスポンシブ ウェブデザインを 推 奨 するGoogleの 公 式 見 解 ( 方 法 1) 各 種 バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う ( 方 法 2) とは 言 え レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもある ( ココ 重 要 ) ( 方 法 2) 簡 易 的 に 対 応 するなら プラグインを 入 れて 完 了 ( 方 法 4) 23
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 24
( 方 法 1) 年 末 年 始 でWebサイトを 作 る(7) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? ( 引 用 元 : http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html ) 25
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインって? 要 は 画 面 サイズによってレイアウトを 変 えること 26
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 WordPress3.2からの 新 デフォルトテーマ Twenty Eleven テーマは Media Queriesに 対 応 した テーマですので このテーマをベースに カスタマイズすることもできます 27
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 header.php meta 情 報 として viewportを 設 定 する <meta name="viewport" content="width=device-width" /> Viewportとは? 一 言 で 言 うと 表 示 領 域 のこと カスタマイズ 自 体 は 中 級 編 で! 28
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 viewportの 属 性 device-width デバイスの 幅 (ピクセル 値 )に 応 じる width 可 視 領 域 の 幅 (ピクセル 値 ) (デフォルトは 980px ) 例 : Appleのサイトはviewport 固 定 iphoneでの 見 え 方 <meta name="viewport" content="width=1024" /> 29
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 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) { } 30
( 方 法 1) 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) { } 年 末 年 始 でWebサイトを 作 る(7) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 ブレークポイント ビューエリアの 最 大 幅 横 幅 800pxより 小 さい 場 合 に 適 用 横 幅 650pxより 小 さい 場 合 に 適 用 横 幅 450pxより 小 さい 場 合 に 適 用 ビューエリアが320px~480pxの 場 合 に 適 用 (iphone3g/3gsを 意 識 している) 31
( 方 法 1) 年 末 年 始 でWebサイトを 作 る(7) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 Media Queriesの 属 性 @media (max-width: 800px) 画 面 サイズの 最 大 幅 800pxより 小 さい 場 合 に {} 内 に 書 かれているスタイルシートを 適 用 @media (min-width: 800px) 画 面 サイズの 最 小 幅 800pxより 大 きい 場 合 に {} 内 に 書 かれているスタイルシートを 適 用 @media (max-device-width 800px) @media (min-device-width 800px) デバイスサイズの 幅 で 適 用 32
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザイン(Media Queries)に 対 応 した WordPressのテーマは たくさん 登 録 されています Whiteboard Hatch PageLines 33
( 方 法 1) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザイン(Media Queries)に 対 応 した WordPressのテーマは たくさん 登 録 されています Response Responsive BizVektor ( 日 本 人 作 成 ) 34
レスポンシブ ウェブ デザイン メディアクエリで 横 幅 に 応 じて サイトを 最 適 化 8bitodyssey.com http://8bitodyssey.com/ デフォルトテーマ Twenty Eleven を 子 テーマ で カスタマイズ 35
( 方 法 1) 年 末 年 始 でWebサイトを 作 る(7) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 2012 年 12 月 リリース 予 定 の WordPress3.5からの 新 デフォルトテーマ Twenty Twelve テーマも レスポンシブ ウェブデザインに 対 応 したテーマとなる 予 定 です http://core.svn.wordpress.org/trunk/wp-content/themes/twentytwelve/ 36
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 37
( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? ユーザーエージェント (User agent 略 称 UA)とは 利 用 者 があるプロトコルに 基 づいてデータを 利 用 する 際 に 用 いるソフトウェアまたはハードウェアを 指 す 利 用 者 エージェント とも 言 う (Wikipediaより) 38
( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る ユーザーエージェント(User agent)って? どの 端 末 から 訪 れたか 端 末 のヘッダー 情 報 から 分 かるということ ( 逆 に ユーザーエージェントの 偽 装 もできる ) 例 : ios5.1.1 年 末 年 始 でWebサイトを 作 る(7) 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 39
スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Chromeの 場 合 > デフォルトの 機 能 右 クリックで 要 素 の 検 証 から User agentを 設 定 できます 40
スマートフォン& 携 帯 サイトをPCで 確 認 の 方 法 <Firefoxの 場 合 > Firefoxのアドオン FireMobileSimulator を 使 いましょう 有 効 後 ツール > FireMobileSimulator にて スマートフォンや 携 帯 サイトのように ユーザーエージェントを 切 り 替 えられます 41
( 方 法 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
( 方 法 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
Ktai Style プラグイン ( 手 順 1) スマートフォンサイトに 対 応 したテーマや ガラケーサイトに 対 応 したテーマを 作 る ( 手 順 2) ktai-themesフォルダに 作 ったテーマを 入 れる ( 手 順 3) 管 理 画 面 のKtai Styleの[テーマ]をクリックして 各 端 末 ごとで 使 うテーマを 振 り 分 ける 44
Ktai Styleプラグイン [いますぐインストール]を クリックして 有 効 化 します 45
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
Ktai Styleプラグイン Ktai Style プラグインを 有 効 化 すると 管 理 画 面 のメニューに 左 のような 項 目 が 追 加 されるので スマートフォンや 携 帯 表 示 の 設 定 ができます [テーマ]をクリックして 各 端 末 で 使 う テーマを 振 り 分 けます 47
Ktai Styleプラグイン Ktai Style プラグインを インストールすれば 各 端 末 のユーザーエージェント に 応 じて 同 一 URLで サイトを 振 り 分 けることが できます 48
( 方 法 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
Mobile Theme Switcherプラグイン iphone&ipod 用 ipad 用 Android 用 それぞれのテーマを 設 定 できる 50
WordPressのコアファイルの 条 件 分 岐 を 前 提 に プラグインを 作 って 端 末 ごとに 振 り 分 けることもできます WordPressテーマとして style.cssに Theme Name: smartphone と 書 いてあるモノを スマートフォンの 時 に 読 み 込 むプラグイン if (wp_is_mobile()) { add_action('stylesheet','change_stylesheet', 20); } function change_stylesheet($stylesheet) { return 'smartphone'; } 51
( 方 法 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
コアファイルを 確 認 こうなっているというイメージだけで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
$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
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
WordPressのコアファイルの 条 件 分 岐 を 前 提 に パソコン 用 コンテンツと スマートフォン 用 コンテツを 振 り 分 けることも 出 来 ます WordPressテーマに <?php if (wp_is_mobile()) :?> スマートフォン 用 コンテンツ <?php else:?> パソコン 用 コンテンツ <?php endif;?> WordPressのバージョン3.4 以 上 が 必 須 です 56
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 57
各 種 バナー 広 告 など 可 変 サイズに 対 応 できない PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えます レスポンシブWebデザイン にしても バナーは 切 れる CSSで display:noneで 対 応 しても Google AdSenseなどは リスクも 考 えられる 58
各 種 バナー 広 告 など 可 変 サイズに 対 応 できない PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えます <?php if (wp_is_mobile()) :?> スマートフォン 用 バナーコード <?php else:?> パソコン 用 バナーコード <?php endif;?> カスタマイズ 自 体 は 中 級 編 で! 59
もしPC 用 とモバイル 用 で 振 り 分 けられなかったら こんな 感 じにしないと 成 果 報 酬 に 繋 がらない ユーザーがちゃんとクリックしてくれる か 分 からない 機 会 損 失 そもそも 見 た 目 が2 行 になる では 別 URLで PCサイト スマホサイト ガラケーサイトを 作 る? 手 間 が 掛 かる ミラーサイトのようになる 危 険 性 も 被 リンクが 分 散 してしまうので SEO 的 にもマイナス 傾 向 60
(コラム) 年 末 年 始 でWebサイトを 作 る(7) アフィリエイトリンクの 成 果 対 象 PCサイト スマートフォンサイト モバイルサイト (ガラケー 携 帯 ) PC 用 アフィリエイトリンク モバイル 用 アフィリエイトリンク バリューコマース A8 リンクシェア アクセストレードなど 多 くのASPは この 仕 様 PC 用 とモバイル 用 で 振 り 分 けないと 収 益 の 成 果 対 象 にならない 楽 天 アフィリエイトのように PC 用 とモバイル 用 のアフィリエイトリンクを 統 一 したASPもある 61
(コラム) 年 末 年 始 でWebサイトを 作 る(7) WordPressでのアフィリエイトリンク 対 応 まとめ PCサイト スマートフォンサイト モバイルサイト (ガラケー 携 帯 ) PC 用 アフィリエイトリンク モバイル 用 アフィリエイトリンク ( 方 法 1)Media Queries 対 応 テーマ ( 方 法 2)ユーザーエージェントで 振 り 分 け ( 方 法 3)それらを 組 み 合 わせる ( 方 法 4)スマートフォンに 自 動 対 応 のプラグイン Ktai Styleプラグイン 62
(コラム) スマホ 専 用 のバナーもあります( 例 :バリューコマース) 1[オファー 検 索 ]をクリック 2[スマートフォン 対 応 ]をクリック 3[ 検 索 ]をクリック 63
(コラム) スマホ 専 用 のバナーもあります( 例 :バリューコマース) 1[スマートフォン 広 告 ]をクリック 2[コードを 取 得 ]をクリック 3そのコードを</body>の 直 前 にコピー&ペースト 64
(コラム) スマホ 専 用 のバナーもあります( 例 :バリューコマース) スマートフォン 専 用 の バナーが 表 示 される 65
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン 66
( 方 法 4)スマートフォンに 自 動 対 応 するプラグイン WPtouch プラグインを インストールして 有 効 化 すると スマートフォン 対 応 が 自 動 でされた 上 に デザインも スマートフォンっぽく なっています 67
プラグイン 管 理 画 面 からも 選 べます! WPtouch で 検 索! 検 索 できます! WordPress.orgからも 選 べます! http://wordpress.org/extend/plugins/ 68
プラグインフォルダの 確 認 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
WPtouchは 日 本 語 にも 対 応 しています ( 一 部 翻 訳 が 微 妙 ) 年 末 年 始 でWebサイトを 作 る(7) WPtouch Languageを Japanese に 選 択 して Saveする 70
WPtouchには 有 料 版 があります 基 本 的 に Developer を 選 ばざるを 得 ない ライセンスキーを 各 サイトごとに 入 力 して 管 理 する 方 法 を 取 っている 1 回 199ドルを 支 払 えば その 後 は 無 制 限 無 期 限 で 使 える PayPalかクレジットカード 決 済 http://www.bravenewcode.com/store/plugins/wptouch-pro/ 71
WPtouch 有 料 版 は 色 々できます ipadに 対 応 72
WPtouch 有 料 版 は 色 々できます ipad 対 応 Enabled を 選 択 73
WPtouch 有 料 版 は 色 々できます その 他 にも アイコン 変 更 メニュー 変 更 広 告 削 除 広 告 設 定 複 数 テーマ 設 定 デザイン 色 変 更 など 74
で 結 局 WordPressでは どう 実 装 するの? 75
レスポンシブ ウェブデザイン 対 応 のWordPressテーマを 作 成 して 各 種 バナーなど 可 変 サイズに 対 応 できない 部 分 の 振 り 分 けは WordPressの 条 件 分 岐 タグ wp_is_mobile 関 数 を 使 いましょう ただ レスポンシブ ウェブデザインにするのが 難 しい サイト 構 成 やデザインもあります その 場 合 は ユーザーエージェントによって テーマ 自 体 を 切 り 替 えて 対 応 しましょう 工 数 を 掛 けられない 時 は プラグインで! 76
(コラム)3Gなど 回 線 が 細 い 場 合 は? レスポンシブWebデザイン(Media Queries)に 対 応 した 上 で ページ 下 にスクロールしたら ページ 送 りをして ソースコードが 新 たに 出 るようにする ページを 開 いただけの 時 点 は 全 HMTLソースコードは 出 ないので 軽 い HTMLソースが 出 ないということはSEO 的 にはどうだろう? 77
(コラム)3Gなど 回 線 が 細 い 場 合 は? WordPress + jquery での 実 装 方 法 <WordPress> wp_link_pages テンプレートタグで テーマ 実 装 投 稿 本 文 に <!--nextpage--> で 区 切 る <jquery> jquery.autopager プラグインをheaderまたはfooterに 入 れる http://lagoscript.org/jquery/autopager 78
(コラム) ユーザーエージェントで 振 り 分 けて 専 用 のテーマを 作 る 場 合 jquery Mobileも 便 利 79
WordPressによる 実 装 方 法 ( 方 法 1) Media Queriesを 使 ってテーマで 対 応 レスポンシブ ウェブデザイン ( 方 法 2) ユーザーエージェントで 振 り 分 けて PC スマート フォン ガラケー それぞれのテーマを 作 る ( 方 法 3) それらを 組 み 合 わせる ( 方 法 4) スマートフォンに 自 動 対 応 するプラグイン このスマホ 用 テーマを 作 るということ 80
jquery Mobileは 簡 単 で 便 利 ブラウザ 間 の 違 いを 気 にしなくて 良 い (IE 対 応 など) jquery http://jquery.com/ jquery Mobile http://jquerymobile.com/ 81
jquery Mobileのタグはリファレンス 等 を 参 考 に jquery Mobileのタグ PHP WordPressテンプレートタグ WordPress 条 件 分 岐 タグ を 組 み 合 わせるのがコツ Designs jquery Mobile http://jquerymobile.com/designs/ 82
jquery Mobileを 使 う 準 備 ダウンロード 83
jquery Mobileを 使 う 準 備 ダウンロード 84
jquery Mobileを 使 う 準 備 テーマフォルダの 中 に jqueryとjquery Mobileを 入 れる ココでは jsフォルダを 作 り その 中 に 入 れました 85
jquery Mobileを 使 う 準 備 jsフォルダの 中 身 jqueryと jquery Mobileの サイトから ダウンロードした ファイル 86
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-1.6.4.min.js"></script> <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.mobile- 1.0b3.min.js"></script> 多 くのテーマフォルダでは header.phpファイル 87
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-1.6.4.min.js"></script> <script src="<?php ks_theme_url();?>js/jquery.mobile-1.0b3.min.js"></script> 多 くのテーマフォルダでは header.phpファイル 88
jquery Mobileを 使 う 準 備 WordPressのコアファイルには jqueryが 同 梱 されているので 以 下 のWordPressのテンプレートタグで 読 み 込 むこともできます <?php wp_enqueue_script('jquery');?> 89
(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
(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
(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
(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
(3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' ));?> カテゴリーID 1 の 記 事 を 配 列 に 入 れる 94
(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
(4) 折 り 畳 み <div data-role="collapsible" data-collapsed="true"> ~~~ WEBAPIを 利 用 して Yahoo! 知 恵 袋 の 関 連 情 報 を 自 動 取 得 & 表 示 ~~~ </div> 各 記 事 は single.phpファイルを 用 意 コンテンツの 折 り 畳 みも 簡 単 WordPressと 組 み 合 わせれば 表 示 するコンテンツの 量 も 変 えられる 96
(5)フッターナビゲーション 動 的 にならないのなら 直 接 URLを 入 れても 良 い <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ファイルを 用 意 97
(コラム) グリッドレイアウト 均 等 なカラムと 隙 間 から 成 り 立 っているCSSのレイアウト (CSSフレームワーク) を 使 うと レスポンシブ ウェブデザインがしやすい 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 98
(コラム) 例 :Twitter Bootstrap http://twitter.github.com/bootstrap/scaffolding.html 99
最 後 に WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 100
最 後 に 今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 101