PowerPoint プレゼンテーション

Transcription

1 ~WordPressを 使 ってかんたんスマホ 最 適 化!~ 株 式 会 社 コミュニティコム 星 野 邦 敏 東 京 都 荒 川 区 西 日 暮 里 NSO2 階 URL: 1

2 始 めに スライドは 後 日 に 公 開 します! WordPress(ワードプレス)コミュニティ PDFファイルにて 公 開 します 2

3 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 3

4 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 4

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

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

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

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

9 自 己 紹 介 自 社 サイト 運 営 から 法 人 化 ASPのイベントでお 話 する 機 会 も 9

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

11 自 己 紹 介 速 習 デザインWordPress ( 技 術 評 論 社 ) 2012 年 3 月 出 版 11

12 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 12

13 サンプルサイト サンプルサイト 水 族 館 コミュニティ 13

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

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

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

17 サンプルサイト プラグインをインストールするだけ! アクセスの 多 い 記 事 順 に 自 動 でリスト 化 する 17

18 サンプルサイト プラグインをインストールするだけ! 各 記 事 のコメントを 一 覧 表 示 する 18

19 サンプルサイト プラグインをインストールするだけ! 条 件 検 索 機 能 19

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

21 サンプルサイト プラグインをインストールするだけ! メールフォーム 21

22 サンプルサイト WordPressに 元 々 備 わっている 機 能 WordPressの カスタムフィールド 22

23 サンプルサイト WordPressに 元 々 備 わっている 機 能 新 着 記 事 をトップページに 表 示 23

24 サンプルサイト WordPressに 元 々 備 わっている 機 能 他 のブログの 更 新 情 報 を RSSで 自 動 取 得 して 表 示 24

25 サンプルサイト WordPressに 元 々 備 わっている 機 能 WordPressの コメント 欄 を 少 しだけカスタマイズ 25

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

27 サンプルサイト WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 各 地 域 の 天 気 予 報 を 自 動 で 取 得 する 27

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

29 サンプルサイト WordPressとAPIの 連 携 (APIの 活 用 事 例 ) そのスポットの 周 辺 の 写 真 を 自 動 で 表 示 させる 29

30 サンプルサイト WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 各 記 事 に 関 連 する 画 像 を 自 動 表 示 する 30

31 サンプルサイト WordPressとAPIの 連 携 (APIの 活 用 事 例 ) その 水 族 館 について Twitterの 最 新 つぶやきを 自 動 表 示 させる 31

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

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

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

35 サンプルサイト サンプルサイト 常 連 イン 35

36 サンプルサイト WordPressと 現 在 地 の 緯 度 経 度 情 報 取 得 HTML5のGeoLocation APIにより 現 在 地 の 緯 度 経 度 情 報 を 取 得 その 地 点 から 近 いお 店 やホテル の 情 報 を 取 得 36

37 サンプルサイト WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 現 在 地 から 近 い お 店 やホテルの 情 報 を WebAPIから 取 得 して 表 示 Google Mapa APIと 連 携 詳 細 ページは 各 APIから 取 得 37

38 サンプルサイト プラグインを 利 用! Twitterによるユーザー 登 録 38

39 サンプルサイト WordPressに 元 々 備 わっている 機 能 WordPressに 元 々ある ユーザー 登 録 機 能 を カスタマイズ 39

40 WordPressについて 世 界 トップ100 万 サイト 中 WordPress 利 用 率 15.9% マクラケン 直 子 さんのブログより 引 用 Historical trends in the usage of content management systems, March

41 WordPressについて CMSでのWordPressのシェア 53.9% マクラケン 直 子 さんのブログより 引 用 Historical trends in the usage of content management systems, March

42 WordPressについて 世 界 の 検 索 トレンド Google トレンド 42

43 WordPressについて 日 本 の 検 索 トレンド Google トレンド 43

44 WordPressについて ブログとしても 勝 間 和 代 ブログ カイ 士 伝 BOOK OFFスタッフブログ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 44

45 WordPressについて マガジンサイトとしても 美 的.com TechCrunch Japan ロイター 通 信 ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 45

46 WordPressについて 企 業 のサイトとしても クックパッド 株 式 会 社 株 式 会 社 ベクター IR 会 社 情 報 サイト さいたまスーパーアリーナ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 46

47 WordPressについて 学 校 のサイトとしても 昭 和 女 子 大 学 神 戸 芸 術 工 科 大 学 長 岡 工 業 高 等 専 門 学 校 ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 47

