SlideShare a Scribd company logo
さくらWORKS関内(1)
第1回 既存のプラグインを組み合わせることで
    WEBサービスを作ってみよう!


      株式会社コミュニティコム
      星野 邦敏
       〒116-0013
       東京都荒川区西日暮里5-37-5 NSO2階
       URL: http://www.communitycom.jp/
       E-MAIL: mail@communitycom.jp
                                          1
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          2
さくらWORKS関内(1)
      自己紹介

     星野 邦敏(ほしの くにとし)
     Twitter : @khoshino
     Facebook : 星野邦敏(Kunitoshi Hoshino)

株式会社コミュニティコムという会社で、
自社運営サイトや他企業様のWEBサイトやアプリを作っています。
オープンソースの活動をしたり、IT系の勉強会を主催したり、
地域の活動をしたり。
WordPressをCMSとしてWEBサイトを作ることが増えています。

                                          3
さくらWORKS関内(1)
       自己紹介

WordPressのイベントである「WordCamp」京都・横浜・名古屋に、
スタッフやスピーカーとして関わりました。
その他、WordPress地域コミュニティ「WordBench」に参加したり、
OSCにWordPressのブース出展する等、関わっています。




                                    4
さくらWORKS関内(1)
       自己紹介

                         WordCamp京都では、
                         WordPressのコミュニティ活動
                         についてのライトニングトークを、
                         WordCamp名古屋では、
                         「WordPressファーストステップ」
                         という45分のセッションを、
                         担当しました。
(WordCamp名古屋にて、杉本さん撮影)

WordPressを使ってみよう!インストールの仕方、最初の記事投稿、
テーマとプラグインの追加、オリジナルテーマの作り方など、初心者向けセッション。

                                          5
さくらWORKS関内(1)
       自己紹介
WordPress日本語サイトの「イベントカレンダー」を更新する係。
もし掲載されていないWP関係のイベントや勉強会があれば、
Twitter経由などで、お知らせください!




  ココ



                                 6
さくらWORKS関内(1)
          自己紹介

(1)自社サイトの運営
                                  このサイトは、WordPress!
 例えば・・・




 http://zeirishi-community.com/ http://www.tokyo-hanami.com/   7
さくらWORKS関内(1)
        自己紹介

(2)CMSパッケージによるWEB作成受注請負
 例えば・・・                     これらのサイトも、WordPress!




  http://www.jctsc.co.jp/     http://www.afl-hoken.com/   8
さくらWORKS関内(1)
      自己紹介

(3)その他
   WEBやインターネットに関する講師
   iPhoneアプリやAndroidアプリの制作




                             9
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          10
さくらWORKS関内(1)
       WordPress活用事例


ブログとしても


                               BOOK・OFFスタッフブログ

                             (「WordPress を使ったサイト –
                             WordPress Codex 日本語版」より引用)
                             http://wpdocs.sourceforge.jp/%E5%88%A
                                 9%E7%94%A8%E8%80%85:Nao/Word
                                 Press_%E3%82%92%E4%BD%BF%E
             Photoshop Vip       3%81%A3%E3%81%9F%E3%82%B5%
                                 E3%82%A4%E3%83%88
 IDEA*IDEA
                                                          11
さくらWORKS関内(1)
     WordPress活用事例


マガジンサイトとしても


                                        ロイター通信

                             (「WordPress を使ったサイト –
                             WordPress Codex 日本語版」より引用)
                             http://wpdocs.sourceforge.jp/%E5%88%A
                                 9%E7%94%A8%E8%80%85:Nao/Word
          TechCrunch   Japan     Press_%E3%82%92%E4%BD%BF%E
                                 3%81%A3%E3%81%9F%E3%82%B5%
                                 E3%82%A4%E3%83%88
 美的.com
                                                           12
さくらWORKS関内(1)
      WordPress活用事例


会社のサイトとしても

                             さいたまスーパーアリーナ


                          (「WordPress を使ったサイト –
                          WordPress Codex 日本語版」より引用)
                          http://wpdocs.sourceforge.jp/%E5%88%A
                              9%E7%94%A8%E8%80%85:Nao/Word
クックパッド株式会社   株式会社ベクター         Press_%E3%82%92%E4%BD%BF%E
             IR・会社情報サイト       3%81%A3%E3%81%9F%E3%82%B5%
                              E3%82%A4%E3%83%88

                                                       13
さくらWORKS関内(1)
    WordPress活用事例


学校のサイトとしても


                         長岡工業高等専門学校

                    (「WordPress を使ったサイト –
                    WordPress Codex 日本語版」より引用)
                    http://wpdocs.sourceforge.jp/%E5%88%A
                        9%E7%94%A8%E8%80%85:Nao/Word
昭和女子大学   神戸芸術工科大学       Press_%E3%82%92%E4%BD%BF%E
                        3%81%A3%E3%81%9F%E3%82%B5%
                        E3%82%A4%E3%83%88

                                                 14
さくらWORKS関内(1)
         WordPress活用事例


海外のサイトとしても


                            PEPSI (ペプシ)のブログ


                         (「WordPress を使ったサイト –
                         WordPress Codex 日本語版」より引用)
                         http://wpdocs.sourceforge.jp/%E5%88%A
                             9%E7%94%A8%E8%80%85:Nao/Word
 Nikon       フォルクスワーゲン       Press_%E3%82%92%E4%BD%BF%E
                             3%81%A3%E3%81%9F%E3%82%B5%
                             E3%82%A4%E3%83%88

                                                      15
さくらWORKS関内(1)
    WordPress活用事例

・・・と、以上のサイトは、有名な企業や大学など
でのWordPress制作事例です。

これらのサイトを作るには、WordPressの
「テーマ」をカスタマイズする必要があります。

それは第2回目以降に行うとして、今回は、
既存のプラグイン&テーマで作れる
WEBサービスをご紹介いたします。
                          16
さくらWORKS関内(1)
     WordPress活用事例
WordPressの活用方法
1.ブログとして使う。
2.ポータルサイトとして使う。
3.ブログ運営側として使う。
4.APIやCSVデータと連動させて使う。
5.ニュース集約配信サイトとして使う。
6.メールマガジン配信サイトとして使う。
7.SNS(会員制サイト)として使う。
8.Twitterと連動させたサイトとして使う。
・・・・・・などなど、WordPressの使い方はアイデア次第!
                                   17
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          18
さくらWORKS関内(1)
  既存のテーマを入れる

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


                                 19
さくらWORKS関内(1)
          既存のテーマを入れる

     テーマフォルダの確認
