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

Transcription

1 実 演 ゼロから45 分 間 で 作 る WordPressスマートフォン 対 応 サイト 株 式 会 社 コミュニティコム 星 野 邦 敏 東 京 都 荒 川 区 西 日 暮 里 NSO2 階 URL: 1

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

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

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

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

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

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

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

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

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

11 WordPressの 概 要 と 導 入 サンプルサイト 水 族 館 コミュニティ 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

35 WordPressの 概 要 と 導 入 世 界 トップ100 万 サイト 中 WordPress 利 用 率 16.3% マクラケン 直 子 さんのブログより 引 用 Historical trends in the usage of content management systems, March

36 WordPressの 概 要 と 導 入 CMSでのWordPressのシェア 54.0% マクラケン 直 子 さんのブログより 引 用 Historical trends in the usage of content management systems, March

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

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

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

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

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

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

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

44 WordPressの 概 要 と 導 入 震 災 の 時 にはスピーディな 情 報 公 開 に 貢 献 助 けあいジャパン ( WordPress を 使 ったサイト prayforjapan.jp 小 出 裕 章 ( 京 大 助 教 ) 非 公 式 まとめ 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の 概 要 と 導 入 WordPressを 利 用 すると (1) 好 きな 独 自 ドメイントで 運 営 できる (2) 自 分 の 意 図 しない 広 告 は 入 らない (3) 文 章 や 写 真 のデータを 自 分 で 管 理 できる (4) 突 然 のサービス 停 止 の 心 配 がない (5) 自 由 にデザインや 機 能 を 追 加 できる 45

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

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

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

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

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

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

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

53 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 などなど 53

54 WordPressの 概 要 と 導 入 4 分 で 解 説!WordPressインストール 54

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

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

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

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

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

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

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

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

63 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

100 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

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

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

103 WordPressのテーマ テーマはWordPress.orgからも 選 べます! 103

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

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

106 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

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

108 WordPressのプラグイン プラグインもWordPress.orgから 選 べます! 108

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

110 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

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

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

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

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

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

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

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

118 WordPressのプラグイン ころぐ WordPressの 管 理 画 面 を 変 えられる! 118

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

136 WordPressのプラグイン カスタムフィールド テーマに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="" />'; }?> 136

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

158 スマートフォンサイト 対 応 サンプルサイト 水 族 館 コミュニティ 158

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

188 スマートフォンサイト 対 応 ( 方 法 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

189 スマートフォンサイト 対 応 ( 方 法 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プラグインで スマホ&ガラケーの 両 方 に 対 応 してみます

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

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

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

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

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

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

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

197 スマートフォンサイト 対 応 ( 方 法 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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