目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 2

実 演 ゼロから45 分 間 で 作 る WordPressスマートフォン 対 応 サイト 株 式 会 社 コミュニティコム 星 野 邦 敏 116-0013 東 京 都 荒 川 区 西 日 暮 里 5-37-5 NSO2 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 2

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 3

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

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

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

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

リンクシェア フェア 2012 自己紹介 自社サイト運営から法人化 そちら側で話すことも 8

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

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 10

WordPressの 概 要 と 導 入 サンプルサイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 11

WordPressの 概 要 と 導 入 同 一 URLで PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けを 自 動 で 実 現 12

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! Twitterに ツイートする ボタン Facebookの いいね! ボタン などを 自 分 のサイトに 設 置 して ソーシャルな 流 れを 作 れる 13

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! クリック 一 つで 口 コミ 評 価 を 出 来 るようにする & 口 コミ 評 価 一 覧 リストを サイドバーに 表 示 する 14

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! アクセスの 多 い 記 事 順 に 自 動 でリスト 化 する 15

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! 各 記 事 のコメントを 一 覧 表 示 する 16

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! 条 件 検 索 機 能 17

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! スマートフォンや 携 帯 電 話 からの アクセスは スマートフォンサイト 携 帯 サイトを 自 動 的 に 振 り 分 けて 表 示 させる 18

WordPressの 概 要 と 導 入 プラグインをインストールするだけ! メールフォーム 19

WordPressの 概 要 と 導 入 WordPressに 元 々 備 わっている 機 能 WordPressの カスタムフィールド 20

WordPressの 概 要 と 導 入 WordPressに 元 々 備 わっている 機 能 新 着 記 事 をトップページに 表 示 21

WordPressの 概 要 と 導 入 WordPressに 元 々 備 わっている 機 能 他 のブログの 更 新 情 報 を RSSで 自 動 取 得 して 表 示 22

WordPressの 概 要 と 導 入 WordPressに 元 々 備 わっている 機 能 WordPressの コメント 欄 を 少 しだけカスタマイズ 23

WordPressの 概 要 と 導 入 WordPressに 元 々 備 わっている 機 能 サイトのデザインは WordPressの デフォルトテーマ Twenty Ten を 子 テーマにして 少 しだけカスタマイズ しただけ 24

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 各 地 域 の 天 気 予 報 を 自 動 で 取 得 する 25

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 各 記 事 の 水 族 館 の 位 置 を Google Maps APIと 連 携 して 自 動 で 地 図 に 一 覧 表 示 させる & 近 いスポットはピンをまとめる 26

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) そのスポットの 周 辺 の 写 真 を 自 動 で 表 示 させる 27

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 各 記 事 に 関 連 する 画 像 を 自 動 表 示 する 28

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) その 水 族 館 について Twitterの 最 新 つぶやきを 自 動 表 示 させる 29

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に カフェやレストランを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 30

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に ホテルを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 31

WordPressの 概 要 と 導 入 WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 記 事 に 関 連 する 商 品 を 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 32

WordPressの 概 要 と 導 入 WordPressとは? CMS(コンテンツ マネジメント システム) ブログだけでなく 企 業 サイトやコミュニティサイトも オープンソース(GPLライセンス) 無 料 機 能 拡 張 が 柔 軟 利 用 者 が 多 い 情 報 が 多 い プログラムはPHP データベースはMySQLで 構 成 33

WordPressの 概 要 と 導 入 GPLライセンスとは? オープンソースの 一 形 態 無 保 証 著 作 権 表 示 の 保 持 無 料 でソースコードを 入 手 できる 再 配 布 自 由 特 定 製 品 に 依 存 しない 技 術 的 な 中 立 を 保 持 個 人 やグループを 差 別 できない 再 配 布 物 にもGPLライセンスが 適 用 される 34

WordPressの 概 要 と 導 入 世 界 トップ100 万 サイト 中 WordPress 利 用 率 16.3% マクラケン 直 子 さんのブログより 引 用 http://detlog.org/2011/09/12/wordcamp-kobe-2011/ Historical trends in the usage of content management systems, March 2012 http://w3techs.com/technologies/history_overview/content_management/all 35

WordPressの 概 要 と 導 入 CMSでのWordPressのシェア 54.0% マクラケン 直 子 さんのブログより 引 用 http://detlog.org/2011/09/12/wordcamp-kobe-2011/ Historical trends in the usage of content management systems, March 2012 http://w3techs.com/technologies/history_overview/content_management/all 36

WordPressの 概 要 と 導 入 世 界 の 検 索 トレンド Google トレンド 37

WordPressの 概 要 と 導 入 日 本 の 検 索 トレンド Google トレンド 38

WordPressの 概 要 と 導 入 ブログとしても 勝 間 和 代 ブログ カイ 士 伝 BOOK OFFスタッフブログ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 39

WordPressの 概 要 と 導 入 マガジンサイトとしても 美 的.com TechCrunch Japan ロイター 通 信 ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 40

WordPressの 概 要 と 導 入 企 業 のサイトとしても クックパッド 株 式 会 社 株 式 会 社 ベクター IR 会 社 情 報 サイト さいたまスーパーアリーナ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 41

WordPressの 概 要 と 導 入 学 校 のサイトとしても 昭 和 女 子 大 学 神 戸 芸 術 工 科 大 学 長 岡 工 業 高 等 専 門 学 校 ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 42

WordPressの 概 要 と 導 入 海 外 のサイトとしても Nikon フォルクスワーゲン PEPSI (ペプシ)のブログ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 43