wp-admin /
wp-content /      languages /
wp-includes /     plugins /
index.php         themes /      twentyten /
license.txt       upgrade /     index.php
readme-ja.html    uploads /
readme.html       index.php     ココに
wp-activate.php
                                テーマフォルダ
wp-app.php
wp-atom.php                     を入れる!

                                              20
さくらWORKS関内(1)
 既存のテーマを入れる

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


            検索もできます!




                       21
さくらWORKS関内(1)
 既存のテーマを入れる

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




                   22
さくらWORKS関内(1)
  既存のテーマを入れる

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




  http://wordpress.org/extend/themes/
                                        23
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          24
さくらWORKS関内(1)
  既存のプラグインを入れる

プラグインとは?

「追加機能」。
WordPressの本体はシンプルなので、
自由に機能を追加するイメージ。

プラグインは、自分で作ることも出来ます。
慣れてきたら、自分でカスタマイズすると、自由度が高まります。


                                 25
さくらWORKS関内(1)
          既存のプラグインを入れる

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

                                                       26
さくらWORKS関内(1)
 既存のプラグインを入れる

プラグインも管理画面から選べます!


          検索もできます!




                     27
さくらWORKS関内(1)
  既存のプラグインを入れる

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




  http://wordpress.org/extend/plugins/
                                         28
さくらWORKS関内(1)
     既存のプラグインを入れる

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




                                  29
さくらWORKS関内(1)
       既存のプラグインを入れる

    プラグインの具体例              ・Welcart
                             ショッピングサイト構築
・Contact Form 7            ・BuddyPress
  お問い合わせメールフォームを作成           SNS構築
・Ktai Style                ・Subscribe2
  日本の携帯電話対応                  メールマガジン構築
・PS Auto Sitemap           ・Admin SSL
  サイトマップを自動で作成               SSL対応
・Custom Field Template     ・WP Super Cache
  カスタムフィールドのテンプレートを簡単に設定     キャッシュ生成、表示の高速化


    その他、「WordPress プラグイン」などで検索すると、
    素敵なプラグインが見つかります!
                                         30
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          31
さくらWORKS関内(1)
      プラグインQ&A豆知識

Q:携帯サイトに対応できますか?
A:できます。
 「Ktai Style」というプラグインをインストールします。
 http://wppluginsj.sourceforge.jp/ktai_style/
 「Ktai Style」を使うと、ユーザーエージェントにより、自動的に、
 PCからの閲覧と、携帯からの閲覧を振り分けてくれます。
 つまり、PCサイトと携帯サイトを同一URLで表示を切り替えられます。

 これで、携帯電話からのアクセスにも自動で対応されるので、
 アクセスアップに繋がります!


                                                32
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:携帯サイトに対応できますか?
A:できます。

               「いますぐインストール」を
               クリックして、有効化します。




                            33
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:携帯サイトに対応できますか?
A:できます。

          「Ktai Style」プラグインを有効化すると
          管理画面のメニューに左のような項目が
          追加されるので、
          携帯表示の設定ができます。




                                 34
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:携帯サイトに対応できますか?
A:できます。

                    同じURLでも、
                    「PCサイト」と「携帯サイト」で、
                    このように見え方が
                    端末に応じて変わります。

                    東京お花見スポット.com
                    http://www.tokyo-hanami.com/



                                            35
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:携帯サイトに対応できますか?
A:できます。

                    同じURLでも、
                    「PCサイト」と「携帯サイト」で、
                    このように見え方が
                    端末に応じて変わります。

                    東京お花見スポット.com
                    http://www.tokyo-
                        hanami.com/asukayama.html


                                           36
さくらWORKS関内(1)
        プラグインQ&A豆知識

Q:PCと携帯のリンクを自動で振り分けできますか?
A:できます。
 「Ktai Style 2.1 ベータ版」をインストールします。
 http://www.yuriko.net/arc/2010/05/10/ktaistyle-210-beta1/
 PCだけのコンテンツ、携帯だけのコンテンツを、それぞれ
 [ pc-only ]...[ /pc-only ] と [ mobile-only ]...[ /mobile-only ]
 に指定できます。
 これにより、PCと携帯で、表示させたい文章や画像が異なる場合でも、
 PCにはPCのリンクだけ、携帯には携帯のリンクだけ、表示できます。
 この方法は、次のKtai Styleのバージョンアップの際に正式版になるので、
 互換性が保証される使い方で、オススメです。
                                                            37
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:PCと携帯のリンクを自動で振り分けできますか?
           [pc-only]...[/pc-only]
A:できます。
           [mobile-only]...[/mobile-only]
           で振り分ける。




                                            38
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:PCと携帯のリンクを自動で振り分けできますか?
A:できます。




 PCサイト用バナーと、携帯サイト用バナーで、
 同じURLで表示を分けられます。
                          39
さくらWORKS関内(1)
     プラグインQ&A豆知識

Q:スマートフォンサイトに対応できますか?
A:できます。
 方法は、大きく2通りあります。
 (1)1つ目は、「WPtouch」というプラグインです。
 このプラグインを入れるだけで、スマートフォン端末からの閲覧は
 自動的にスマートフォンになります。海外では主流の方法です。
 (2)2つ目は、さきほどの「Ktai Style」の管理画面のテーマ設定項目で、
 「iPhone, Android用」という項目があるので、それを有効化します。
 その上で、スマートフォン用テーマを作ると、自由度が増します。

 これで、スマートフォンからのアクセスにも対応できます!
                                       40
さくらWORKS関内(1)
      プラグインQ&A豆知識

Q:スマートフォンサイトに対応できますか?
A:できます。

「WPtouch」プラグイン
をインストールして
有効化すると、
スマートフォン対応が
自動でされます。


                        41
さくらWORKS関内(1)
      プラグインQ&A豆知識

Q:バナーや広告などを一括管理できますか?
A:できます。
 「Advertising Manager」というプラグインをインストールします。
 このプラグインで広告管理をすれば、
 例えば、複数の記事に同じバナーや広告を貼った場合にも、
 「Advertising Manager」の管理画面から貼り替えるだけで、
 全ての記事に反映されます。

 これで、バナーや広告のリンク切れの管理が簡単になり、
 リンクの貼り替えの作業時間を大幅に短縮できます!


                                            42
さくらWORKS関内(1)
       プラグインQ&A豆知識

Q:バナーや広告などを一括管理できますか?
A:できます。

「Advertising Manager」
プラグインをインストールして
有効化すると、
管理画面に、右側のような
メニューが表示されます。


                        43
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:バナーや広告などを一括管理できますか?
A:できます。

               広告を作成します。




                           44
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:バナーや広告などを一括管理できますか?
A:できます。




 文章の投稿画面に、広告を挿入する画面が表示されます。
                          45
