PowerPoint プレゼンテーション

(1)

株式会社コミュニティコム

〒116-0013

東京都荒川区西日暮里5-37-5 NSO2階

URL： http://www.communitycom.jp/

(2)

2 ０．自己紹介２． WebAPI（クロスオーバーサーチ）を使ってみる １． _{WordPressについて} ３． _{WordPressのテーマやプラグイン紹介} WordPressマネタイズセミナー 目次４． CSV（マーチャンダイザー）を使ってみる ５． _{WordPressで携帯＆スマートフォンに対応} ６．今後の情報収集の方法＆質疑応答

(3)

０．自己紹介２． WebAPI（クロスオーバーサーチ）を使ってみる １． _{WordPressについて} ３． _{WordPressのテーマやプラグイン紹介} WordPressマネタイズセミナー 目次４． CSV（マーチャンダイザー）を使ってみる ５． _{WordPressで携帯＆スマートフォンに対応}

(4)

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

Facebook : 星野邦敏（Kunitoshi Hoshino）

WordPressマネタイズセミナー 自己紹介

(5)

WordPressのイベントである

「WordCamp」や「WordBench」に スタッフやスピーカーとして参加。

(6)

6 WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ

(7)

公式ディレクトリにプラグインを登録したり。 Japan Tenkiプラグイン →全国142地域の天気を自動表示 Hello Wapuuプラグイン WordPressマネタイズセミナー 自己紹介

(8)

8 WordPressに関して、書籍や雑誌で執筆をしたり。 2012年1月に出版 web creators特別号 Webサイト制作最新トレンドの傾向と対策 WordPressマネタイズセミナー 自己紹介 2012年2月に出版予定 速習デザインWordPress

(9)

０．自己紹介２． WebAPI（クロスオーバーサーチ）を使ってみる １． _{WordPressについて} ３． _{WordPressのテーマやプラグイン紹介} WordPressマネタイズセミナー 目次４． CSV（マーチャンダイザー）を使ってみる ５． _{WordPressで携帯＆スマートフォンに対応}

(10)

10

サンプルサイト

母の日ギフト人気ランキング2012

http://mama-gift.com/

WordPressマネタイズセミナー WordPressについて

(11)

WordPressマネタイズセミナー

WebAPI（マーチャンダイザー）を使ってみる

WordPressとAPIの連携（APIの活用事例）

「クロスオーバーサーチ」を利用。

(12)

12

「セール＆クーポンサーチ」を利用。

(13)

WordPressとCSVの連携（CSVの活用事例）

「マーチャンダイザー」を利用。

(14)

14

サンプルサイト

海外旅行の格安航空券＆ホテルMAP

http://all-hotel.net/

(15)

サンプルサイト

海外旅行の格安航空券＆ホテルMAP http://all-hotel.net/ WordPressマネタイズセミナー WordPressについて 「マーチャンダイザー」を利用して、約１５万件のホテル情報を１ホテル１ページで一括作成。

(16)

16

サンプルサイト

水族館コミュニティ

http://www.japan-aquarium.com/

(17)

同一URLで、

PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの

振り分けを自動で実現。

(18)

18 ・Twitterに「ツイートする」ボタン ・Facebookの「いいね！」ボタン などを、自分のサイトに設置してソーシャルな流れを作れる。プラグインをインストールするだけ！ WordPressマネタイズセミナー WordPressについて

(19)

プラグインをインストールするだけ！クリック一つで口コミ評価を出来るようにする。＆口コミ評価一覧リストをサイドバーに表示する。 WordPressマネタイズセミナー WordPressについて

(20)

20 プラグインをインストールするだけ！アクセスの多い記事順に自動でリスト化する。 WordPressマネタイズセミナー WordPressについて

(21)

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

プラグインをインストールするだけ！ WordPressマネタイズセミナー WordPressについて

(22)

22

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

条件検索機能

(23)

プラグインをインストールするだけ！スマートフォンや携帯電話からのアクセスは、スマートフォンサイト・携帯サイトを WordPressマネタイズセミナー WordPressについて

(24)

24

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

メールフォーム

(25)

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

WordPressの