WordPressの 概 要 と 導 入 震 災 の 時 にはスピーディな 情 報 公 開 に 貢 献 助 けあいジャパン ( WordPress を 使 ったサイト prayforjapan.jp 小 出 裕 章 ( 京 大 助 教 ) 非 公 式 まとめ WordPress Codex 日 本 語 版 より 引 用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 44

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (1) 好 きな 独 自 ドメイントで 運 営 できる (2) 自 分 の 意 図 しない 広 告 は 入 らない (3) 文 章 や 写 真 のデータを 自 分 で 管 理 できる (4) 突 然 のサービス 停 止 の 心 配 がない (5) 自 由 にデザインや 機 能 を 追 加 できる 45

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (1) 好 きな 独 自 ドメイントで 運 営 できる 無 料 のブログでは 例 えば http://ameblo.jp/( 自 分 のアカウントID) http://blogs.yahoo.co.jp/( 自 分 のアカウントID) といった 形 になりますが WordPressをサーバーに 設 置 して 独 自 ドメインを 取 得 すれば 自 分 のURLでサイトを 運 営 することができます 46

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (2) 自 分 の 意 図 しない 広 告 は 入 らない 無 料 のブログでは その 無 料 ブログサービスのPR 広 告 が 勝 手 に 入 ってしまうことも 多 くあります そのPR 広 告 を 外 すために 有 料 版 に 切 り 替 えて お 金 が 掛 かることもあると 思 います WordPressでは レンタルサーバー 代 は 掛 かりますが その 分 自 分 の 意 図 しない 広 告 が 入 ることは 今 後 もありません 47

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (3) 文 章 や 写 真 のデータを 自 分 で 管 理 できる 無 料 のブログでは 文 章 や 写 真 などのデータは その 無 料 ブログサービスの サーバー 上 にあり データにアクセスできないことが 多 いです WordPressでは 自 分 の 管 理 しているサーバーに 全 ての データがあるので いつでもアクセスが 可 能 です 48

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (4) 突 然 のサービス 停 止 の 心 配 がありません 無 料 のブログでは サービス 停 止 で ブログが 強 制 的 に 無 くなってしまう 可 能 性 もあります 例 ) さるさる 日 記 (http://www.diary.ne.jp/) WordPress.orgは サーバーインストール 型 なので サービス 停 止 によるブログ 閉 鎖 などの 心 配 がありません 49

WordPressの 概 要 と 導 入 WordPressを 利 用 すると (5) 自 由 にデザインや 機 能 を 追 加 できます 無 料 のブログでは デザインできる 箇 所 に 制 約 がある 場 合 も あります また 欲 しい 機 能 がサービスに 備 わっていない 場 合 も あると 思 います WordPressでは 後 述 する テーマ と プラグイン により 自 由 にデザインと 機 能 を 選 択 して 設 置 することができます 慣 れている 人 は 自 分 のイメージ 通 りに 作 ることもできるので カスタマイズの 柔 軟 性 がとても 高 いです 50

WordPressの 概 要 と 導 入 WordPress.com と WordPress.org <WordPress.com> フリーのブログサービス <WordPress.org> サーバーインストール 型 サーバーを 用 意 する 必 要 なく 作 れる データベースの 管 理 権 限 FTP の アクセス 権 などが 無 く テーマや プラグインのアップロードに 制 約 独 自 ドメインNG 一 部 に 広 告 表 示 ( 有 料 オプションあり) サーバーを 用 意 する 必 要 がある 自 由 度 が 高 い 今 回 はorgの 説 明 51

WordPressの 概 要 と 導 入 WordPressが 動 く 環 境 PHP バージョン 5.2.4 以 上 MySQL バージョン 5.0.15 以 上 もし レンタルサーバーを 借 りる 時 は 一 応 仕 様 を 確 認 しましょう ほとんどのレンタルサーバーで 対 応 しています! 52

WordPressの 概 要 と 導 入 レンタルサーバー 情 報 WordPress Codex 日 本 語 版 http://wpdocs.sourceforge.jp/レンタルサーバ 情 報 のページが 便 利 です さくらのレンタルサーバ ロリポップ! CORESERVER.JP heteml XREA CPI チカッパ! ファーストサーバ ABLENET め 組 サーバ オーシャンインターネット MEDIAWARS エックスサーバー シックスコア ハッスルサーバー ギガーン livedoorレンタルサーバ FC2レンタルサーバー 使 えるねっと 美 ら 海 レンタルサーバー フューチャースピリッツ SpeeVer カゴヤ ジャパン OCN ホスティング WADAX ExpressWeb BlueHost DreamHost Exclusive Hosting Laughing Squid lunarpages Media Temple West Hosting などなど 53

WordPressの 概 要 と 導 入 4 分 で 解 説!WordPressインストール http://www.youtube.com/watch?v=dfi9cnc8ac0 54

WordPressの 概 要 と 導 入 ワンクリックインストール http://wpdocs.sourceforge.jp/wordpress_ のインストール/ワンクリックインストール 国 内 の20 近 いレンタルサーバーが WordPressワンクリックインストールに 対 応 レンタルサーバーの 管 理 画 面 から 導 入 55

WordPressの 概 要 と 導 入 ワンクリックインストール レンタルサーバーの heteml(ヘテムル) を 例 にして http://heteml.jp/ heteml(ヘテムル) の 管 理 画 面 からの ワンクリックインストールを 見 てみましょう 56

WordPressの 概 要 と 導 入 ワンクリックインストール 1 57

WordPressの 概 要 と 導 入 ワンクリックインストール 2 58

WordPressの 概 要 と 導 入 ワンクリックインストール 3 59

WordPressの 概 要 と 導 入 ワンクリックインストール 4 60

WordPressの 概 要 と 導 入 ワンクリックインストール インストール 完 了! ワンクリックインストールを 使 えば インストールに1 分 も 掛 からない!? 61

WordPressの 概 要 と 導 入 wp-config.php ワンクリックインストールの 場 合 は データベース 情 報 を 意 識 することが 少 ないので 必 要 になったら wp-config.phpファイルを 見 ましょう! 62

WordPressの 概 要 と 導 入 データベース 情 報 などの 確 認 wp-admin / wp-content / wp-includes / index.php license.txt readme-ja.html readme.html wp-activate.php wp-app.php wp-atom.php wp-blog-header.php wp-comments-post.php wp-commentsrss2.php wp-config.php (wp-config-sample.php) wp-cron.php wp-feed.php wp-links-opml.php wp-load.php wp-login.php wp-mail.php wp-pass.php wp-rdf.php wp-register.php wp-rss2.php wp-rss.php wp-settings.php wp-signup.php wp-trackback.php xmlrpc.php 63

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 記 事 を 書 くのに 使 うのは 基 本 この2 箇 所 WordPress3.0から カスタム 投 稿 タイプ ができました 64

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 投 稿 時 系 列 の 記 事 カテゴリー&タグなどで 分 類 投 稿 間 で 親 子 関 係 は 無 し 投 稿 毎 の 専 用 テンプレートの 選 択 は 不 可 例 :ブログ 記 事 新 着 ニュース 固 定 ページ 時 系 列 ではなく 順 序 でソート カテゴライズは 無 し 階 層 化 ( 親 と 子 ) 構 造 が 可 能 投 稿 毎 の 専 用 テンプレートの 選 択 が 可 能 例 : 自 己 紹 介 会 社 概 要 65

投 稿 リンクシェア フェア 2012 WordPressの 概 要 と 導 入 新 規 投 稿 をクリック 66

投 稿 リンクシェア フェア 2012 WordPressの 概 要 と 導 入 記 事 を 書 いて 公 開! 67

投 稿 リンクシェア フェア 2012 WordPressの 概 要 と 導 入 表 示 されました! 表 示 の 仕 方 は テーマの コードの 書 き 方 によって 変 えられますが デフォルトテーマでは 時 系 列 に 表 示 されます 68

投 稿 リンクシェア フェア 2012 WordPressの 概 要 と 導 入 カテゴリー や タグ を 使 うことで 投 稿 記 事 を 分 類 することができます WordPress3.0から カスタムタクソノミー (カスタム 分 類 ) ができました 69

投 稿 リンクシェア フェア 2012 WordPressの 概 要 と 導 入 本 に 例 えると カテゴリー は 章 タグ は 付 箋 というイメージ 70

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 投 稿 時 系 列 の 記 事 カテゴリー&タグなどで 分 類 投 稿 間 で 親 子 関 係 は 無 し 投 稿 毎 の 専 用 テンプレートの 選 択 は 不 可 例 :ブログ 記 事 新 着 ニュース 固 定 ページ 時 系 列 ではなく 順 序 でソート カテゴライズは 無 し 階 層 化 ( 親 と 子 ) 構 造 が 可 能 投 稿 毎 の 専 用 テンプレートの 選 択 が 可 能 例 : 自 己 紹 介 会 社 概 要 71

WordPressの 概 要 と 導 入 固 定 ページ 新 規 追 加 をクリック 72

WordPressの 概 要 と 導 入 固 定 ページ 記 事 の 書 き 方 は 投 稿 と 同 じ 73

WordPressの 概 要 と 導 入 固 定 ページ 表 示 されました! 時 系 列 を 意 識 せずに 表 示 されます 74

WordPressの 概 要 と 導 入 固 定 ページ ページは 階 層 化 して 使 う ことができます デザインテンプレートを 複 数 用 意 して 切 り 替 える ことができます 順 序 も 変 えられます 75

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 入 力 方 法 には 1ビジュアル 2HTMLの2 種 類 があります 1ビジュアルは 公 開 した 記 事 の 表 示 をイメージしながら 直 感 的 に 編 集 することができます 2HTMLは HTMLコードを 書 いて 編 集 します (HTMLが 分 かる 人 向 け) 76

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 記 事 にパスワードを 掛 けたり 下 書 き 保 存 したり 未 来 の 日 付 で 予 約 投 稿 したり できます 77

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 画 像 の 編 集 がWordPress 上 で 出 来 ます! ココをクリック 78

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 画 像 の 編 集 がWordPress 上 で 出 来 ます! 79

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ 画 像 の 回 転 画 像 の 反 転 トリミング などができます 本 格 的 な 画 像 編 集 は Photoshopなどの ソフトを 使 いましょう 80

WordPressの 概 要 と 導 入 投 稿 と 固 定 ページ アイキャッチ 画 像 WordPress3.0からの 新 機 能 81

ウィジェット リンクシェア フェア 2012 WordPressの 概 要 と 導 入 管 理 画 面 から 各 エリアを 変 更 できる 82

WordPressの 概 要 と 導 入 カスタムヘッダー 管 理 画 面 から メイン 画 像 を 変 更 できる 83

WordPressの 概 要 と 導 入 アイキャッチ 画 像 各 記 事 の サムネイル 画 像 を 指 定 できる 84

WordPressの 概 要 と 導 入 カスタムメニュー メニューを 管 理 画 面 から 変 更 できる 85

WordPressの 概 要 と 導 入 Q: 他 のブログサービスからの 移 行 他 のブログサービスへの 移 行 は できますか? A:できます WordPressに 元 々 備 わっている 機 能 である インポート 機 能 で 他 のブログサービスからWordPressへの 移 行 が できます エクスポート 機 能 で WordPressから 他 のブログサービスへの 移 行 が できます 86

WordPressの 概 要 と 導 入 Q: 他 のブログサービスからの 移 行 他 のブログサービスへの 移 行 は できますか? A:できます インポート 機 能 87

WordPressの 概 要 と 導 入 Q: 他 のブログサービスからの 移 行 他 のブログサービスへの 移 行 は できますか? A:できます エクスポート 機 能 Cafe Miraggioテーマの インポート 用 のXMLファイルを 用 意 しています 88

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 89

WordPressのテーマとプラグイン WordPressのコアは とてもシンプル 90

WordPressのテーマとプラグイン テーマ プラグイン シンプルなコアに サイトにあった テーマ でデザインして プラグイン で 機 能 追 加 する テーマにもfunctions.phpにて 機 能 追 加 も 出 来 ます 91

WordPressのテーマとプラグイン 公 式 ディレクトリ テーマ 登 録 数 1,500 以 上 92

WordPressのテーマとプラグイン 公 式 ディレクトリ プラグイン 登 録 数 20,000 以 上 93

WordPressのテーマとプラグイン 多 すぎて どのテーマやプラグインが 良 いのか 分 からない! WordPress 初 心 者 ねこび んさん 94

WordPressのテーマとプラグイン そこで WordCampスタッフが お 勧 めの テーマやプラグインを ご 紹 介! WordPress 経 験 者 わぷーさん 95

WordPressのテーマとプラグイン そもそもWordCampとは? ユーザー 開 発 者 が 集 うイベント 世 界 40 以 上 の 都 市 で 開 催 世 界 中 で180 回 以 上 の 開 催 実 績 日 本 では 年 に3~4 回 今 までに 東 京 京 都 福 岡 横 浜 名 古 屋 神 戸 http://japan.wordcamp.org/ 96

WordPressのテーマとプラグイン そもそもWordCampとは? 前 回 のWordCamp Tokyo 2011 参 加 者 約 800 人 懇 親 会 参 加 者 約 300 人 WordPressに 関 する セッションやワークショップも 多 数 (WordCamp 横 浜 スタッフの 集 合 写 真 ) スタッフもたくさん! 当 日 だけお 手 伝 いも 大 歓 迎! 97

WordPressのテーマとプラグイン WordCampに 関 わっている 人 は WordPressに 詳 しい 人 も 多 い ( 事 前 のWordCamp 打 ち 合 わせ) ( 当 日 のWordCamp 設 営 ) 98

WordPressのテーマ テーマとは? WEBデザインを 変 えるためのモノ ブログの 着 せ 替 え 見 た 目 の 調 整 だけでなく 表 示 する 内 容 を 操 ることもできます テーマは 自 分 で 作 ることも 出 来 ます 慣 れてきたら 自 分 でカスタマイズすると 自 由 度 が 高 まります 99

WordPressのテーマ テーマフォルダの 確 認 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 twentyeleven / twentyten / index.php ココに テーマフォルダを FTPで 入 れる! 100

WordPressのテーマ テーマは 管 理 画 面 からも 選 べます! 検 索 もできます! 101

WordPressのテーマ テーマは 管 理 画 面 からも 選 べます! 102

WordPressのテーマ テーマはWordPress.orgからも 選 べます! http://wordpress.org/extend/themes/ 103

WordPressのテーマ 自 分 でカスタマイズしたテーマの 場 合 http://wordpress.org/extend/themes/ 既 存 のテーマは 管 理 画 面 や 公 式 ディレクトリからインストール できますが カスタマイズした 独 自 のテーマは wp-content > themesフォルダにいれましょう 104

WordPressのプラグイン プラグインとは? 追 加 機 能 WordPressの 本 体 はシンプルなので 自 由 に 機 能 を 追 加 するイメージ プラグインは 自 分 で 作 ることも 出 来 ます 慣 れてきたら 自 分 でカスタマイズすると 自 由 度 が 高 まります 105

WordPressのプラグイン プラグインフォルダの 確 認 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 akismet / wp-multibyte-patch / hello.php index.php ココに プラグインフォルダ を 入 れる! 106

WordPressのプラグイン プラグインも 管 理 画 面 から 選 べます! 検 索 もできます! 107

WordPressのプラグイン プラグインもWordPress.orgから 選 べます! http://wordpress.org/extend/plugins/ 108

WordPressのプラグイン デフォルトのプラグインのご 紹 介 有 効 化 すると 使 えます! Akismet コメントスパム 対 策 Hello Dolly プラグインの 開 発 サンプルコード WP Multibyte Patch マルチバイト 文 字 による 不 具 合 の 修 正 と 強 化 109

WordPressのプラグイン プラグインの 具 体 例 Contact Form 7 メールフォームを 作 成 Ktai Style 日 本 の 携 帯 電 話 &スマートフォン 対 応 WPtouch スマートフォン 対 応 PS Auto Sitemap サイトマップを 自 動 作 成 Custom Field Template カスタムフィールドのテンプレート 設 定 Advertising Manager 広 告 管 理 Welcart ショッピングサイト 構 築 BuddyPress SNS 構 築 Subscribe2 メールマガジン 構 築 Admin SSL SSL 対 応 WP Super Cache キャッシュ 生 成 表 示 の 高 速 化 WP-DB-Backup データベースのバックアップ 110

WordPressのプラグイン 既 存 のプラグインだけで 作 れる 事 例 既 存 のプラグインをインストールするだけで 実 現 できるWEBサービスを 作 ってみましょう! 111

WordPressのプラグイン Twitterのような 一 言 コメントができるサイト P2 テーマ 新 規 ユーザー 登 録 を OKにすれば 不 特 定 多 数 のユーザーが 登 録 できるサイトも 作 れます 112

WordPressのプラグイン WordPress 日 本 語 翻 訳 の 連 絡 も P2テーマを 利 用! WordPress Codex 日 本 語 版 会 議 室 http://wpjadocs.wordpress.com/ 113

WordPressのプラグイン ECサイト(ショップサイト) Welcartプラグイン 具 体 的 な 事 例 やカスタマイズは 以 下 のURLを 参 照 ください http://www.welcart.com/ 114

WordPressのプラグイン オープン 型 SNS( 会 員 制 サイト) BuddyPressプラグイン 新 規 ユーザー 登 録 OKにすれば 不 特 定 多 数 のユーザーが 登 録 することのできるサイトも 作 れます 115

WordPressのプラグイン メールマガジン 登 録 & 投 稿 システム Subscribe2 Subscribe2 widget プラグイン 116

WordPressのプラグイン プラグイン Cawaii Admin 西 川 伸 一 さん @shinichin WordPressの 管 理 画 面 を 可 愛 くするプラグイン 117

WordPressのプラグイン ころぐ http://colog.jp/ WordPressの 管 理 画 面 を 変 えられる! 118

WordPressのプラグイン プラグイン WP Social カイ 士 伝 さん @kai4den Bookmarking Light 数 々のソーシャルボタンを まとめて 設 置! 119

WordPressのプラグイン プラグインをインストールするだけ! Twitterに ツイートする ボタン Facebookの いいね! ボタン Google+1ボタン などを 自 分 のサイトに 設 置 して ソーシャルな 流 れを 作 れる 120

WordPressのプラグイン プラグイン Ktai Style 池 田 百 合 子 さん @lilyfanjp WordPressを 携 帯 対 応 させるプラグイン 121

WordPressのプラグイン 同 一 URLで PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けを 自 動 で 実 現 122

WordPressのプラグイン プラグイン WPtouch 豊 田 有 さん @Mighty_Works WordPressをスマートフォン 対 応 させるプラグイン 123

WordPressのプラグイン WPtouchプラグインを 有 効 化 するだけで iphoneやandroidの 端 末 で 見 たら スマートフォンっぽい サイトに 見 える 124

WordPressのプラグイン テーマ Twenty Eleven 子 テーマ オデさん @odyssey WordPressデフォルトテーマを 子 テーマでカスタマイズ 125

WordPressのプラグイン レスポンシブ ウェブ デザイン メディアクエリで 横 幅 に 応 じて サイトを 最 適 化 8bitodyssey.com http://8bitodyssey.com/ 126

WordPressのプラグイン プラグイン Feedback Champuru をかもとさん @wokamoto Twitter はてなブックマーク Google+を コメントっぽく 表 示 させる プラグイン 127

WordPressのプラグイン コメント 欄 が 賑 わってる 感 じに! コメントしにくい 敷 居 を 下 げる 128

WordPressのプラグイン プラグイン Jetpack マクラケン 直 子 さん @naokomc WordPress.com の 標 準 機 能 である WordPress.com Stats プラグイン Twitter ウィジェット Shortcode エンベッド Sharedaddy などが 含 まれた バンドルプラグインです 129

WordPressのプラグイン WordPress.comの 機 能 をセットで 使 える 130

WordPressのプラグイン プラグイン Contact Form 7 星 野 邦 敏 さん @khoshino メールフォームが 作 れるプラグイン 131

WordPressのプラグイン メールフォーム 132

WordPressのプラグイン 星 野 邦 敏 さん @khoshino プラグイン Custom Field Template (カスタムフィールドテンプレート) カスタムフィールドをカスタマイズする プラグイン 133

WordPressのプラグイン カスタムフィールド カスタムフィールドを 使 ってみましょう! カスタムフィールドは WordPressに 元 々 備 わっている 機 能 です 134

例 : リンクシェア フェア 2012 WordPressのプラグイン カスタムフィールド カスタムフィールドを 出 力 する WordPressのテンプレートタグ <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに 入 力 したデータを 表 示 しています 水 族 館 コミュニティ http://www.japan-aquarium.com/ 135

WordPressのプラグイン カスタムフィールド テーマに4 行 の プログラムを 追 加 して 実 現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = "http://search.yahooapis.jp/imagesearchservice/v2/imagesearch?appid=<アプリ ケーションID>&query=". $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->result as $gazou_output) { echo '<img src="'. $gazou_output->url. '" alt="" />'; }?> 136