さくらWORKS関内(1)
      プラグインQ&A豆知識

Q:表示が重い時の対応策はありますか?
A:あります。
 いくつかの方法があると思いますが、
 ここではプラグインで解決する方法をご紹介します。
 「WP Super Cache」というプラグインをインストールします。
 「WP Super Cache」は、キャッシュを生成してくれるプラグインで、
 キャッシュされたページが表示されるので、表示が高速化されます。

 これで、ホームページの表示が早くなります!



                                          46
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:表示が重い時の対応策はありますか?
A:あります。

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




                                47
さくらWORKS関内(1)
     プラグインQ&A豆知識

Q:自動でバックアップを取る方法はありますか?
A:あります。
 いくつかの方法があると思いますが、
 ここではプラグインで解決する方法をご紹介します。
 まず、WordPressに元々備わっている機能として、
 管理画面のメニューから「エクスポート」機能があります。
 これで、手動でのバックアップ&他のブログサービスへの移行もできます。
 次に、「WP-DB-Backup」というプラグインをインストールする方法です。
 これは定期的なデータベースのバックアップの設定ができます。

 これを設定することで、データの自動的な定期バックアップが可能です!
                                      48
さくらWORKS関内(1)
    プラグインQ&A豆知識

Q:自動でバックアップを取る方法はありますか?
A:あります。




          「いますぐインストール」を
          クリックして、有効化します。


                           49
さくらWORKS関内(1)
      プラグインQ&A豆知識

Q:自動でバックアップを取る方法はありますか?
A:あります。


定期自動
バックアップが
可能です!




                          50
さくらWORKS関内(1)
     プラグインQ&A豆知識

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



                                    51
さくらWORKS関内(1)
     プラグインQ&A豆知識

Q:他のブログサービスからの移行、
  他のブログサービスへの移行は、できますか?
A:できます。


「インポート機能」




                          52
さくらWORKS関内(1)
     プラグインQ&A豆知識

Q:他のブログサービスからの移行、
  他のブログサービスへの移行は、できますか?
A:できます。


 「エクスポート機能」




                          53
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          54
さくらWORKS関内(1)
   既存のプラグインで作れる事例




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




                     55
さくらWORKS関内(1)
        既存のプラグインで作れる事例

さくらWORKS関内Twitter
http://wp00.sakuraworks.org/twitter/

                            Twitterのような一言コメント
                            ができるサイトを、「P2」テーマを
                            インストールすることで、実現。
                            新規ユーザー登録OKにすれば
                            不特定多数のユーザーが登録
                            できるサイトも作れます。

                                          56
さくらWORKS関内(1)
        既存のプラグインで作れる事例

さくらWORKS関内ショップサイト
http://wp00.sakuraworks.org/shop/

                         ECサイト(ショップサイト)を、
                         Welcartプラグインをインストール
                         することで、実現。
                         具体的な事例やカスタマイズは、
                         以下のURLを参照ください。
                         http://www.welcart.com/

                                             57
さくらWORKS関内(1)
        既存のプラグインで作れる事例

さくらWORKS関内SNS
http://wp00.sakuraworks.org/sns/


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

                                        58
さくらWORKS関内(1)
       既存のプラグインで作れる事例

さくらWORKS関内メールマガジン
http://wp00.sakuraworks.org/mailmagazine/


                         メールマガジン登録&投稿の
                         システムを、
                         Subscribe2プラグインと
                         Subscribe2 widgetプラグインを
                         インストールすることで、実現。


                                             59
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          60
さくらWORKS関内(1)
   既存のプラグインを組み合わせた事例



例えば・・・
3ヶ月くらい前、お花見のシーズンということで、
WordPressを使って、2日間掛けて、
東京のお花見スポットのサイトを作りました。



                       61
さくらWORKS関内(1)
       既存のプラグインを組み合わせた事例


東京お花見スポット.com
http://www.tokyo-hanami.com/




                               62
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

プラグインをインストールするだけ!




その地域の天気予報を   ・Twitterに「ツイートする」ボタン
自動で取得する。     ・Facebookの「いいね!」ボタン
             を自分のホームページに設置
             してソーシャルな流れを作れる。
                                    63
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

プラグインをインストールするだけ!




  携帯電話からのアクセスは、
  自動的に携帯サイトを表示する。




                        64
さくらWORKS関内(1)
   既存のプラグインを組み合わせた事例

プラグインをインストールするだけ!

               アクセスの多い順番に
               記事をリスト化する。




               各記事のコメント欄を
               一覧表示する。




                            65
さくらWORKS関内(1)
   既存のプラグインを組み合わせた事例

プラグインをインストールするだけ!

                   条件検索機能




                            66
さくらWORKS関内(1)
   既存のプラグインを組み合わせた事例

プラグインをインストールするだけ!




            メールフォーム


                       67
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressとAPIの連携(APIの活用事例)

                    各記事のお花見スポットを
                    Google Maps APIと連携して
                    自動で地図に表示させる。




                                     68
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressとAPIの連携(APIの活用事例)

               各記事のお花見スポットの画像を、
               Yahoo!デベロッパーネットワーク
               (YahooAPI)の画像検索APIで
               自動表示させる。




                               69
さくらWORKS関内(1)
     既存のプラグインを組み合わせた事例

WordPressとAPIの連携
(APIの活用事例)

  そのお花見スポットについて、
  Twitterの最新つぶやき15件を、
  ホームページに自動表示させる。




                         70
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressとAPIの連携(APIの活用事例)
               お花見スポットから近い順番に
               カフェやレストランを、自動的に、
               一覧表示する。

               この部分は、自動で
               アフィリエイトリンクになっていて
               成果に繋がる。




                              71
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressとAPIの連携(APIの活用事例)
               お花見スポットから近い順番に
               ホテルを、自動的に、
               一覧表示する。

               この部分は、自動で
               アフィリエイトリンクになっていて
               成果に繋がる。




                                72
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressに元々備わっている機能

                    WordPressのコメント欄を
                    カスタマイズ




                                  73
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

WordPressに元々備わっている機能

               WordPressのカスタムフィールド




                                 74
さくらWORKS関内(1)
    既存のプラグインを組み合わせた事例

以上のように、
WordPressをプラットフォームとして、
デフォルトテーマである「TwentyTen」の子テーマ、
WordPressのプラグイン、jQueryのライブラリ、
各会社が提供しているWEBAPI、
を組み合わせることで、短時間で作成ができます。