48 WordPressについて 海 外 のサイトとしても Nikon フォルクスワーゲン PEPSI (ペプシ)のブログ ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 48

49 WordPressについて 震 災 の 時 にはスピーディな 情 報 公 開 に 貢 献 助 けあいジャパン ( WordPress を 使 ったサイト WordPress Codex 日 本 語 版 より 引 用 ) prayforjapan.jp 小 出 裕 章 ( 京 大 助 教 ) 非 公 式 まとめ 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 49

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

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

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

53 WordPressについて WordPressを 利 用 すると (1) 好 きな 独 自 ドメイントで 運 営 できる 無 料 のブログでは 例 えば 自 分 のアカウントID) 自 分 のアカウントID) といった 形 になりますが WordPressをサーバーに 設 置 して 独 自 ドメインを 取 得 すれば 自 分 のURLでサイトを 運 営 することができます 53

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

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

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

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

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

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

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

61 WordPressについて 4 分 で 解 説!WordPressインストール 61

62 WordPressについて ワンクリックインストール のインストール/ワンクリックインストール 国 内 の20 近 いレンタルサーバーが WordPressワンクリックインストールに 対 応 レンタルサーバーの 管 理 画 面 から 導 入 62

63 WordPressについて ワンクリックインストール レンタルサーバーの heteml(ヘテムル) を 例 にして heteml(ヘテムル) の 管 理 画 面 からの ワンクリックインストールを 見 てみましょう 63

64 WordPressについて ワンクリックインストール 1 64

65 WordPressについて ワンクリックインストール 2 65

66 WordPressについて ワンクリックインストール 3 66

67 WordPressについて ワンクリックインストール 4 67

68 WordPressについて ワンクリックインストール インストール 完 了! ワンクリックインストールを 使 えば インストールに1 分 も 掛 からない!? 68

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

70 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 70

71 WordPressについて 投 稿 と 固 定 ページ 記 事 を 書 くのに 使 うのは 基 本 この2 箇 所 WordPress3.0から カスタム 投 稿 タイプ ができましたが これは 応 用 的 なので 詳 細 はお 話 しません 興 味 のある 方 は 検 索 などで 調 べてみてください 71

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

73 投 稿 VCスペシャルセミナー WordPress WordPressについて 新 規 投 稿 をクリック 73

74 投 稿 VCスペシャルセミナー WordPress WordPressについて 記 事 を 書 いて 公 開! 74

75 投 稿 VCスペシャルセミナー WordPress WordPressについて 表 示 されました! 表 示 の 仕 方 は テーマの コードの 書 き 方 によって 変 えられますが デフォルトテーマでは 時 系 列 に 表 示 されます 75

76 投 稿 VCスペシャルセミナー WordPress WordPressについて カテゴリー や タグ を 使 うことで 投 稿 記 事 を 分 類 することができます WordPress3.0から カスタムタクソノミー (カスタム 分 類 ) ができましたが これは 応 用 的 なので 詳 細 はお 話 しません 興 味 のある 方 は 検 索 などで 調 べてみてください 76

77 投 稿 VCスペシャルセミナー WordPress WordPressについて 本 に 例 えると カテゴリー は 章 タグ は 付 箋 というイメージ 77

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

79 WordPressについて 固 定 ページ 新 規 追 加 をクリック 79

80 WordPressについて 固 定 ページ 記 事 の 書 き 方 は 投 稿 と 同 じ 80

81 WordPressについて 固 定 ページ 表 示 されました! 時 系 列 を 意 識 せずに 表 示 されます 81

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

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

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

85 WordPressについて 投 稿 と 固 定 ページ 画 像 の 編 集 がWordPress 上 で 出 来 ます! ココをクリック 85

86 WordPressについて 投 稿 と 固 定 ページ 画 像 の 編 集 がWordPress 上 で 出 来 ます! 86

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

88 WordPressについて 投 稿 と 固 定 ページ アイキャッチ 画 像 WordPress3.0からの 新 機 能 88

89 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 89

90 WordPressを 使 ってスマートフォン 最 適 化 サンプルサイト 水 族 館 コミュニティ 90

91 WordPressを 使 ってスマートフォン 最 適 化 同 一 URLで PCサイト スマートフォンサイト ガラケー( 携 帯 )サイトの 振 り 分 けを 自 動 で 実 現 91

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

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