WordPressのプラグイン WordPressの 各 記 事 の 位 置 情 報 を 地 図 に 表 示 各 記 事 の 水 族 館 の 位 置 を Google Maps APIと 連 携 して 自 動 で 地 図 に 一 覧 表 示 させる & 近 いスポットはピンをまとめる 137

WordPressのプラグイン WordPressに 周 辺 の 写 真 を 自 動 で 表 示 そのスポットの 周 辺 の 写 真 を 自 動 で 表 示 させる 138

WordPressのプラグイン WordPressに 画 像 を 自 動 で 表 示 各 記 事 に 関 連 する 画 像 を 自 動 表 示 する 139

WordPressのプラグイン WordPressに Twitter 情 報 を 自 動 で 表 示 その 水 族 館 について Twitterの 最 新 つぶやきを 自 動 表 示 させる 140

WordPressのプラグイン WordPressにカフェ 情 報 を 自 動 で 表 示 そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に カフェやレストランを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 141

WordPressのプラグイン WordPressにホテル 情 報 を 自 動 で 表 示 そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に ホテルを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 142

WordPressのプラグイン WordPressに 商 品 情 報 を 一 覧 表 示 記 事 に 関 連 する 商 品 を 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 143

WordPressのプラグイン カスタムフィールドで 検 索 も 可 能 カスタムフィールドに 入 力 した 情 報 で 検 索 ができる 144