詳しくは、
http://www.tokyo-hanami.com/web.html
に書いてありますので、ご興味のある方はご覧ください。

                                       75
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          76
さくらWORKS関内(1)
     WordPressの情報の調べ方や勉強会

  調べ方(インターネットで調べる編)

・WordPress Codex 日本語版
 http://wpdocs.sourceforge.jp/
 (英語版のWordPressのCodexを日本語化している)
・WordPressのフォーラムに質問する。
 http://ja.forums.wordpress.org/
・その他、「WordPress (調べたい事)」で検索する。

                              77
さくらWORKS関内(1)
     WordPressの情報の調べ方や勉強会

   調べ方(書籍で調べる編)

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

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

  調べ方(無料で人に聞いてみる編)

・WordPressの日本語公式サイトのイベントカレンダー
・IT勉強会カレンダー
・ATND
・WordBench
などで、IT関係のカンファレンスや勉強会を探すことが
可能です。

                           80
さくらWORKS関内(1)
      WordPressの情報の調べ方や勉強会

  開発プロジェクト

・WordPress 日本語作成チーム
  http://groups.google.com/group/wp-ja-pkg
・日本語版 Codex
  http://wpdocs.sourceforge.jp/
・WordPress Plugins/JSeries
  http://wppluginsj.sourceforge.jp/

                                             81
さくらWORKS関内(1)
  WordPressの情報の調べ方や勉強会

WordCamp

            ・ユーザー・開発者が集うイベント
            ・世界40以上の都市で開催
            ・世界中で150回以上の開催実績
            ・日本では年に2~3回
            ・今までに
             東京・京都・福岡・横浜・名古屋


                          82
さくらWORKS関内(1)
        WordPressの情報の調べ方や勉強会

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

WordBench写真部


             ・一眼レフカメラ、写真好きが多い
             ・写真を撮る旅行も




                           84
さくらWORKS関内(1)
  WordPressの情報の調べ方や勉強会

WordBench料理部


               ・料理を作ったり
               ・料理を食べに行ったり




                             85
さくらWORKS関内(1)
    WordPressの情報の調べ方や勉強会

  WordBenchもくもく部




・WordPress に関するワークショップ
・サイトのテーマ改良/プラグイン作成/
 WordPressドキュメントの翻訳/写真作品の仕上げ等
                                86
さくらWORKS関内(1)
    WordPressの情報の調べ方や勉強会

 WordPressで繋がろう!

WordPressのコミュニティでは、
インターネット上はもちろん、
実際の情報交換や交流もあって、楽しい!
WordPressのプラグイン開発者やテーマ開発者のお話を
生で聞くことができます。
IT関係者と知り合うにも、とても良い場です!
その後のご縁も広がります。

                                87
さくらWORKS関内(1)
 目次
0. 自己紹介
1. WordPress活用事例
2. 既存のテーマを入れる
3. 既存のプラグインを入れる
4. プラグインQ&A豆知識
5. 既存のプラグインで作れる事例
6. 既存のプラグインを組み合わせた事例
7. WordPressの情報の調べ方や勉強会
8. 質疑応答
                          88
さくらWORKS関内(1)
 最後に

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

More Related Content

PPTX
Spring Boot ユーザの方のための Quarkus 入門
PDF
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
PDF
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
PDF
Aws lambdaで[ソンナコ]を実装してみた
PDF
WordBench熊本Vagrant勉強会
PPTX
LinAction Theme Docker
PDF
世界の最前線!VagrantやWP-CLIなどで開発環境をパワーアップ!
PDF
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!
Spring Boot ユーザの方のための Quarkus 入門
中級者のためのWordPress講座[第5回]携帯電話やスマートフォンからの閲覧に対応させてみよう!
中級者のためのWordPress講座[第2回]WordPressテーマをカスタマイズしてみよう!
Aws lambdaで[ソンナコ]を実装してみた
WordBench熊本Vagrant勉強会
LinAction Theme Docker
世界の最前線!VagrantやWP-CLIなどで開発環境をパワーアップ!
中級者のためのWordPress講座[第6回]WordPressをマルチサイト化(複数ブログ化)してみよう!

What's hot (20)

PDF
2014 01-11-tdc-6th-anniversary
PDF
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
PDF
WordCamp Kansai 2014 セキュリティ&バックアップ
PPTX
Azureで始めるDevOps
PDF
WCK2014[ハンズオン] 体験して学ぶ はじめてのブログ・サイト制作 〜WordPress.comでサイトを作ってみよう〜
PDF
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
PDF
SoftLayer Bluemix Community Festa 2016 はじめてのSoftLayer
PDF
標的型攻撃メール対応訓練実施キット試用版・ご利用の手引き
PDF
WordPress 環境の構築について考えてみた
PDF
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
PPTX
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
PDF
もう一度基礎から!WordPress勉強会
PPTX
60分でわかった気になるMicrosoft Azure
PDF
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
PPTX
2012 jaws ug紹介(福岡ug版)
PDF
Microsoft Azure 概要
PDF
サーバー設定自動化は経営課題
PDF
簡単!自動バックアップ設定でWordPressを安心運用
PDF
WordPressプラグインの作り方
PDF
Windows Azureを利用したDevOps入門
2014 01-11-tdc-6th-anniversary
「やりたい!」が「できた!」に変わる。チームで作るWebサービス〜Scoobの場合〜
WordCamp Kansai 2014 セキュリティ&バックアップ
Azureで始めるDevOps
WCK2014[ハンズオン] 体験して学ぶ はじめてのブログ・サイト制作 〜WordPress.comでサイトを作ってみよう〜
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
SoftLayer Bluemix Community Festa 2016 はじめてのSoftLayer
標的型攻撃メール対応訓練実施キット試用版・ご利用の手引き
WordPress 環境の構築について考えてみた
WordCamp Haneda 2019 WordPress初心者のためのサイト運営虎の巻 #wchaneda
Oculus Quest 1&2 開発のはじめの一歩 with A-Frame WebVR
もう一度基礎から!WordPress勉強会
60分でわかった気になるMicrosoft Azure
JRoRの力をJava EE技術を使ってさらに高める10の方法(発動編)
2012 jaws ug紹介(福岡ug版)
Microsoft Azure 概要
サーバー設定自動化は経営課題
簡単!自動バックアップ設定でWordPressを安心運用
WordPressプラグインの作り方
Windows Azureを利用したDevOps入門
Ad

Viewers also liked (20)