カスタムフィールド

(26)

26

新着記事をトップページに表示。

(27)

他のブログの更新情報を

RSSで自動取得して表示。

(28)

28 WordPressの コメント欄を少しだけカスタマイズ WordPressに元々備わっている機能 WordPressマネタイズセミナー WordPressについて

(29)

サイトのデザインは、 WordPressの デフォルトテーマ 「Twenty Ten」を、 子テーマにして、少しだけカスタマイズしただけ。 WordPressに元々備わっている機能 WordPressマネタイズセミナー WordPressについて

(30)

30 各地域の天気予報を自動で取得する。 WordPressとAPIの連携（APIの活用事例） WordPressマネタイズセミナー WordPressについて

(31)

各記事の水族館の位置を

Google Maps APIと連携して

自動で地図に一覧表示させる。＆

近いスポットはピンをまとめる。

(32)

32 WordPressとAPIの連携（APIの活用事例） そのスポットの周辺の写真を自動で表示させる。 WordPressマネタイズセミナー WordPressについて

(33)

各記事に関連する画像を自動表示する。

(34)

34 その水族館について、 Twitterの最新つぶやきを 自動表示させる。 WordPressとAPIの連携 （APIの活用事例） WordPressマネタイズセミナー WordPressについて

(35)

WordPressとAPIの連携（APIの活用事例） そのスポットから２点間の直線距離の近い順番に、カフェやレストランを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 WordPressマネタイズセミナー WordPressについて

(36)

36 WordPressとAPIの連携（APIの活用事例） そのスポットから２点間の直線距離の近い順番に、ホテルを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 WordPressマネタイズセミナー WordPressについて

(37)

WordPressとAPIの連携（APIの活用事例） 記事に関連する商品を自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 WordPressマネタイズセミナー WordPressについて

(38)

38

WordPressとは？

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

(39)

GPLライセンスとは？

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

(40)

40 世界トップ100万サイト中、WordPress利用率

１４．９％

マクラケン直子さんのブログより引用 http://detlog.org/2011/09/12/wordcamp-kobe-2011/ WordPressマネタイズセミナー WordPressについて

(41)

CMSでのWordPressのシェア

５６．６％

マクラケン直子さんのブログより引用

(42)

42

世界の検索トレンド

Google トレンド

(43)

日本の検索トレンド

(44)

44

アフィリエイトサイトとしても

(45)

BOOK・OFFスタッフブログ

ブログとしても

IDEA*IDEA カイ士伝 （「WordPress を使ったサイト– WordPressマネタイズセミナー WordPressについて

(46)

46 美的.com TechCrunch Japan ロイター通信

マガジンサイトとしても

（「WordPress を使ったサイト– WordPress Codex 日本語版」より引用） http://wpdocs.sourceforge.jp/%E5%88%A9%E7%94%A8%E8%80%85:Nao/WordPress_%E3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 WordPressマネタイズセミナー WordPressについて

(47)

クックパッド株式会社株式会社ベクター IR・会社情報サイト さいたまスーパーアリーナ （「WordPress を使ったサイト–

企業のサイトとしても

(48)

48 昭和女子大学神戸芸術工科大学長岡工業高等専門学校

学校のサイトとしても

(49)

PEPSI （ペプシ）のブログ フォルクスワーゲン Nikon

海外のサイトとしても

（「WordPress を使ったサイト– WordPressマネタイズセミナー WordPressについて

(50)

50 小出裕章 (京大助教) 非公式まとめ prayforjapan.jp 助けあいジャパン

震災の時にはスピーディな情報公開に貢献

(51)

WordPressを利用すると・・・

（１）好きな独自ドメイントで運営できる。（２）自分の意図しない広告は入らない。（３）文章や写真のデータを自分で管理できる。（４）突然のサービス停止の心配がない。（５）自由にデザインや機能を追加できる。 WordPressマネタイズセミナー WordPressについて

(52)

52 （１）好きな独自ドメイントで運営できる。無料のブログでは、例えば、 http://ameblo.jp/（自分のアカウントID） http://blogs.yahoo.co.jp/（自分のアカウントID） といった形になりますが、 WordPressをサーバーに設置して独自ドメインを取得すれば、 自分のURLでサイトを運営することができます。