WordPressのプラグイン プラグイン WP Lightbox 2 星 野 邦 敏 さん @khoshino リンクのある 画 像 をクリックすると 画 像 が 浮 き 上 がるようなデザイン となるプラグイン 145

WordPressのプラグイン 画 像 をクリックすると 146

WordPressのプラグイン WordPressを 使 ったら サイトが 重 くなった! WordPress 初 心 者 ねこび んさん 147

WordPressのプラグイン プラグイン マクラケン 直 子 さん @naokomc WP Super Cache キャッシュを 作 ってくれて 表 示 の 高 速 化 ができる 148

WordPressのプラグイン WP Super Cache プラグインを インストールして キャッシングを 利 用 に するだけです! 149

WordPressのプラグイン 大 曲 仁 さん @jim0912 プラグイン 001 Prime Strategy Translate Accelerator 翻 訳 ファイルの 読 み 込 みを キャッシュ 化 する 150

WordPressのプラグイン プラグイン WordPress Database 三 木 徹 さん @waviaei Backup データベースのバックアップを 手 動 または 自 動 で 取 ることの できるプラグイン 151

WordPressのプラグイン MySQLを 管 理 画 面 から 保 存 できる 定 期 バックアッ プ も 自 動 で 出 来 152 る

WordPressのプラグイン プラグイン WP Total Hacks 宮 内 隆 行 さん @miya0001 お 客 様 にWordPressを 納 品 する 時 に 便 利 な プラグイン 153