PDF
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
PDF
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
PDF
中級者のためのWordPress講座[第4回]WordPressと外部のWEBAPIと連携させてみよう!
PPT
Leszek Stypendium z wyboru 2011
PPTX
Jacqueline Fasano Visual Resume
DOC
Huong dan on tap toan 6 hki va de tham khao
PPT
大话Ssd(淘宝核心系统数据库组 褚霸)
PDF
Buku Panduan Cekap Tenaga
PDF
Ebook penyaman udara-edisi okt2013
PDF
Siri Nota Prosedur PPU (preview)
PDF
942 sp geografi stpm
PDF
Notapenyamanudara edisikedua
PDF
Alat Ganti Penyaman Udara
PPTX
Phosphorimetry
PDF
Panduan Menservis Unit Pisah
PDF
Ebook Penyaman Udara
PPT
Pengurusan Panitia Berkesan
PPT
Tatacara pengurusan aset alih kerajaan
中級者のためのWordPress講座[第3回]カスタムフィールドを使ってみよう!
WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編
中級者のためのWordPress講座[第4回]WordPressと外部のWEBAPIと連携させてみよう!
Leszek Stypendium z wyboru 2011
Jacqueline Fasano Visual Resume
Huong dan on tap toan 6 hki va de tham khao
大话Ssd(淘宝核心系统数据库组 褚霸)
Buku Panduan Cekap Tenaga
Ebook penyaman udara-edisi okt2013
Siri Nota Prosedur PPU (preview)
942 sp geografi stpm
Notapenyamanudara edisikedua
Alat Ganti Penyaman Udara
Phosphorimetry
Panduan Menservis Unit Pisah
Ebook Penyaman Udara
Pengurusan Panitia Berkesan
Tatacara pengurusan aset alih kerajaan
Ad

Similar to 中級者のためのWordPress講座[第1回]既存のプラグインを組み合わせることでWEBサービスを作ってみよう! (20)

PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PDF
20110706 wordpress in sakuraworks
KEY
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
KEY
Prejob wordpress v2_1121
KEY
Prejob wordpress v2_1121
PDF
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
PDF
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
PDF
4時間まったりWordPressテーマ作成講座
KEY
WordPress中級者への道!テンプレートタグはどう動くのか!?
KEY
WordPressってブログじゃないの?
PDF
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
PDF
第3回WordPress Cafe プラグイン紹介
PDF
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
PDF
コードをさわらずにビジネスサイトを作ろう!
PDF
WordPress を使いこなそう
PDF
12 総合演習Word Pressの利用
PDF
WordPressでウェブサービスを作ろう! #wbNagoya
PDF
OSC Kobe 2010
PDF
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
PDF
WordPress+不動産プラグイン活用例
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
20110706 wordpress in sakuraworks
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
Prejob wordpress v2_1121
Prejob wordpress v2_1121
世界標準ブログツール WordPressの最新版3.0と豊富なプラグイン
日本語フォーラムで回答してみよう!~誰でも出来るWordPressへの貢献〜
4時間まったりWordPressテーマ作成講座
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPressってブログじゃないの?
クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に WordPress を拡張していくためのフレームワーク思考 |...
第3回WordPress Cafe プラグイン紹介
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
コードをさわらずにビジネスサイトを作ろう!
WordPress を使いこなそう
12 総合演習Word Pressの利用
WordPressでウェブサービスを作ろう! #wbNagoya
OSC Kobe 2010
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
WordPress+不動産プラグイン活用例