WordPressを利用すると・・・

(53)

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

WordPressを利用すると・・・

(54)

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

WordPressを利用すると・・・

(55)

（４）突然のサービス停止の心配がありません。無料のブログでは、サービス停止で、ブログが強制的に無くなってしまう可能性もあります。例）「さるさる日記」（http://www.diary.ne.jp/） WordPress.orgは、サーバーインストール型なので、 サービス停止によるブログ閉鎖などの心配がありません。

WordPressを利用すると・・・

(56)

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

WordPressを利用すると・・・

(57)

WordPress.com と WordPress.org フリーのブログサービス ＜WordPress.com＞ ＜WordPress.org＞ サーバーインストール型・サーバーを用意する必要なく作れる。 ・データベースの管理権限、FTP の アクセス権などが無く、テーマやプラグインのアップロードに制約。・サーバーを用意する必要がある。・自由度が高い。 今回はorgの説明。 WordPressマネタイズセミナー WordPressについて

(58)

58

PHP バージョン

5.2.4 以上

MySQL バージョン

5.0.15 以上

もし、レンタルサーバーを借りる時は一応、仕様を確認しましょう。 →ほとんどのレンタルサーバーで対応しています！

WordPressが動く環境

(59)

「４分で解説！WordPressインストール」

http://www.youtube.com/watch?v=dfI9cnc8ac0

(60)

(61)

「クロスオーバーサーチ」とは？

(62)

62

Application Programming Interface

API（アプリケーション・プログラミング・インタフェース、Application Programming Interface）とは、アプリケーションから利用できる、オペレーティングシステムやプログラミング言語で用意されたライブラリなどの機能の入り口となるものである。主に、ファイル制御、ウインドウ制御、画像処理、文字制御などのための関数として提供されることが多い。つまり、簡単にいえば、アプリケーションをプログラムするにあたって、プログラムの手間を省くため、もっと簡潔にプログラムできるように設定されたインターフェースの事である。（Wikipediaより）

APIとは？

WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(63)

要は、

そのWEBサービスにあるデータを、

自由に使えると言うこと。

APIとは？

(64)

64 広告主広告仲介業者や広告代理店（例）リンクシェア自分の運営サイトインターネットユーザー Web APIや オープンソース無料で、 Web APIやオープンソースを公開直接広告（純広告）として報酬報酬手数料契約提携 Web APIやオープンソースを世の中に広める対象となるユーザーを集客して、成果に貢献する無料で、その分野・テーマに関する情報が手に入り、かつ、ユーザー間での交流ができる得た広告報酬等により、サービスをより向上させる図にすると、こういうイメージ。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(65)

＜WEB制作者のメリット＞ 他社の膨大なデータベースや機能を、無料で利用できるため、 Webサイトの開発コストを大幅に削減でき、効率的に制作できる。 ＜API提供会社のメリット＞ 自社のみでは考え付かないようなWEBサービス等を、 外部の誰かが作ってくれるため、結果として、自社サービスの利用者が増えることが期待できる。

Web APIのメリット

(66)

66

何ができるの？

(67)

各地域の天気予報を自動で取得する。

WordPressに天気情報を自動で取得 WordPressマネタイズセミナー

(68)

68

WordPressの各記事の位置情報を地図に表示

各記事の水族館の位置を

Google Maps APIと連携して

自動で地図に一覧表示させる。＆

近いスポットはピンをまとめる。

(69)

WordPressに周辺の写真を自動で表示

そのスポットの周辺の

写真を自動で表示させる。

(70)

70 WordPressに画像を自動で表示 各記事に関連する画像を自動表示する。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(71)

その水族館について、 Twitterの最新つぶやきを 自動表示させる。 WordPressに Twitter情報を自動で表示 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(72)

72 WordPressにカフェ情報を自動で表示 そのスポットから２点間の直線距離の近い順番に、カフェやレストランを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(73)

WordPressにホテル情報を自動で表示 そのスポットから２点間の直線距離の近い順番に、ホテルを、自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(74)