WordPressのプラグイン いわゆる WordPress 色 を 消 す ことが 出 来 る 設 定 が 20 項 目 以 上 154

WordPressのプラグイン 管 理 画 面 のロゴを 変 えられる 等 WordPress の 色 を 消 すことが 出 来 る その 他 にも webmaster 権 限 追 加 フッター 文 字 情 報 の 変 更 なども 155

WordPressのプラグイン 管 理 画 面 の 一 般 設 定 を 行 う パーマリンク 設 定 非 常 に 重 要 URLをどのようにするかを 設 定 する サイト 運 営 の 始 めに 決 定 しておくべき 156

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 157

スマートフォンサイト 対 応 サンプルサイト 水 族 館 コミュニティ http://www.japan-aquarium.com/ 158

スマートフォンサイト 対 応 同 一 URLで PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けを 自 動 で 実 現 159

スマートフォンサイト 対 応 WordPressでは 無 料 で PC 用 スマホ 用 モバイル 用 に 同 じURLでユーザーエージェントで 振 り 分 けることができます (1) 各 端 末 ごとに 自 動 で 最 適 な 表 示 ユーザーも 見 やすい 収 益 の 機 会 損 失 が 無 くなる ( 例 ) 水 族 館 コミュニティ http://www.japan-aquarium.com/ (2) 同 一 URLで 自 動 で 振 り 分 け コンテンツを 複 数 書 く 手 間 が 無 い ミラーサイトにならない 被 リンク 分 散 が 無 くSEOにも 合 う 160