中級者のためのWordPress講座[第1回]既存のプラグインを組み合わせることでWEBサービスを作ってみよう!

  • 1. さくらWORKS関内(1) 第1回 既存のプラグインを組み合わせることで WEBサービスを作ってみよう! 株式会社コミュニティコム 星野 邦敏 〒116-0013 東京都荒川区西日暮里5-37-5 NSO2階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
  • 2. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 2
  • 3. さくらWORKS関内(1) 自己紹介 星野 邦敏(ほしの くにとし) Twitter : @khoshino Facebook : 星野邦敏(Kunitoshi Hoshino) 株式会社コミュニティコムという会社で、 自社運営サイトや他企業様のWEBサイトやアプリを作っています。 オープンソースの活動をしたり、IT系の勉強会を主催したり、 地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。 3
  • 4. さくらWORKS関内(1) 自己紹介 WordPressのイベントである「WordCamp」京都・横浜・名古屋に、 スタッフやスピーカーとして関わりました。 その他、WordPress地域コミュニティ「WordBench」に参加したり、 OSCにWordPressのブース出展する等、関わっています。 4
  • 5. さくらWORKS関内(1) 自己紹介 WordCamp京都では、 WordPressのコミュニティ活動 についてのライトニングトークを、 WordCamp名古屋では、 「WordPressファーストステップ」 という45分のセッションを、 担当しました。 (WordCamp名古屋にて、杉本さん撮影) WordPressを使ってみよう!インストールの仕方、最初の記事投稿、 テーマとプラグインの追加、オリジナルテーマの作り方など、初心者向けセッション。 5
  • 6. さくらWORKS関内(1) 自己紹介 WordPress日本語サイトの「イベントカレンダー」を更新する係。 もし掲載されていないWP関係のイベントや勉強会があれば、 Twitter経由などで、お知らせください! ココ 6
  • 7. さくらWORKS関内(1) 自己紹介 (1)自社サイトの運営 このサイトは、WordPress! 例えば・・・ http://zeirishi-community.com/ http://www.tokyo-hanami.com/ 7
  • 8. さくらWORKS関内(1) 自己紹介 (2)CMSパッケージによるWEB作成受注請負 例えば・・・ これらのサイトも、WordPress! http://www.jctsc.co.jp/ http://www.afl-hoken.com/ 8
  • 9. さくらWORKS関内(1) 自己紹介 (3)その他 WEBやインターネットに関する講師 iPhoneアプリやAndroidアプリの制作 9
  • 10. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 10
  • 11. さくらWORKS関内(1) WordPress活用事例 ブログとしても BOOK・OFFスタッフブログ (「WordPress を使ったサイト – WordPress Codex 日本語版」より引用) http://wpdocs.sourceforge.jp/%E5%88%A 9%E7%94%A8%E8%80%85:Nao/Word Press_%E3%82%92%E4%BD%BF%E Photoshop Vip 3%81%A3%E3%81%9F%E3%82%B5% E3%82%A4%E3%83%88 IDEA*IDEA 11
  • 12. さくらWORKS関内(1) WordPress活用事例 マガジンサイトとしても ロイター通信 (「WordPress を使ったサイト – WordPress Codex 日本語版」より引用) http://wpdocs.sourceforge.jp/%E5%88%A 9%E7%94%A8%E8%80%85:Nao/Word TechCrunch Japan Press_%E3%82%92%E4%BD%BF%E 3%81%A3%E3%81%9F%E3%82%B5% E3%82%A4%E3%83%88 美的.com 12
  • 13. さくらWORKS関内(1) WordPress活用事例 会社のサイトとしても さいたまスーパーアリーナ (「WordPress を使ったサイト – WordPress Codex 日本語版」より引用) http://wpdocs.sourceforge.jp/%E5%88%A 9%E7%94%A8%E8%80%85:Nao/Word クックパッド株式会社 株式会社ベクター Press_%E3%82%92%E4%BD%BF%E IR・会社情報サイト 3%81%A3%E3%81%9F%E3%82%B5% E3%82%A4%E3%83%88 13
  • 14. さくらWORKS関内(1) WordPress活用事例 学校のサイトとしても 長岡工業高等専門学校 (「WordPress を使ったサイト – WordPress Codex 日本語版」より引用) http://wpdocs.sourceforge.jp/%E5%88%A 9%E7%94%A8%E8%80%85:Nao/Word 昭和女子大学 神戸芸術工科大学 Press_%E3%82%92%E4%BD%BF%E 3%81%A3%E3%81%9F%E3%82%B5% E3%82%A4%E3%83%88 14
  • 15. さくらWORKS関内(1) WordPress活用事例 海外のサイトとしても PEPSI (ペプシ)のブログ (「WordPress を使ったサイト – WordPress Codex 日本語版」より引用) http://wpdocs.sourceforge.jp/%E5%88%A 9%E7%94%A8%E8%80%85:Nao/Word Nikon フォルクスワーゲン Press_%E3%82%92%E4%BD%BF%E 3%81%A3%E3%81%9F%E3%82%B5% E3%82%A4%E3%83%88 15
  • 16. さくらWORKS関内(1) WordPress活用事例 ・・・と、以上のサイトは、有名な企業や大学など でのWordPress制作事例です。 これらのサイトを作るには、WordPressの 「テーマ」をカスタマイズする必要があります。 それは第2回目以降に行うとして、今回は、 既存のプラグイン&テーマで作れる WEBサービスをご紹介いたします。 16
  • 17. さくらWORKS関内(1) WordPress活用事例 WordPressの活用方法 1.ブログとして使う。 2.ポータルサイトとして使う。 3.ブログ運営側として使う。 4.APIやCSVデータと連動させて使う。 5.ニュース集約配信サイトとして使う。 6.メールマガジン配信サイトとして使う。 7.SNS(会員制サイト)として使う。 8.Twitterと連動させたサイトとして使う。 ・・・・・・などなど、WordPressの使い方はアイデア次第! 17
  • 18. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 18
  • 20. さくらWORKS関内(1) 既存のテーマを入れる テーマフォルダの確認 wp-admin / wp-content / languages / wp-includes / plugins / index.php themes / twentyten / license.txt upgrade / index.php readme-ja.html uploads / readme.html index.php ココに wp-activate.php テーマフォルダ wp-app.php wp-atom.php を入れる! 20
  • 24. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 24
  • 26. さくらWORKS関内(1) 既存のプラグインを入れる プラグインフォルダの確認 wp-admin / wp-content / languages / wp-includes / plugins / akismet / index.php themes / wp-multibyte-patch / license.txt upgrade / hello.php readme-ja.html uploads / index.php readme.html index.php wp-activate.php ココに wp-app.php プラグインフォルダ wp-atom.php を入れる! 26
  • 29. さくらWORKS関内(1) 既存のプラグインを入れる デフォルトのプラグインのご紹介 ・Akismet コメントスパム対策 ・WP Multibyte Patch 有効化すると使えます! マルチバイト文字による不具合の修正と強化 29
  • 30. さくらWORKS関内(1) 既存のプラグインを入れる プラグインの具体例 ・Welcart ショッピングサイト構築 ・Contact Form 7 ・BuddyPress お問い合わせメールフォームを作成 SNS構築 ・Ktai Style ・Subscribe2 日本の携帯電話対応 メールマガジン構築 ・PS Auto Sitemap ・Admin SSL サイトマップを自動で作成 SSL対応 ・Custom Field Template ・WP Super Cache カスタムフィールドのテンプレートを簡単に設定 キャッシュ生成、表示の高速化 その他、「WordPress プラグイン」などで検索すると、 素敵なプラグインが見つかります! 30
  • 31. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 31
  • 32. さくらWORKS関内(1) プラグインQ&A豆知識 Q:携帯サイトに対応できますか? A:できます。 「Ktai Style」というプラグインをインストールします。 http://wppluginsj.sourceforge.jp/ktai_style/ 「Ktai Style」を使うと、ユーザーエージェントにより、自動的に、 PCからの閲覧と、携帯からの閲覧を振り分けてくれます。 つまり、PCサイトと携帯サイトを同一URLで表示を切り替えられます。 これで、携帯電話からのアクセスにも自動で対応されるので、 アクセスアップに繋がります! 32
  • 33. さくらWORKS関内(1) プラグインQ&A豆知識 Q:携帯サイトに対応できますか? A:できます。 「いますぐインストール」を クリックして、有効化します。 33
  • 34. さくらWORKS関内(1) プラグインQ&A豆知識 Q:携帯サイトに対応できますか? A:できます。 「Ktai Style」プラグインを有効化すると 管理画面のメニューに左のような項目が 追加されるので、 携帯表示の設定ができます。 34
  • 35. さくらWORKS関内(1) プラグインQ&A豆知識 Q:携帯サイトに対応できますか? A:できます。 同じURLでも、 「PCサイト」と「携帯サイト」で、 このように見え方が 端末に応じて変わります。 東京お花見スポット.com http://www.tokyo-hanami.com/ 35
  • 36. さくらWORKS関内(1) プラグインQ&A豆知識 Q:携帯サイトに対応できますか? A:できます。 同じURLでも、 「PCサイト」と「携帯サイト」で、 このように見え方が 端末に応じて変わります。 東京お花見スポット.com http://www.tokyo- hanami.com/asukayama.html 36
  • 37. さくらWORKS関内(1) プラグインQ&A豆知識 Q:PCと携帯のリンクを自動で振り分けできますか? A:できます。 「Ktai Style 2.1 ベータ版」をインストールします。 http://www.yuriko.net/arc/2010/05/10/ktaistyle-210-beta1/ PCだけのコンテンツ、携帯だけのコンテンツを、それぞれ [ pc-only ]...[ /pc-only ] と [ mobile-only ]...[ /mobile-only ] に指定できます。 これにより、PCと携帯で、表示させたい文章や画像が異なる場合でも、 PCにはPCのリンクだけ、携帯には携帯のリンクだけ、表示できます。 この方法は、次のKtai Styleのバージョンアップの際に正式版になるので、 互換性が保証される使い方で、オススメです。 37
  • 38. さくらWORKS関内(1) プラグインQ&A豆知識 Q:PCと携帯のリンクを自動で振り分けできますか? [pc-only]...[/pc-only] A:できます。 [mobile-only]...[/mobile-only] で振り分ける。 38
  • 39. さくらWORKS関内(1) プラグインQ&A豆知識 Q:PCと携帯のリンクを自動で振り分けできますか? A:できます。 PCサイト用バナーと、携帯サイト用バナーで、 同じURLで表示を分けられます。 39
  • 40. さくらWORKS関内(1) プラグインQ&A豆知識 Q:スマートフォンサイトに対応できますか? A:できます。 方法は、大きく2通りあります。 (1)1つ目は、「WPtouch」というプラグインです。 このプラグインを入れるだけで、スマートフォン端末からの閲覧は 自動的にスマートフォンになります。海外では主流の方法です。 (2)2つ目は、さきほどの「Ktai Style」の管理画面のテーマ設定項目で、 「iPhone, Android用」という項目があるので、それを有効化します。 その上で、スマートフォン用テーマを作ると、自由度が増します。 これで、スマートフォンからのアクセスにも対応できます! 40
  • 41. さくらWORKS関内(1) プラグインQ&A豆知識 Q:スマートフォンサイトに対応できますか? A:できます。 「WPtouch」プラグイン をインストールして 有効化すると、 スマートフォン対応が 自動でされます。 41
  • 42. さくらWORKS関内(1) プラグインQ&A豆知識 Q:バナーや広告などを一括管理できますか? A:できます。 「Advertising Manager」というプラグインをインストールします。 このプラグインで広告管理をすれば、 例えば、複数の記事に同じバナーや広告を貼った場合にも、 「Advertising Manager」の管理画面から貼り替えるだけで、 全ての記事に反映されます。 これで、バナーや広告のリンク切れの管理が簡単になり、 リンクの貼り替えの作業時間を大幅に短縮できます! 42
  • 43. さくらWORKS関内(1) プラグインQ&A豆知識 Q:バナーや広告などを一括管理できますか? A:できます。 「Advertising Manager」 プラグインをインストールして 有効化すると、 管理画面に、右側のような メニューが表示されます。 43
  • 44. さくらWORKS関内(1) プラグインQ&A豆知識 Q:バナーや広告などを一括管理できますか? A:できます。 広告を作成します。 44
  • 45. さくらWORKS関内(1) プラグインQ&A豆知識 Q:バナーや広告などを一括管理できますか? A:できます。 文章の投稿画面に、広告を挿入する画面が表示されます。 45
  • 46. さくらWORKS関内(1) プラグインQ&A豆知識 Q:表示が重い時の対応策はありますか? A:あります。 いくつかの方法があると思いますが、 ここではプラグインで解決する方法をご紹介します。 「WP Super Cache」というプラグインをインストールします。 「WP Super Cache」は、キャッシュを生成してくれるプラグインで、 キャッシュされたページが表示されるので、表示が高速化されます。 これで、ホームページの表示が早くなります! 46
  • 47. さくらWORKS関内(1) プラグインQ&A豆知識 Q:表示が重い時の対応策はありますか? A:あります。 「WP Super Cache」 プラグインを インストールして、 「キャッシングを利用」に するだけです! 47
  • 48. さくらWORKS関内(1) プラグインQ&A豆知識 Q:自動でバックアップを取る方法はありますか? A:あります。 いくつかの方法があると思いますが、 ここではプラグインで解決する方法をご紹介します。 まず、WordPressに元々備わっている機能として、 管理画面のメニューから「エクスポート」機能があります。 これで、手動でのバックアップ&他のブログサービスへの移行もできます。 次に、「WP-DB-Backup」というプラグインをインストールする方法です。 これは定期的なデータベースのバックアップの設定ができます。 これを設定することで、データの自動的な定期バックアップが可能です! 48
  • 49. さくらWORKS関内(1) プラグインQ&A豆知識 Q:自動でバックアップを取る方法はありますか? A:あります。 「いますぐインストール」を クリックして、有効化します。 49
  • 50. さくらWORKS関内(1) プラグインQ&A豆知識 Q:自動でバックアップを取る方法はありますか? A:あります。 定期自動 バックアップが 可能です! 50
  • 51. さくらWORKS関内(1) プラグインQ&A豆知識 Q:他のブログサービスからの移行、 他のブログサービスへの移行は、できますか? A:できます。 WordPressに元々備わっている機能である、 「インポート」機能で、他のブログサービスからWordPressへの移行が できます。 「エクスポート」機能で、WordPressから他のブログサービスへの移行が できます。 51
  • 52. さくらWORKS関内(1) プラグインQ&A豆知識 Q:他のブログサービスからの移行、 他のブログサービスへの移行は、できますか? A:できます。 「インポート機能」 52
  • 53. さくらWORKS関内(1) プラグインQ&A豆知識 Q:他のブログサービスからの移行、 他のブログサービスへの移行は、できますか? A:できます。 「エクスポート機能」 53
  • 54. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 54
  • 55. さくらWORKS関内(1) 既存のプラグインで作れる事例 既存のプラグインをインストールするだけで 実現できるWEBサービスを作ってみましょう! 55
  • 56. さくらWORKS関内(1) 既存のプラグインで作れる事例 さくらWORKS関内Twitter http://wp00.sakuraworks.org/twitter/ Twitterのような一言コメント ができるサイトを、「P2」テーマを インストールすることで、実現。 新規ユーザー登録OKにすれば 不特定多数のユーザーが登録 できるサイトも作れます。 56
  • 57. さくらWORKS関内(1) 既存のプラグインで作れる事例 さくらWORKS関内ショップサイト http://wp00.sakuraworks.org/shop/ ECサイト(ショップサイト)を、 Welcartプラグインをインストール することで、実現。 具体的な事例やカスタマイズは、 以下のURLを参照ください。 http://www.welcart.com/ 57
  • 58. さくらWORKS関内(1) 既存のプラグインで作れる事例 さくらWORKS関内SNS http://wp00.sakuraworks.org/sns/ オープン型SNS(会員制サイト)を、 BuddyPressプラグインを インストールすることで、実現。 新規ユーザー登録OKにすれば 不特定多数のユーザーが登録 することのできるサイトも作れます。 58
  • 59. さくらWORKS関内(1) 既存のプラグインで作れる事例 さくらWORKS関内メールマガジン http://wp00.sakuraworks.org/mailmagazine/ メールマガジン登録&投稿の システムを、 Subscribe2プラグインと Subscribe2 widgetプラグインを インストールすることで、実現。 59
  • 60. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 60
  • 61. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 例えば・・・ 3ヶ月くらい前、お花見のシーズンということで、 WordPressを使って、2日間掛けて、 東京のお花見スポットのサイトを作りました。 61
  • 62. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 東京お花見スポット.com http://www.tokyo-hanami.com/ 62
  • 63. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 プラグインをインストールするだけ! その地域の天気予報を ・Twitterに「ツイートする」ボタン 自動で取得する。 ・Facebookの「いいね!」ボタン を自分のホームページに設置 してソーシャルな流れを作れる。 63
  • 64. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 プラグインをインストールするだけ! 携帯電話からのアクセスは、 自動的に携帯サイトを表示する。 64
  • 65. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 プラグインをインストールするだけ! アクセスの多い順番に 記事をリスト化する。 各記事のコメント欄を 一覧表示する。 65
  • 66. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 プラグインをインストールするだけ! 条件検索機能 66
  • 67. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 プラグインをインストールするだけ! メールフォーム 67
  • 68. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressとAPIの連携(APIの活用事例) 各記事のお花見スポットを Google Maps APIと連携して 自動で地図に表示させる。 68
  • 69. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressとAPIの連携(APIの活用事例) 各記事のお花見スポットの画像を、 Yahoo!デベロッパーネットワーク (YahooAPI)の画像検索APIで 自動表示させる。 69
  • 70. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressとAPIの連携 (APIの活用事例) そのお花見スポットについて、 Twitterの最新つぶやき15件を、 ホームページに自動表示させる。 70
  • 71. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressとAPIの連携(APIの活用事例) お花見スポットから近い順番に カフェやレストランを、自動的に、 一覧表示する。 この部分は、自動で アフィリエイトリンクになっていて 成果に繋がる。 71
  • 72. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressとAPIの連携(APIの活用事例) お花見スポットから近い順番に ホテルを、自動的に、 一覧表示する。 この部分は、自動で アフィリエイトリンクになっていて 成果に繋がる。 72
  • 73. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressに元々備わっている機能 WordPressのコメント欄を カスタマイズ 73
  • 74. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 WordPressに元々備わっている機能 WordPressのカスタムフィールド 74
  • 75. さくらWORKS関内(1) 既存のプラグインを組み合わせた事例 以上のように、 WordPressをプラットフォームとして、 デフォルトテーマである「TwentyTen」の子テーマ、 WordPressのプラグイン、jQueryのライブラリ、 各会社が提供しているWEBAPI、 を組み合わせることで、短時間で作成ができます。 詳しくは、 http://www.tokyo-hanami.com/web.html に書いてありますので、ご興味のある方はご覧ください。 75
  • 76. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 76
  • 77. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 調べ方(インターネットで調べる編) ・WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ (英語版のWordPressのCodexを日本語化している) ・WordPressのフォーラムに質問する。 http://ja.forums.wordpress.org/ ・その他、「WordPress (調べたい事)」で検索する。 77
  • 78. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 調べ方(書籍で調べる編) ・WordPressに関する本は、十数冊、出版されている。 WordPressのバージョンが2系だった頃の情報は 古い場合があるので、3系以降の本を参考にする。 具体的には、2010年6月以降出版の本を参考にする。 amazonや楽天で、出版日付順などでソートしてみる。 ・書籍は、初心者向け、技術者向け、テーマカスタマイズ に特化、プラグインに特化、など、色々。 78
  • 79. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 調べ方(無料で人に聞いてみる編) ・WordPressは、カンファレンスや勉強会が盛んで、 その多くは無料や場所代だけなので、参加してみる。 WEB業界やIT業界の人間も多く参加しているので、 情報交換や交流には、最適な場。 ・WordPressのカンファレンスや勉強会としては、 (1)WordCamp、(2)WordBench、 (3)OSC(オープンソースカンファレンス)などが あります。 79
  • 80. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 調べ方(無料で人に聞いてみる編) ・WordPressの日本語公式サイトのイベントカレンダー ・IT勉強会カレンダー ・ATND ・WordBench などで、IT関係のカンファレンスや勉強会を探すことが 可能です。 80
  • 81. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 開発プロジェクト ・WordPress 日本語作成チーム http://groups.google.com/group/wp-ja-pkg ・日本語版 Codex http://wpdocs.sourceforge.jp/ ・WordPress Plugins/JSeries http://wppluginsj.sourceforge.jp/ 81
  • 82. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordCamp ・ユーザー・開発者が集うイベント ・世界40以上の都市で開催 ・世界中で150回以上の開催実績 ・日本では年に2~3回 ・今までに 東京・京都・福岡・横浜・名古屋 82
  • 83. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordBench ・各地域のユーザーコミュニティ ・現在、全国各地 約40地域 ・毎月、日本のどこかで勉強会や 交流会を開催 ・BuddyPressプラグインによる オープンSNS ・写真部、英語部、料理部、 http://wordbench.org/ もくもく部なども 83
  • 84. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordBench写真部 ・一眼レフカメラ、写真好きが多い ・写真を撮る旅行も 84
  • 85. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordBench料理部 ・料理を作ったり ・料理を食べに行ったり 85
  • 86. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordBenchもくもく部 ・WordPress に関するワークショップ ・サイトのテーマ改良/プラグイン作成/ WordPressドキュメントの翻訳/写真作品の仕上げ等 86
  • 87. さくらWORKS関内(1) WordPressの情報の調べ方や勉強会 WordPressで繋がろう! WordPressのコミュニティでは、 インターネット上はもちろん、 実際の情報交換や交流もあって、楽しい! WordPressのプラグイン開発者やテーマ開発者のお話を 生で聞くことができます。 IT関係者と知り合うにも、とても良い場です! その後のご縁も広がります。 87
  • 88. さくらWORKS関内(1) 目次 0. 自己紹介 1. WordPress活用事例 2. 既存のテーマを入れる 3. 既存のプラグインを入れる 4. プラグインQ&A豆知識 5. 既存のプラグインで作れる事例 6. 既存のプラグインを組み合わせた事例 7. WordPressの情報の調べ方や勉強会 8. 質疑応答 88
  • 89. さくらWORKS関内(1) 最後に 今後のお問い合わせなど 何かありましたら、 Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。 ありがとうございました! 株式会社コミュニティコム 星野 邦敏 89