94 WordPressを 使 ってスマートフォン 最 適 化 ( 難 易 度 ) 低 高 ( 方 法 1) スマートフォンに 自 動 対 応 するプラグイン ( 方 法 2) Media Queriesを 使 ってテーマで 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る 94

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

96 WordPressを 使 ってスマートフォン 最 適 化 プラグイン 管 理 画 面 からも 選 べます! WPtouch で 検 索! 検 索 できます! WordPress.orgからも 選 べます! 96

97 WordPressを 使 ってスマートフォン 最 適 化 プラグインフォルダの 確 認 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 ココに プラグインフォルダ を 入 れる! 97

98 WPtouchは 日 本 語 にも 対 応 しています ( 一 部 翻 訳 が 微 妙 ) VCスペシャルセミナー WordPress WordPressを 使 ってスマートフォン 最 適 化 WPtouch Languageを Japanese に 選 択 して Saveする 98

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

100 WordPressを 使 ってスマートフォン 最 適 化 Wptouch 有 料 版 は 色 々できます ipadに 対 応 100

101 WordPressを 使 ってスマートフォン 最 適 化 Wptouch 有 料 版 は 色 々できます ipad 対 応 Enabled を 選 択 101

102 WordPressを 使 ってスマートフォン 最 適 化 WPtouch 有 料 版 は 色 々できます その 他 にも アイコン 変 更 メニュー 変 更 広 告 削 除 広 告 設 定 複 数 テーマ 設 定 デザイン 色 変 更 など 102

103 WordPressを 使 ってスマートフォン 最 適 化 ( 難 易 度 ) 低 高 ( 方 法 1) スマートフォンに 自 動 対 応 するプラグイン ( 方 法 2) Media Queriesを 使 ってテーマで 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る 103

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

105 WordPressを 使 ってスマートフォン 最 適 化 ( 方 法 2) CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 Whiteboard テーマなど Media Queriesに 対 応 した WordPressのテーマは 複 数 あります 105

106 WordPressを 使 ってスマートフォン 最 適 化 ( 方 法 2) 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) { } 106

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

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

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

110 WordPressを 使 ってスマートフォン 最 適 化 レスポンシブ ウェブ デザインに 対 応 した 日 本 人 が 作 った 無 料 配 布 の WordPressテーマ BizVektorテーマ 110

111 WordPressを 使 ってスマートフォン 最 適 化 ( 難 易 度 ) 低 高 ( 方 法 1) スマートフォンに 自 動 対 応 するプラグイン ( 方 法 2) Media Queriesを 使 ってテーマで 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る 111

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

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

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

115 WordPressを 使 ってスマートフォン 最 適 化 Ktai Styleプラグイン [いますぐインストール]を クリックして 有 効 化 します 115

116 WordPressを 使 ってスマートフォン 最 適 化 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 / ココに 作 った テーマフォルダ を 入 れる! 116

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

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

119 WordPressを 使 ってスマートフォン 最 適 化 Q:PCと 携 帯 のリンクを 自 動 で 振 り 分 けできますか? A:できます Ktai Style 2.1 ベータ 版 [pc-only]...[/pc-only] [mobile-only]...[/mobile-only] で 振 り 分 ける ( 注 意 ) この 方 法 で 行 わないと Ktai Styleの 次 期 バージョンに 対 応 しないので 注 意 しましょう 119

120 WordPressを 使 ってスマートフォン 最 適 化 Q:PCと 携 帯 のリンクを 自 動 で 振 り 分 けできますか? A:できます PCサイト 用 バナーと 携 帯 サイト 用 バナーで 同 じURLで 表 示 を 分 けられます 120

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

122 WordPressを 使 ってスマートフォン 最 適 化 コアファイルを 確 認 こうなっているというイメージだけで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 122

123 WordPressを 使 ってスマートフォン 最 適 化 $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 ); 123

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

125 WordPressを 使 ってスマートフォン 最 適 化 ユーザーエージェントで 振 り 分 けて 専 用 のテーマを 作 る 場 合 jquery Mobileも 便 利 125

126 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileは 簡 単 で 便 利 ブラウザ 間 の 違 いを 気 にしなくて 良 い (IE 対 応 など) jquery jquery Mobile 126

127 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileのタグはリファレンス 等 を 参 考 に jquery Mobileのタグ PHP WordPressテンプレートタグ WordPress 条 件 分 岐 タグ を 組 み 合 わせるのがコツ Designs jquery Mobile 127