スマートフォンサイト 対 応 しかも PCサイト 用 バナーと 携 帯 サイト 用 バナーを 切 り 替 えるなど 表 示 させるコンテンツも 変 えられます <PC 用 のバナー> <モバイル 用 のバナー> 161

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

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

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

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

スマートフォンサイト 対 応 始 めに 結 局 何 が 良 いの? 166

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

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

スマートフォンサイト 対 応 まとめ レスポンシブWebデザインを 最 も 推 奨 するという Googleの 公 式 見 解 ( 方 法 2) 各 種 バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う ( 方 法 3) 簡 易 的 に 対 応 するなら プラグインもある ( 方 法 1) 169

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

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

スマートフォンサイト 対 応 プラグイン 管 理 画 面 からも 選 べます! WPtouch で 検 索! 検 索 できます! WordPress.orgからも 選 べます! http://wordpress.org/extend/plugins/ 172

スマートフォンサイト 対 応 プラグインフォルダの 確 認 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 ココに プラグインフォルダ を 入 れる! 173

WPtouchは 日 本 語 にも 対 応 しています ( 一 部 翻 訳 が 微 妙 ) リンクシェア フェア 2012 スマートフォンサイト 対 応 WPtouch Languageを Japanese に 選 択 して Saveする 174

スマートフォンサイト 対 応 WPtouchには 有 料 版 があります 基 本 的 に Developer を 選 ばざるを 得 ない ライセンスキーを 各 サイトごとに 入 力 して 管 理 する 方 法 を 取 っている 1 回 199ドルを 支 払 えば その 後 は 無 制 限 無 期 限 で 使 える PayPalかクレジットカード 決 済 http://www.bravenewcode.com/store/plugins/wptouch-pro/ 175

スマートフォンサイト 対 応 WPtouch 有 料 版 は 色 々できます ipadに 対 応 176

スマートフォンサイト 対 応 WPtouch 有 料 版 は 色 々できます ipad 対 応 Enabled を 選 択 177

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

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

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

スマートフォンサイト 対 応 ( 方 法 2) 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) { } 181

( 方 法 2) 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) { } リンクシェア フェア 2012 スマートフォンサイト 対 応 CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスボンシブウェブデザイン ビューエリアの 最 大 幅 横 幅 800pxより 小 さい 場 合 に 適 用 横 幅 650pxより 小 さい 場 合 に 適 用 横 幅 450pxより 小 さい 場 合 に 適 用 ビューエリアが320px~480pxの 場 合 に 適 用 (iphone3g/3gsを 意 識 している) 182