74 WordPressに商品情報を一覧表示 記事に関連する商品を自動で一覧表示する。この部分は、自動でアフィリエイトリンクになっていて成果の収益に繋がる。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(75)

「クロスオーバーサーチ」から情報を自動で取得。アフィリエイトもちろん、リンクシェア「クロスオーバーサーチ」も！ WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(76)

76

×

キーワードは、

「カスタムフィールド」

「Web API」

(77)

カスタムフィールドを使ってみましょう！カスタムフィールドは WordPressに 元々備わっている機能です。

カスタムフィールド

(78)

78 例： <?php echo get_post_meta($post->ID,'address',true); ?> カスタムフィールドに入力したデータを表示しています。カスタムフィールドを出力する WordPressのテンプレートタグ

カスタムフィールド

(79)

<?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = "http://search.yahooapis.jp/ImageSearchService/V2/imageSearch?appid=<アプリ ケーションID>&query=" . $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->Result as $gazou_output) { テーマに４行のプログラムを追加して実現！

カスタムフィールド

(80)

80 WordPressを 使えば、ページごとに自由にキーワードを変えられるようにできる。 WordPress以外のAPIサンプルコードを WordPressに組み込むこともできます WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(81)

WordPress以外のAPIサンプルコードを WordPressに組み込むこともできます

(82)

82 WordPressにクロスオーバーサーチの 商品情報を自動で取得

ワークショップ

_{- クロスオーバーサーチ}

(83)

リンクシェアお問い合わせ

（手順１）Web APIの仕様を確認する

(84)

84 リンクシェアさんのAPIのリファレンスは、ダウンロードPDFの中にあります。

（手順２）パラメーターを確認

パラメーターを確認する。「パラメーター」 →制約やソートの条件を指定する。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(85)

（手順３）XMLを生成

リンクシェアマーチャンダイザーの場合、 http://productsearch.linksynergy.com/productsearch?token= がベース。その上で、パラメーターを付ける。（例） http://productsearch.linksynergy.com/productsearch?token=[自分 のトークン] &keyword=フラワーギフト &max=9&sort=retailprice&sorttype=asc

パラメーターに基づいてXMLを生成する。

(86)

86

（手順３）リンクシェアはトークンが必要

(87)

（手順４）一応、XMLを確認

（例）

http://productsearch.linksynergy.com/productsearch?token=[自分のトークン] &keyword=ギフト WordPressマネタイズセミナー

(88)

88

（手順５）simplexml_load_fileで

分析（パース）

（例） $linkshare = （手順４のXML） ; $xml = simplexml_load_file ($linkshare); WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(89)

（手順６）レスポンスフィールドを確認

レスポンスフィールド （XMLデータ項目説明） を確認する。「レスポンスフィールド」 →出力データを指定する。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(90)

90

（手順７）出力＆表示する

（例１）echoで単発で出力 echo $xml->item->linkurl; （例２）foreach文で条件の回数だけループ処理（繰り返し処理）を 行う foreach($xml->item as $linkshare_output) {

echo '<a href="' . $linkshare_output->linkurl . '">'; echo '<img src="'; echo $linkshare_output->imageurl; echo '" alt="" />'; echo '</a><br />'; echo '</div>'; echo '商品名：';

echo '<strong><a href="';

echo $linkshare_output->linkurl; echo '">'; echo $linkshare_output->productname; echo '</a></strong><br />'; echo '</div>';} WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(91)

（手順８）サイトを確認

大きな流れとしては、（１）リクエストパラメーターで条件を設定して、（２）レスポンスフィールドで出力項目を決める。 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(92)

92 リンクシェアさんの提供している 「セール＆クーポンサーチWebサービス」 も同じ流れで設定します。リンクシェアお問い合わせ セール＆クーポンサーチ Webサービスとは？【仕様書ダウンロード可能】 http://linkshare.okweb3.jp/EokpControl?&tid=285859&event=FE0006 WordPressマネタイズセミナー WebAPI（マーチャンダイザー）を使ってみる

(93)

「セール＆クーポンサーチWebサービス」の例

「母の日」「新生活」「クリスマス」などの

(94)

(95)

WordPressのコアは、とてもシンプル。

(96)

96 シンプルなコアに、サイトにあった「テーマ」でデザインして、「プラグイン」で機能追加する。 ※テーマにもfunctions.phpにて機能追加も出来ます。

テーマ

プラグイン

WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(97)

公式ディレクトリテーマ登録数

1,400以上

(98)

98 公式ディレクトリプラグイン登録数

17,000以上

(99)

多すぎて、どのテーマやプラグインが良いのか、分からない！ WordPress初心者 ねこび〜んさん WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(100)

100 そこで、 WordCampスタッフが お勧めのテーマやプラグインをご紹介！ WordPress経験者 わぷーさん WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(101)

・ユーザー・開発者が集うイベント ・世界40以上の都市で開催 ・世界中で180回以上の開催実績 ・日本では年に３～４回・今までに、東京・京都・福岡・横浜・名古屋・神戸 http://japan.wordcamp.org/

そもそもWordCampとは？

(102)

102 前回のWordCamp Tokyo 2011 参加者約８００人懇親会参加者約３００人 WordPressに関する セッションやワークショップも多数。スタッフもたくさん！当日だけお手伝いも大歓迎！ （WordCamp横浜スタッフの集合写真）

そもそもWordCampとは？

(103)

この人達が今回のWordCampスタッフ WordPressマネタイズセミナー

(104)

104

WordCampに関わっている人は、

WordPressに詳しい人も多い。

（事前のWordCamp打ち合わせ） （当日のWordCamp設営） WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(105)

WordPress経験者 わぷーさん

スタッフお勧めの

テーマやプラグインを

ご紹介！

(106)

106 西川伸一さん @shinichiN プラグイン

Cawaii Admin

WordPressの管理画面を 可愛くするプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(107)

ころぐ http://colog.jp/ WordPressの 管理画面を変えられる！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(108)

108

カイ士伝さん

@kai4den

プラグイン

WordPress Related

Post for Japanese

Yahoo!の日本語形態素解析 Webサービスを利用して、 関連する自分の記事を表示。かなり精度が高い！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(109)

カイ士伝 http://blogging from.tv/wp/ ラーメン記事にはラーメンの記事が！サイト内でのユーザーの移動が WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(110)

110 カイ士伝さん @kai4den プラグイン

WP Social

Bookmarking Light

数々のソーシャルボタンをまとめて設置！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(111)

・Twitterに「ツイートする」ボタン ・Facebookの「いいね！」ボタン ・Google+1ボタン などを、自分のサイトに設置してソーシャルな流れを作れる。プラグインをインストールするだけ！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(112)

112 池田百合子さん @lilyfanjp プラグイン

Ktai Style

WordPressを携帯対応 させるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(113)

同一URLで、

PCサイト、スマートフォンサイト、ガラケー（携帯）サイトの

振り分けを自動で実現。

(114)

114 豊田有さん @Mighty_Works プラグイン

WPtouch

WordPressをスマートフォン 対応させるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(115)

WPtouchプラグインを 有効化するだけで、 iPhoneやAndroidの 端末で見たら、スマートフォンっぽいサイトに見える。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(116)

116 オデさん @odyssey テーマ

Twenty Eleven 子テーマ

WordPressデフォルトテーマを 子テーマでカスタマイズ。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(117)

レスポンシブ・ウェブデザインメディアクエリで、横幅に応じてサイトを最適化。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(118)

118 をかもとさん @wokamoto プラグイン

Feedback Champuru

Twitter、はてなブックマーク、 Google+を、 コメントっぽく表示させるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(119)

コメント欄が賑わってる感じに！コメントしにくい敷居を下げる。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(120)

120 マクラケン直子さん @naokomc テーマ

P2テーマ

Twitterのような一言コメント掲示板 が作れるテーマ。連絡やコミュニケーションにも！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(121)

WordPress 日本語翻訳の連絡も P2テーマを 利用！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(122)

122 マクラケン直子さん @naokomc プラグイン

Jetpack

WordPress.com の標準機能である WordPress.com Stats プラグイン、 Twitter ウィジェット、 Shortcode エンベッド、 Sharedaddy などが含まれた バンドルプラグインです。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(123)

(124)

124 星野邦敏さん @khoshin プラグイン

Contact Form 7

メールフォームが作れるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(125)

メールフォーム

(126)

126 星野邦敏さん @khoshin プラグイン

Lightbox 2

リンクのある画像をクリックすると、画像が浮き上がるようなデザインとなるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(127)

画像をクリックすると・・・

(128)

128 WordPressを使ったら、 サイトが重くなった！ WordPress初心者 ねこび〜んさん WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(129)

マクラケン直子さん @naokomc プラグイン

WP Super Cache

キャッシュを作ってくれて、表示の高速化ができる。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(130)

130 「WP Super Cache」 プラグインをインストールして、「キャッシングを利用」にするだけです！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(131)

大曲仁さん @jim0912 プラグイン 001 Prime Strategy Translate Accelerator 翻訳ファイルの読み込みをキャッシュ化する。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(132)

132 三木徹さん @waviaei プラグイン

WordPress Database

Backup

データベースのバックアップを手動または自動で取ることのできるプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(133)

MySQLを 管理画面から保存できる。定期バックアップも自動で出来る。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(134)

134 宮内隆行さん @miya0001 プラグイン

WP Total Hacks

お客様にWordPressを 納品する時に便利なプラグイン。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(135)

管理画面のロゴを変えられる等、 「WordPress」の色を 消すことが出来る。その他にも、 webmaster権限追加、 フッター文字情報の変更なども。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(136)

136 WordPress初心者の ねこび〜んさんも満足！ WordPress初心者 ねこび〜んさん WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(137)

WordPress経験者 わぷーさん帰ったら、さっそくテーマやプラグインを使ってみよう！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(138)

138 WordPress経験者 わぷーさん子テーマを使うと、効率的にサイトが作れるよ！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(139)

WordPress講座カスタマイズ講座（４） 子テーマで効率的にカスタマイズ

(140)

140 WordPress講座カスタマイズ講座（４） 子テーマで効率的にカスタマイズ Twenty Tenを子テーマでstyle.css１ファイルで変更 テーマファイルは、これだけで、リニューアル。（参照） WordBench東京でお話させていただきました | Webourgeon http://webourgeon.com/2011/11/28/wordbench-tokyo/ http://tokyo.wordbench.org/2011/12/27/wordbench-20111126/

(141)

子テーマとは？

WordPressの他のテーマをベースとして、 必要な部分のみ、ファイルを修正したり、追加すること。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(142)

142

子テーマのメリット

（１）親テーマのデザインや機能を活かして、必要なところだけ、編集できるので、効率的。（２）親テーマがバージョンアップしても、そのまま継承できる。（３）親テーマがある状態で作れるので、短時間で制作が可能。（４）サイトをシリーズ化や、色が違うだけのサイトなどは、子テーマの方が、管理が簡単。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(143)

子テーマのデメリット

（１）親テーマの構造を理解する必要がある。（２）親テーマが構造を変える形のバージョンアップをした場合には、子テーマにも反映されてしまう。 →事前に別フォルダにリネームすれば解決はできる。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(144)

144

最低限必要な「子テーマ」のファイル構成

style.css

※テーマと異なり、index.phpは必須ではない。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(145)

style.css

/*

Theme Name: 自分のテーマ名

Theme URI: テーマのホームサイトのURL Description: テーマの説明

Author: 作者である自分の名前

Author URI: 作者である自分のサイトのURL Version: バージョン（任意） Tags: タグ（任意） Template: 継承する親テーマのフォルダ名 style.cssの始めに以下を書くと、テーマとして認識されます。 親テーマとの相違点。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(146)

146

子テーマの注意点

（１）通常のファイル子テーマの方が優先される。子テーマ＞親テーマ（※子テーマに同一ファイルがあれば、親テーマは読まれない。） （２）functions.phpファイルのみ 子テーマのfunctions.phpが読み込まれた後に、 親テーマのfunctions.phpが読み込まれる。 子テーマ → 親テーマ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(147)

テーマとは？

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

(148)

148

テーマフォルダの確認

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で入れる！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(149)

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

検索もできます！

(150)

150

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

(151)

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

(152)

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

(153)

「Twenty Eleven」 ファイル構成 colors / images / inc / js / languages / 404.php archive.php author.php category.php comments.php editor-style.css content.php content-aside.php content-featured.php content-gallery.php content-image.php content-intro.php content-link.php content-page.php content-quote.php content-single.php content-status.php screenshot.png search.php searchform.php showcase.php sidebar.php sidebar-footer.php sidebar-page.php single.php footer.php functions.php header.php image.php index.php license.txt page.php readme.txt WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(154)

154 「Twenty Ten」 ファイル構成 images / languages / 404.php archive.php attachment.php author.php category.php comments.php editor-style.css editor-style-rtl.css footer.php functions.php header.php index.php license.txt loop.php loop-attachment.php loop-page.php loop-single.php onecolumn-page.php page.php rtl.css screenshot.png search.php sidebar.php sidebar-footer.php single.php style.css tag.php WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(155)

最低限必要なテーマのファイル構成

index.php

style.css

(156)

156

style.css

/*

Theme Name: 自分のテーマ名

Theme URI: テーマのホームサイトのURL Description: テーマの説明

Author: 作者である自分の名前

Author URI: 作者である自分のサイトのURL Version: バージョン（任意） Tags: タグ（任意） */ style.cssの始めに以下を書くと、テーマとして認識されます。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(157)

screenshot.png

screenshot.pngを入れておくと、 管理画面のテーマにキャプチャ画像が表示されます。公式テーマではサイトのキャプチャが一般的ですが、会社のロゴなど何でも可能です。画像サイズは、 横300px、縦225pxで作ると WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(158)

158 WordPressのテーマカスタマイズの前提 ・HTML、CSS ・PHP、MySQL ・JavaScript、jQuery ・WordPressテンプレートタグ http://wpdocs.sourceforge.jp/テンプレートタグ ・WordPress条件分岐タグ http://wpdocs.sourceforge.jp/Conditional_Tags 汎用的 （WordPress以外でも使える） WordPress独自 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(159)

テーマのファイル適用の優先順位

ページの種類第１位第２位第３位第４位第５位

メインページ front-page.php 静的フロントページ home.php index.php 投稿ページ single-投稿タイプ.php single.php index.php

固定ページ page-スラッグ名.php page-ID.php page.php index.php カテゴリーページ category-スラッグ

名.php

category-ID.php category.php archive.php index.php タグページ tag-スラッグ名.php tag-ID.php tag.php archive.php index.php カスタム分類ページ taxonoy-分類名-スラッ

グ名.php

taxonoy-分類名.php taxonomy.php archive.php index.php ユーザーページ author-ユーザー名.php author-ユーザーID.php author.php archive.php index.php 日付別ページ date.php archive.php index.php

検索ページ search.php archive.php index.php

404ページ 404.php index.php

添付ファイルページ MIME_TYPE.php attachment.php archive.php index.php

(160)

160

WordPressのテンプレートタグ

「テンプレートタグ」とは、入力したデータを出力するモノ。 （WordPress独自） テンプレートタグ一覧は、 WordPress Codex 日本語版を見てみましょう！ http://wpdocs.sourceforge.jp/テンプレートタグ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(161)

・ブログサイト名 <?php bloginfo(‘name’); ?> ・ブログURL <?php bloginfo(‘url'); ?> ・記事のタイトルを表示 <?php the_title(); ?> ・記事の本文を表示 <?php the_content();?> ・使用中のテーマのCSS <?php bloginfo(‘stylesheet_url '); ?>

WordPressテンプレートタグの具体例

・投稿日付を表示 <?php the_time("Y年n月j日"); ?> ・投稿のURL <?php the_permalink(); ?> ・カスタムフィールドの値を表示 <?php echo get_post_meta($post->ID,‘値 ',true); ?> ・コメントを表示 <?php wp_list_comments(); ?> WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(162)

162

WordPressテンプレートタグ具体例

metaタグ内のCSSをWordPressテーマ化

<link rel="stylesheet" type="text/css" media="all" href =“style.css" />

↓

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

(163)

サイトタイトルをWordPressテーマ化 <h1>○○のサイト</h1> ↓ <h1><?php bloginfo(‘name’); ?></h1> WordPressの管理画面の 「設定＞一般」の中の「サイトのタイトル」が表示される。

WordPressテンプレートタグ具体例

(164)

164

記事のタイトルと本文をWordPressテーマ化

<h2>今日の夕食</h2>

今日のご飯は美味しかった！ ↓

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?><h2> <?php the_content(); ?> <?php endwhile; ?> WordPressの管理画面の投稿を表示。

WordPressテンプレートタグ具体例

(165)

画像のHTMLをWordPressテーマ化

<img src=“images/logo.jpg” alt=“” />

↓

<img src=“<?php bloginfo(‘template_directory’); ?>/images/logo.jpg” alt=“” />

WordPressテンプレートタグ具体例

(166)

166

WordPressの条件分岐タグ

「条件分岐タグ」とは、表示条件を設定するモノ。 （WordPress独自） 条件分岐タグ一覧は、 WordPress Codex 日本語版を見てみましょう！ http://wpdocs.sourceforge.jp/Conditional_Tags WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(167)

WordPress条件分岐タグの具体例

トップページとその他のページで表示させるものを変える。 <?php if ( is_home() || is_front_page() ) : ?> トップページに表示させたいコンテンツ（PHPまたはHTML） <?php else : ?> トップページ以外に表示させたいコンテンツ（PHPまたはHTML） <?php endif; ?> WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(168)

168

応用編（新着５件をカテゴリ別に表示）

<div id="topcat1"> <?php

$my_query = new WP_Query(array( 'cat' => 1, 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC' )); ?> <ul> <?php while($my_query->have_posts()) : $my_query->the_post(); ?> <li><b><?php the_time("Y年n月j日"); ?></b>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endwhile; ?>

</ul>

</div>

<div class="top-right"> <a href="<?php echo home_url( '/' ); ?>category/news/">今までのNews一覧</a></div>

(169)

ページテンプレート

固定ページの「ページ属性」に「テンプレート」が追加されて、切り替えることが可能になります。

(170)

170 <?php /* Template Name: ページテンプレート名 */ ?> 固定ページでWEBデザインを切り替えるページテンプレートを 作る場合、新規にphpファイルを作り、始めに以下を書くと、 ページテンプレートとして認識されます。

ページテンプレート

(171)

作業効率を上げるためにファイルを分割する

index.php、style.css の２ファイルがあれば、テーマとしては動くが、実際のサイトの動きに応じて、ファイルを分割した方が、 効率的にWEBデザインをすることができる。 →共通部分を、１ファイルづつ切り分ける。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(172)

172 「Twenty Ten」による具体例 header.php footer.php sidebar.php WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(173)

分割したファイルを読み込む

（「Twenty Ten」

loop-page.phpで解説）

<?php get_header(); ?>

<div id="container">

<div id="content" role="main">

<?php get_template_part( ‘loop’, ‘index’ ); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(174)

174 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

完成したテーマはthemesフォルダに入れる

ココにテーマフォルダを新規に作って入れる！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(175)

管理画面に新しくテーマが追加されます。その後、「有効化」すると、 WordPressにWEBデザインが 反映されます。

完成したテーマはthemesフォルダに入れる

(176)

176

プラグインとは？

「追加機能」。 WordPressの本体はシンプルなので、 自由に機能を追加するイメージ。プラグインは、自分で作ることも出来ます。慣れてきたら、自分でカスタマイズすると、自由度が高まります。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(177)

プラグインフォルダの確認

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 ココにプラグインフォルダを入れる！ WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介

(178)

178

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

検索もできます！

(179)

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

http://wordpress.org/extend/plugins/ WordPressマネタイズセミナー

(180)

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

既存のプラグインだけで作れる事例

(181)

Twitterのような一言コメントができるサイト

「P2」テーマ

新規ユーザー登録を OKにすれば、 不特定多数のユーザーが登録できるサイトも作れます。 WordPressマネタイズセミナー WordPressのテーマやプラグイン紹介