128 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileを 使 う 準 備 ダウンロード 128

129 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileを 使 う 準 備 ダウンロード 129

130 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileを 使 う 準 備 テーマフォルダの 中 に jqueryとjquery Mobileを 入 れる ココでは jsフォルダを 作 り その 中 に 入 れました 130

131 WordPressを 使 ってスマートフォン 最 適 化 jquery Mobileを 使 う 準 備 jsフォルダの 中 身 jqueryと jquery Mobileの サイトから ダウンロードした ファイル 131

132 WordPressを 使 ってスマートフォン 最 適 化 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ファイル 132

133 WordPressを 使 ってスマートフォン 最 適 化 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ファイル 133

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

135 WordPressを 使 ってスマートフォン 最 適 化 (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> 135

136 WordPressを 使 ってスマートフォン 最 適 化 (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ファイルを 用 意 136

137 WordPressを 使 ってスマートフォン 最 適 化 (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で カテゴリごとにリスト 化 も 簡 単 137

138 WordPressを 使 ってスマートフォン 最 適 化 (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> 138

139 WordPressを 使 ってスマートフォン 最 適 化 (3)リストビュー <?php $my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => -1, 'orderby' => 'comment_count', 'order' => 'DESC' ));?> カテゴリーID 1 の 記 事 を 配 列 に 入 れる 139

140 WordPressを 使 ってスマートフォン 最 適 化 (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を 取 得 140

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

142 WordPressを 使 ってスマートフォン 最 適 化 (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ファイルを 用 意 142

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

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

145 WordPressを 使 ってスマートフォン 最 適 化 WordPressでのアフィリエイトリンク 対 応 まとめ PCサイト スマートフォンサイト モバイルサイト (ガラケー 携 帯 ) PC 用 アフィリエイトリンク モバイル 用 アフィリエイトリンク ( 方 法 1)スマートフォンに 自 動 対 応 のプラグイン ( 方 法 2)Media Queries 対 応 テーマ ( 方 法 3)ユーザーエージェントで 振 り 分 け Ktai Styleプラグイン 145

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

147 WordPressを 使 ってスマートフォン 最 適 化 スマホ 専 用 のバナーもあります( 例 :バリューコマース) 1[オファー 検 索 ]をクリック 2[スマートフォン 対 応 ]をクリック 3[ 検 索 ]をクリック 147

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

149 WordPressを 使 ってスマートフォン 最 適 化 スマホ 専 用 のバナーもあります( 例 :バリューコマース) スマートフォン 専 用 の バナーが 表 示 される 149

150 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 150

151 ワークショップ(デモ) ( 難 易 度 ) 低 高 ( 方 法 1) スマートフォンに 自 動 対 応 するプラグイン ( 方 法 2) Media Queriesを 使 ってテーマで 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る 151

152 ワークショップ(デモ) ( 難 易 度 ) 低 高 ( 方 法 1) スマートフォンに 自 動 対 応 するプラグイン ( 方 法 2) Media Queriesを 使 ってテーマで 対 応 ( 方 法 3) ユーザーエージェントで 振 り 分 けて PC スマートフォン ガラケー それぞれのサイトを 作 る 152

153 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 153

154 他 にもこんなことができる WordPressのコアは とてもシンプル 154

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

156 他 にもこんなことができる 公 式 ディレクトリ テーマ 登 録 数 1,500 以 上 156

157 他 にもこんなことができる 公 式 ディレクトリ プラグイン 登 録 数 18,000 以 上 157

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

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

160 他 にもこんなことができる プラグイン Cawaii Admin 西 川 伸 一 WordPressの 管 理 画 面 を 可 愛 くするプラグイン 160

161 他 にもこんなことができる ころぐ WordPressの 管 理 画 面 を 変 えられる! 161

162 他 にもこんなことができる プラグイン カイ 士 伝 WordPress Related Post for Japanese Yahoo!の 日 本 語 形 態 素 解 析 Webサービスを 利 用 して 関 連 する 自 分 の 記 事 を 表 示 かなり 精 度 が 高 い! 162

163 他 にもこんなことができる カイ 士 伝 from.tv/wp/ ラーメン 記 事 には ラーメンの 記 事 が! サイト 内 での ユーザーの 移 動 が 高 まる 163

164 他 にもこんなことができる プラグイン カイ 士 伝 WP Social Bookmarking Light 数 々のソーシャルボタンを まとめて 設 置! 164

165 他 にもこんなことができる プラグインをインストールするだけ! Twitterに ツイートする ボタン Facebookの いいね! ボタン Google+1ボタン などを 自 分 のサイトに 設 置 して ソーシャルな 流 れを 作 れる 165

166 他 にもこんなことができる プラグイン Feedback Champuru Twitter はてなブックマーク Google+を コメントっぽく 表 示 させる プラグイン 166

167 他 にもこんなことができる コメント 欄 が 賑 わってる 感 じに! コメントしにくい 敷 居 を 下 げる 167

168 他 にもこんなことができる テーマ P2テーマ マクラケン 直 子 Twitterのような 一 言 コメント 掲 示 板 が 作 れるテーマ 連 絡 やコミュニケーションにも! 168

169 他 にもこんなことができる WordPress 日 本 語 翻 訳 の 連 絡 も P2テーマを 利 用! WordPress Codex 日 本 語 版 会 議 室 169

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

171 他 にもこんなことができる WordPress.comの 機 能 をセットで 使 える 171

172 他 にもこんなことができる プラグイン 星 野 邦 敏 Contact Form 7 メールフォームが 作 れるプラグイン 172

173 他 にもこんなことができる メールフォーム 173

174 他 にもこんなことができる プラグイン WP Lightbox 2 星 野 邦 敏 リンクのある 画 像 をクリックすると 画 像 が 浮 き 上 がるようなデザイン となるプラグイン 174

175 他 にもこんなことができる 画 像 をクリックすると 175

176 他 にもこんなことができる WordPressを 使 ったら サイトが 重 くなった! WordPress 初 心 者 ねこび んさん 176

177 他 にもこんなことができる プラグイン マクラケン 直 子 WP Super Cache キャッシュを 作 ってくれて 表 示 の 高 速 化 ができる 177

178 他 にもこんなことができる WP Super Cache プラグインを インストールして キャッシングを 利 用 に するだけです! 178

179 他 にもこんなことができる 大 曲 仁 プラグイン 001 Prime Strategy Translate Accelerator 翻 訳 ファイルの 読 み 込 みを キャッシュ 化 する 179

180 他 にもこんなことができる プラグイン 三 木 徹 WordPress Database Backup データベースのバックアップを 手 動 または 自 動 で 取 ることの できるプラグイン 180

181 他 にもこんなことができる MySQLを 管 理 画 面 から 保 存 できる 定 期 バックアップ も 自 動 で 出 来 る 181

182 他 にもこんなことができる WordPress 初 心 者 の ねこび んさんも 満 足! WordPress 初 心 者 ねこび んさん 182

183 他 にもこんなことができる 帰 ったら さっそく テーマやプラグインを 使 ってみよう! WordPress 経 験 者 わぷーさん 183

184 他 にもこんなことができる 既 存 のプラグインだけで 作 れる 事 例 既 存 のプラグインをインストールするだけで 実 現 できるWEBサービスを 作 ってみましょう! 184

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

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

187 他 にもこんなことができる メールマガジン 登 録 & 投 稿 システム Subscribe2 Subscribe2 widget プラグイン 187

188 他 にもこんなことができる パーマリンク 設 定 非 常 に 重 要 URLをどのようにするかを 設 定 する サイト 運 営 の 始 めに 決 定 しておくべき 188

189 他 にもこんなことができる ユーザー 権 限 の 付 与 を 行 う 管 理 画 面 の ユーザー から 企 業 担 当 者 用 に 新 規 ユーザーアカウントを 追 加 する その 際 に 管 理 者 編 集 者 投 稿 者 寄 稿 者 購 読 者 のどの 権 限 を 付 与 するかを 予 め 考 えておく 権 限 は 左 に 行 くほど 強 くなるので どこまでを 企 業 担 当 者 が 担 当 するのかを 予 め 決 めておく 189

190 他 にもこんなことができる この 部 分 は 購 読 者 権 限 で ユーザー 表 示 WordBeach 190

191 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressに 天 気 情 報 を 自 動 で 取 得 各 地 域 の 天 気 予 報 を 自 動 で 取 得 する 191

192 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressの 各 記 事 の 位 置 情 報 を 地 図 に 表 示 各 記 事 の 水 族 館 の 位 置 を Google Maps APIと 連 携 して 自 動 で 地 図 に 一 覧 表 示 させる & 近 いスポットはピンをまとめる 192

193 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressに 周 辺 の 写 真 を 自 動 で 表 示 そのスポットの 周 辺 の 写 真 を 自 動 で 表 示 させる 193

194 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressに 画 像 を 自 動 で 表 示 各 記 事 に 関 連 する 画 像 を 自 動 表 示 する 194

195 他 にもこんなことができる WordPressに Twitter 情 報 を 自 動 で 表 示 その 水 族 館 について Twitterの 最 新 つぶやきを 自 動 表 示 させる 195

196 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressにカフェ 情 報 を 自 動 で 表 示 そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に カフェやレストランを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる 196 バリューコマース 対 応

197 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressにホテル 情 報 を 自 動 で 表 示 そのスポットから 2 点 間 の 直 線 距 離 の 近 い 順 番 に ホテルを 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる バリューコマース 対 応 197

198 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressに 商 品 情 報 を 一 覧 表 示 記 事 に 関 連 する 商 品 を 自 動 で 一 覧 表 示 する この 部 分 は 自 動 で アフィリエイトリンクに なっていて 成 果 の 収 益 に 繋 がる バリューコマース 対 応 198

199 キーワードは VCスペシャルセミナー WordPress 他 にもこんなことができる カスタムフィールド Web API 199

200 他 にもこんなことができる カスタムフィールド カスタムフィールドを 使 ってみましょう! カスタムフィールドは WordPressに 元 々 備 わっている 機 能 です 200

201 他 にもこんなことができる カスタムフィールド カスタムフィールドを 出 力 する WordPressのテンプレートタグ 例 : <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに 入 力 したデータを 表 示 しています 201

202 他 にもこんなことができる カスタムフィールド テーマに4 行 の プログラムを 追 加 して 実 現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = " ケーション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="" />'; }?> 202

203 他 にもこんなことができる WordPressとWebAPIの 連 携 WordPressを 使 えば ページごとに 自 由 に キーワードを 変 えられる ようにできる 203

204 他 にもこんなことができる WordPressとWebAPIの 連 携 熱 帯 魚 に 関 連 するWeb APIが アフィリエイトリンクで 自 動 表 示 204

205 他 にもこんなことができる サンプルサイト 常 連 イン 205

206 他 にもこんなことができる WordPressと 現 在 地 の 緯 度 経 度 情 報 取 得 HTML5のGeoLocation APIにより 現 在 地 の 緯 度 経 度 情 報 を 取 得 その 地 点 から 近 いお 店 やホテル の 情 報 を 取 得 206

207 他 にもこんなことができる WordPressとAPIの 連 携 (APIの 活 用 事 例 ) 現 在 地 から 近 い お 店 やホテルの 情 報 を WebAPIから 取 得 して 表 示 Google Mapa APIと 連 携 詳 細 ページは 各 APIから 取 得 207

208 他 にもこんなことができる プラグインを 利 用! Twitterによるユーザー 登 録 208

209 他 にもこんなことができる WordPressに 元 々 備 わっている 機 能 WordPressに 元 々ある ユーザー 登 録 機 能 を カスタマイズ 209

210 他 にもこんなことができる バリューコマースでWeb APIを 使 う 準 備 1[オファー 検 索 ]をクリック 2[ 商 品 オファー/ウェブサービス 対 応 ] をクリック バリューコマース 内 の 広 告 主 約 200 社 が Web APIに 対 応 しています 3[ 検 索 ]をクリック 210

211 他 にもこんなことができる バリューコマースでWeb APIを 使 う 準 備 1 同 じ 広 告 があったら PDB と 付 いている 方 が Web APIに 対 応 しています 2[ 広 告 を 選 ぶ]をクリック 211

212 他 にもこんなことができる バリューコマースでWeb APIを 使 う 準 備 1[ウェブサービス]をクリック 2[コードを 取 得 ]をクリック バリューコマースの 場 合 広 告 提 携 をしても ウェブサービスのコードを 取 得 しないと APIが 表 示 されない 仕 様 なので 注 意 しましょう 212

213 他 にもこんなことができる バリューコマースでWeb APIを 使 う 準 備 1 トークン を 確 認 する 2 sid と pid を 確 認 する APIに 使 います 213

214 他 にもこんなことができる WordPressのマルチサイト 化 とは? WordPressのマルチサイト サブドメイン 形 式 or ディレクトリ 形 式 のURLで 複 数 サイト 運 営 (1) 自 分 のブログを1つのWordPressで 複 数 作 れる (2) 新 規 登 録 の 許 可 にて 新 規 サイトおよびユーザーアカウント の 登 録 をどちらも 許 可 する を 選 択 した 上 で 新 規 ユーザーの 追 加 にチェックを 入 れることで 不 特 定 多 数 の 人 に 使 わせて ブログの 運 営 側 になれる (アメーバブログやYahooブログのような 運 営 側 になるイメージ) (3)ドメインマッピングにより 複 数 の 独 自 ドメイン 運 営 にもできる (プラグインなどでの 対 応 となり 公 式 な 推 奨 ではない ) 214

215 他 にもこんなことができる WordPressのマルチサイト 化 の 事 例 loftwork.com 215

216 マルチサイト 化 する 方 法 wp-config.phpファイルに define('wp_allow_multisite', true); を 書 く VCスペシャルセミナー WordPress 他 にもこんなことができる 管 理 画 面 に ネットワークの 設 定 が 表 示 されます 216

217 他 にもこんなことができる マルチサイト 化 する 方 法 [インストール]をクリック 217

218 他 にもこんなことができる マルチサイト 化 する 方 法 指 示 に 従 って (1) blogs.dirディレクトリを wp-contentフォルダに 作 る (2) wp-config.phpにコピペ (3).htaccessファイルを 作 成 してコピペ 218

219 他 にもこんなことができる サイトネットワーク 管 理 者 マルチサイト 化 すると 管 理 画 面 の 右 上 に サイトネットワーク 管 理 者 という 項 目 が 追 加 される WordPress3.1 バージョンの 場 合 WordPress3.2 バージョンの 場 合 219

220 他 にもこんなことができる サイトネットワーク 管 理 者 ネットワーク 管 理 者 テーマやプラグインの 新 規 追 加 や 編 集 は ネットワーク 管 理 者 のみが できる 子 サイトの 詳 細 設 定 も ネットワーク 管 理 者 のみが 行 える 220

221 他 にもこんなことができる マルチサイト 化 にする 際 の 注 意 点 一 度 マルチサイト 化 すると 今 までのシングルサイトには 戻 しづらいので 環 境 構 築 の 際 には その 旨 を 理 解 した 上 で 行 なうようにする 221

222 目 次 0. 自 己 紹 介 1. WordPressについて 2. WordPressを 使 ってスマートフォン 最 適 化 3. ワークショップ(デモ) 4. 他 にもこんなことができる 5. 今 後 の 情 報 の 調 べ 方 など 222

223 WordPress 情 報 の 調 べ 方 調 べ 方 (インターネットで 調 べる 編 ) WordPress Codex 日 本 語 版 ( 英 語 版 のWordPressのCodexを 日 本 語 化 している) WordPressのフォーラムに 質 問 する その 他 WordPress ( 調 べたい 事 ) で 検 索 する 223

224 WordPress 情 報 の 調 べ 方 WordPressのドキュメントの 参 照 サイト WordPress Codex 日 本 語 版 WordPress Plugins/JSeries 224

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

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

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

228 WordPress 情 報 の 調 べ 方 開 発 プロジェクト WordPress 日 本 語 作 成 チーム 日 本 語 版 Codex WordPress Plugins/JSeries 228

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

230 WordPress 情 報 の 調 べ 方 そもそもWordCampとは? ユーザー 開 発 者 が 集 うイベント 世 界 40 以 上 の 都 市 で 開 催 世 界 中 で180 回 以 上 の 開 催 実 績 日 本 では 年 に3~4 回 今 までに 東 京 京 都 福 岡 横 浜 名 古 屋 神 戸 230

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

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

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

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

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

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

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

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

239 WordPress 情 報 の 調 べ 方 WordPress 日 本 語 作 成 チーム WordPressのコアファイルを 日 本 語 化 (moファイル poファイルの 作 成 ) 日 本 ユーザー 向 けパッケージの 配 布 やサポートを 行 う 239

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

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

242 WordPress 情 報 の 調 べ 方 WordPressフォーラム WordPressに 関 する 質 問 や 話 題 を 話 し 合 う 場 242

243 WordPress 情 報 の 調 べ 方 WordPants WordPressに 関 する 電 子 書 籍 版 の 雑 誌 1 年 に 数 回 の 出 版 243

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

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

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