( 方 法 2) リンクシェア フェア 2012 スマートフォンサイト 対 応 jquerymobileでの CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスボンシブウェブデザインも 可 能 です // @media all and (max-device-width: 480px) if ( window.screen < 480 ) { // jquery Mobile 読 み 込 み document.write('<script' + 端 末 ごとに 出 力 するコンテンツ 量 を 変 えたい ' src="jquery.mobile.js"></' + ガラケー( 携 帯 電 話 )にも 同 時 に 対 応 をしたい 'script>'); } その 場 合 は ( 方 法 3)へ 183

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

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

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

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

スマートフォンサイト 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 188

スマートフォンサイト 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて 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になる ) 独 特 の 仕 様 に 対 応 189 Ktai Styleプラグインで スマホ&ガラケーの 両 方 に 対 応 してみます

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

スマートフォンサイト 対 応 Ktai Styleプラグイン [いますぐインストール]を クリックして 有 効 化 します 191

スマートフォンサイト 対 応 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 / ココに 作 った テーマフォルダ を 入 れる! 192

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

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

スマートフォンサイト 対 応 Q:PCと 携 帯 のリンクを 自 動 で 振 り 分 けできますか? A:できます Ktai Style 2.1 ベータ 版 http://www.yuriko.net/arc/2010/05/10/ktaistyle-210-beta1/ [pc-only]...[/pc-only] [mobile-only]...[/mobile-only] で 振 り 分 ける ( 注 意 ) この 方 法 で 行 わないと Ktai Styleの 次 期 バージョンに 対 応 しないので 注 意 しましょう 195

スマートフォンサイト 対 応 Q:PCと 携 帯 のリンクを 自 動 で 振 り 分 けできますか? A:できます PCサイト 用 バナーと 携 帯 サイト 用 バナーで 同 じURLで 表 示 を 分 けられます 196

スマートフォンサイト 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて 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プラグイン パケット 量 節 約 画 像 を 自 動 縮 小 など 日 本 のガラケー 独 特 の 仕 様 に 対 応 197

スマートフォンサイト 対 応 コアファイルを 確 認 こうなっているというイメージだけで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 198

スマートフォンサイト 対 応 $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 ); 199

スマートフォンサイト 対 応 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; 200

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

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

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

スマートフォンサイト 対 応 PCサイト 用 バナーと スマートフォンサイト 用 バナーを 切 り 替 えられます <?php if (wp_is_mobile()) :?> スマートフォン 用 バナーコード <?php else:?> パソコン 用 バナーコード <?php endif;?> 204

スマートフォンサイト 対 応 オーバーレイ 表 示 による スマートフォン 専 用 の アフィリエイトバナーも 最 近 はあります スクロールしても いつもの 画 面 下 に バナーが 表 示 される 205

スマートフォンサイト 対 応 で 結 局 何 が 良 いの? 206

スマートフォンサイト 対 応 レスポンシブWebデザイン 対 応 の WordPressテーマを 使 って 各 種 バナー 部 分 の 振 り 分 けは WordPressの 条 件 分 岐 タグ wp_is_mobile 関 数 を 使 うのが 増 えるのかな? 207

スマートフォンサイト 対 応 (コラム)3Gなど 回 線 が 細 い 場 合 は? レスポンシブWebデザイン(Media Queries)に 対 応 した 上 で ページ 下 にスクロールしたら ページ 送 りをして ソースコードが 新 たに 出 るようにする ページを 開 いた 時 点 では 全 ソースコードは 出 ない 208

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

目 次 0. 自 己 紹 介 1.WordPressの 概 要 と 導 入 2.WordPressのテーマとプラグイン 3.スマートフォン 対 応 4. 今 後 の 情 報 の 調 べ 方 & 質 疑 応 答 210

WordPress 情 報 の 調 べ 方 調 べ 方 (インターネットで 調 べる 編 ) WordPress Codex 日 本 語 版 http://wpdocs.sourceforge.jp/ ( 英 語 版 のWordPressのCodexを 日 本 語 化 している) WordPressのフォーラムに 質 問 する http://ja.forums.wordpress.org/ その 他 WordPress ( 調 べたい 事 ) で 検 索 する 211

WordPress 情 報 の 調 べ 方 WordPressのドキュメントの 参 照 サイト WordPress Codex 日 本 語 版 http://wpdocs.sourceforge.jp/ WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 212

WordPress 情 報 の 調 べ 方 調 べ 方 ( 書 籍 で 調 べる 編 ) WordPressに 関 する 本 は 十 数 冊 出 版 されている WordPressのバージョンが2 系 だった 頃 の 情 報 は 古 い 場 合 があるので 3 系 以 降 の 本 を 参 考 にする 具 体 的 には 2010 年 6 月 以 降 出 版 の 本 を 参 考 にする amazonや 楽 天 で 出 版 日 付 順 などでソートしてみる 書 籍 は 初 心 者 向 け 技 術 者 向 け テーマカスタマイズ に 特 化 プラグインに 特 化 など 色 々 213

WordPress 情 報 の 調 べ 方 調 べ 方 ( 無 料 で 人 に 聞 いてみる 編 ) WordPressは カンファレンスや 勉 強 会 が 盛 んで その 多 くは 無 料 や 場 所 代 だけなので 参 加 してみる WEB 業 界 やIT 業 界 の 人 間 も 多 く 参 加 しているので 情 報 交 換 や 交 流 には 最 適 な 場 WordPressのカンファレンスや 勉 強 会 としては (1)WordCamp (2)WordBench (3)OSC(オープンソースカンファレンス)などが あります 214

WordPress 情 報 の 調 べ 方 調 べ 方 ( 無 料 で 人 に 聞 いてみる 編 ) WordPressの 日 本 語 公 式 サイトのイベントカレンダー IT 勉 強 会 カレンダー ATND WordBench などで IT 関 係 のカンファレンスや 勉 強 会 を 探 すことが 可 能 です 215

WordPress 情 報 の 調 べ 方 開 発 プロジェクト WordPress 日 本 語 作 成 チーム http://groups.google.com/group/wp-ja-pkg 日 本 語 版 Codex http://wpdocs.sourceforge.jp/ WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 216

WordPress 情 報 の 調 べ 方 WordPressのコミュニティ 活 動 まずは 全 国 各 地 で 行 われている WordPressの 集 まりのご 紹 介 217

WordPress 情 報 の 調 べ 方 WordCamp http://japan.wordcamp.org/ ユーザー 開 発 者 が 集 うイベント 世 界 40 以 上 の 都 市 で 開 催 世 界 中 で180 回 以 上 の 開 催 実 績 日 本 では 年 に2~3 回 今 までに 東 京 京 都 福 岡 横 浜 名 古 屋 神 戸 218

WordPress 情 報 の 調 べ 方 WordCamp イベント 参 加 者 約 800 人 ( 直 近 のWordCamp Tokyo 2011の 参 加 人 数 ) WordPressに 関 する セッションやワークショップも 多 数 (WordCamp 横 浜 スタッフの 集 合 写 真 ) スタッフもたくさん! 当 日 だけお 手 伝 いも 大 歓 迎! 219

WordPress 情 報 の 調 べ 方 WordBench http://wordbench.org/ 各 地 域 のユーザーコミュニティ 現 在 全 国 各 地 約 40 地 域 毎 月 日 本 のどこかで 勉 強 会 や 交 流 会 を 開 催 BuddyPressプラグインによる オープンSNS 写 真 部 英 語 部 料 理 部 もくもく 部 なども 220

WordPress 情 報 の 調 べ 方 WordBench 写 真 部 一 眼 レフカメラ 写 真 好 きが 多 い 写 真 を 撮 る 旅 行 も 221

WordPress 情 報 の 調 べ 方 WordBench 料 理 部 料 理 を 作 ったり 料 理 を 食 べに 行 ったり 222

WordPress 情 報 の 調 べ 方 WordBenchもくもく 部 WordPress に 関 するワークショップ サイトのテーマ 改 良 /プラグイン 作 成 / WordPressドキュメントの 翻 訳 / 写 真 作 品 の 仕 上 げ 等 223

WordPress 情 報 の 調 べ 方 オープンソースカンファレンス(OSC) (オープンソースカンファレンス2011 Tokyo/Springの 出 展 写 真 ) 全 国 各 地 のオープンソースカンファレンス(OSC)に ブース 出 展 &セミナー 発 表 224

WordPress 情 報 の 調 べ 方 WordPressのイベントの 探 し 方 WordPressの 日 本 語 公 式 サイトのイベントカレンダー WordBenchのサイト IT 勉 強 会 カレンダー ATND などで WordPress 関 連 イベントを 探 すことができます 225

WordPress 情 報 の 調 べ 方 WordPressのコミュニティ 活 動 WordPressのコミュニティでは このように 実 際 に 集 まるイベントや 勉 強 会 も 多 くて とても 交 流 が 盛 んです もちろん インターネット 上 でも オープンソースを 楽 しみつつ 貢 献! 226

WordPress 情 報 の 調 べ 方 WordPress 日 本 語 作 成 チーム http://groups.google.com/group/wp-ja-pkg WordPressのコアファイルを 日 本 語 化 (moファイル poファイルの 作 成 ) 日 本 ユーザー 向 けパッケージの 配 布 やサポートを 行 う 227

WordPress 情 報 の 調 べ 方 日 本 語 版 Codex http://wpdocs.sourceforge.jp/ WordPressの 公 式 オンラインマニュアル(ドキュメント) 英 語 版 の 公 式 オンラインマニュアルの 和 訳 や 日 本 語 ユーザ 向 けのノウハウ 資 料 などの 共 有 Wiki 作 っていて 誰 でも 加 筆 編 集 できます 228

WordPress 情 報 の 調 べ 方 WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 日 本 特 有 の 文 化 (Webサービスや 携 帯 電 話 等 )にそったプラグインや マルチバイト 圏 に 対 応 したプラグインの 作 成 配 布 229

WordPress 情 報 の 調 べ 方 WordPressフォーラム http://ja.forums.wordpress.org/ WordPressに 関 する 質 問 や 話 題 を 話 し 合 う 場 230

WordPress 情 報 の 調 べ 方 WordPants http://wordpants.org/ WordPressに 関 する 電 子 書 籍 版 の 雑 誌 1 年 に 数 回 の 出 版 231

WordPress 情 報 の 調 べ 方 WeeklyCMS http://www.weeklycms.net/ 色 々なCMSについて USTREAM 放 送 毎 週 土 曜 日 午 前 11 時 ~ 約 1 時 間 WordPressをテーマにした 回 も 1ヶ 月 に 一 度 くらいの 割 合 で 放 送 232

WordPress 情 報 の 調 べ 方 WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 233

WordPress 情 報 の 調 べ 方 WordBench 東 京 at GMO http://atnd.org/event/wordbench20120701 2012 年 7 月 1 日 ( 日 曜 日 ) 13:30~20:00 勉 強 会 無 料 懇 親 会 は 飲 食 も 無 料 234

最 後 に 今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 235