株式会社コミュニティコム星野邦敏 330-0802 埼玉県さいたま市大宮区宮町 1-5 銀座ビル 7 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 2
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 3
自己紹介 星野邦敏 ( ほしのくにとし ) Twitter : @khoshino Facebook : 星野邦敏 (Kunitoshi Hoshino) 株式会社コミュニティコムという会社で 自社運営サイトやアプリ 他企業様向けサイトも作っています オープンソースの活動をしたり IT 系の勉強会を主催したり 地域の活動をしたり WordPressをCMSとしてWEBサイトを作ることが増えています 4
自己紹介 WordPressのイベントである WordCamp や WordBench にスタッフやスピーカーとして参加 5
自己紹介 WordPress 日本語サイトの イベントカレンダー を更新する係 ココ 6
自己紹介 公式ディレクトリにプラグインを登録したり Japan Tenki プラグイン 全国 142 地域の天気を自動表示 Hello Wapuu プラグイン ブログ更新を応援 7
自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 2012 年 1 月に出版 web creators 特別号 Webサイト制作最新トレンドの傾向と対策 2012 年 2 月に出版 Web Designing 2012 年 3 月号 2012 年 3 月に出版 速習デザイン WordPress 8
自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 2012 年 7 月に出版 2013 年 1 月に出版 2013 年 2 月に出版 web creators 特別号 WordPress プラグイン & プロが選ぶ WordPress スマートフォン ソーシャルメディア WordPress WebAPI 活用ガイドブック 優良プラグイン事典 9
自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 2013 年 10 月に出版 現場でかならず使われている WordPress デザインのメソッド 2013 年 10 月に出版 いちばんやさしい WordPress の教本 2013 年 10 月に出版 Web Designing 2013 年 11 月号 10
自己紹介 WordPress に関して 書籍や雑誌で執筆をしたり 2014 年 1 月に出版 Web Designing 2014 年 2 月号 2014 年 2 月に出版 Web Designing 2014 年 3 月号 2014 年 2 月に出版 ビジネスサイト制作で学ぶ WordPress テーマカスタマイズ 徹底攻略 11
自己紹介 大宮経済新聞の編集長 大宮経済新聞 http://omiya.keizai.biz/ 12
自己紹介 コワーキングスペース 7F の運営 埼玉県さいたま市 大宮駅東口徒歩 1 分 65 坪 215 平米 http://office7f.com/ 現在 女性スタッフ 14 名 男性スタッフ 3 名で 運営しています 13
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 14
サイト事例 ブログとしても カイ士伝 BOOK OFF スタッフブログ クックパッド開発者ブログ ( WordPress を使ったサイト WordPress Codex 日本語版 より引用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 15
サイト事例 マガジンサイトとしても 美的.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 16
サイト事例 企業のサイトとしても クックパッド株式会社株式会社博報堂ネットワンシステムズ株式会社 WordPress を採用している上場企業のコーポーレートサイト http://www.communitycom.jp/2012/05/26/wordpress-site/ 17
サイト事例 施設のサイトとしても 渋谷公会堂東急プラザ表参道原宿さいたまスーパーアリーナ ( 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 18
サイト事例 学校のサイトとしても 日本大学 昭和女子大学 神戸芸術工科大学 WordPressで作られてる大学サイト のまとめを小山さんが作ってくださっています http://dottab.com/blog/1452 http://dottab.com/blog/1456 http://dottab.com/blog/1461 19
サイト事例 観光協会のサイトとしても 南三陸町観光協会 犬山市観光協会 WordPressな観光協会のサイト 深水さんがまとめてくださっています http://foom.in/2013/01/sightseeing-01/ http://foom.in/2013/01/sightseeing-02/ http://foom.in/2013/01/sightseeing-03/ 小鹿野両神観光協会 20
サイト事例 スポーツ選手のサイトとしても クルム伊達公子公式サイト ウサイン ボルト公式サイト 中田英寿公式サイト 21
サイト事例 芸能人のサイトとしても 広瀬香美公式サイト 板野友美公式サイト 乙武洋匡公式サイト 22
サイト事例 政治家のサイトとしても 安倍晋三公式サイト 蓮舫公式サイト 田中康夫公式サイト ( 新党日本 ) 23
サイト事例 Web サービスとしても あいうえぶ ころぐ Croppy( クロッピィ ) 24
サイト事例 海外のサイトとしても Nikon フォルクスワーゲン PEPSI ( ペプシ ) のブログ ( WordPress を使ったサイト WordPress Codex 日本語版 より引用 ) http://wpdocs.sourceforge.jp/%e5%88%a9%e7%94%a8%e8%80%85:nao/wordpress_%e3% 82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88 25
サイト事例 震災の時にはスピーディな情報公開に貢献 助けあいジャパン prayforjapan.jp 小出裕章 ( 京大助教 ) 非公式まとめ ( 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 26
サイト事例や概要 WordPress とは? CMS( コンテンツ マネジメント システム ) ブログだけでなく 企業サイトやコミュニティサイトも オープンソース(GPLライセンス) 無料 機能拡張が柔軟 利用者が多い 情報が多い プログラムはPHP データベースはMySQLで構成 27
サイト事例や概要 GPL ライセンスとは? オープンソースの一形態 無保証 著作権表示の保持 無料でソースコードを入手できる 再配布自由 特定製品に依存しない 技術的な中立を保持 個人やグループを差別できない 再配布物にもGPLライセンスが適用される 28
サイト事例や概要 世界トップ 100 万サイト中 WordPress 利用率 22.9% Historical trends in the usage of content management systems for websites http://w3techs.com/technologies/history_overview/content_management/all 29
サイト事例や概要 世界の検索トレンド Google トレンド 30
サイト事例や概要 日本の検索トレンド Google トレンド 31
サイト事例や概要 WordPress を利用すると (1) 好きな独自ドメイントで運営できる (2) 自分の意図しない広告は入らない (3) 文章や写真のデータを自分で管理できる (4) 突然のサービス停止の心配がない (5) 自由にデザインや機能を追加できる 32
サイト事例や概要 WordPress を利用すると (1) 好きな独自ドメイントで運営できる 無料のブログでは 例えば http://ameblo.jp/( 自分のアカウントID) http://blogs.yahoo.co.jp/( 自分のアカウントID) といった形になりますが WordPressをサーバーに設置して独自ドメインを取得すれば 自分のURLでサイトを運営することができます 33
サイト事例や概要 WordPress を利用すると (2) 自分の意図しない広告は入らない 無料のブログでは その無料ブログサービスのPR 広告が勝手に入ってしまうことも多くあります そのPR 広告を外すために有料版に切り替えてお金が掛かることもあると思います WordPressでは レンタルサーバー代は掛かりますが その分 自分の意図しない広告が入ることは今後もありません 34
サイト事例や概要 WordPress を利用すると (3) 文章や写真のデータを自分で管理できる 無料のブログでは 文章や写真などのデータは その無料ブログサービスのサーバー上にあり データにアクセスできないことが多いです WordPressでは 自分の管理しているサーバーに全てのデータがあるので いつでもアクセスが可能です 35
サイト事例や概要 WordPress を利用すると (4) 突然のサービス停止の心配がありません 無料のブログでは サービス停止で ブログが強制的に無くなってしまう可能性もあります 例 ) さるさる日記 (http://www.diary.ne.jp/) WordPress.orgは サーバーインストール型なので サービス停止によるブログ閉鎖などの心配がありません 36
サイト事例や概要 WordPress を利用すると (5) 自由にデザインや機能を追加できます 無料のブログでは デザインできる箇所に制約がある場合もあります また 欲しい機能がサービスに備わっていない場合もあると思います WordPressでは 後述する テーマ と プラグイン により自由にデザインと機能を 選択して設置することができます 慣れている人は 自分のイメージ通りに作ることもできるので カスタマイズの柔軟性がとても高いです 37
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 38
独自ドメイン & サーバーを借りる WordPress.com と WordPress.org <WordPress.com> フリーのブログサービス <WordPress.org> サーバーインストール型 サーバーを用意する必要なく作れる データベースの管理権限 FTP のアクセス権などが無く テーマやプラグインのアップロードに制約 独自ドメインNG 一部に広告表示 ( 有料オプションあり ) サーバーを用意する必要がある 自由度が高い 今回は org の説明 39
独自ドメイン & サーバーを借りる WordPress が動く環境 PHP バージョン 5.2.4 以上 MySQL バージョン 5.0.15 以上 もし レンタルサーバーを借りる時は一応 仕様を確認しましょう ほとんどのレンタルサーバーで対応しています! 40
独自ドメイン & サーバーを借りる レンタルサーバー情報 WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/ レンタルサーバ情報のページが便利です さくらのレンタルサーバ ロリポップ! CORESERVER.JP heteml XREA CPI チカッパ! ファーストサーバ ABLENET め組サーバ オーシャンインターネット MEDIAWARS エックスサーバー シックスコア ハッスルサーバー ギガーン livedoorレンタルサーバ FC2レンタルサーバー 使えるねっと 美ら海レンタルサーバー フューチャースピリッツ SpeeVer カゴヤ ジャパン OCN ホスティング WADAX ExpressWeb BlueHost DreamHost Exclusive Hosting Laughing Squid lunarpages Media Temple West Hosting などなど 41
独自ドメイン & サーバーを借りる ココでは 独自ドメインを ムームードメイン で レンタルサーバーを ヘテムル や ロリポップ で 作ってみます 42
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 43
WordPress をインストールする 用意するソフト FTPソフト ( 例 )FileZillaなど テキストエディタ ( 例 )EmEditorなど UTF-8 に保存できるソフトということで win のメモ帳は NG 44
WordPress をインストールする 4 分で解説!WordPress インストール http://www.youtube.com/watch?v=dfi9cnc8ac0 45
WordPress をインストールする ワンクリックインストール http://wpdocs.sourceforge.jp/wordpress_ のインストール / ワンクリックインストール 国内の 20 近いレンタルサーバーが WordPress ワンクリックインストールに対応 レンタルサーバーの管理画面から導入 46
WordPress をインストールする ワンクリックインストール レンタルサーバーの heteml( ヘテムル ) を例にして http://heteml.jp/ heteml( ヘテムル ) の管理画面からのワンクリックインストールを見てみましょう 47
WordPress をインストールする ワンクリックインストール 1 48
WordPressをインストールする ワンクリックインストール 2 49
WordPress をインストールする ワンクリックインストール 3 50
WordPress をインストールする ワンクリックインストール 4 51
WordPress をインストールする ワンクリックインストール インストール完了! ワンクリックインストールを使えば インストールに 1 分も掛からない!? 52
WordPressをインストールする wp-config.php ワンクリックインストールの場合は データベース情報を意識することが少ないので 必要になったら wp-config.phpファイルを見ましょう! 53
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 54
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 55
WordPress の標準機能を理解する 初めにやること 管理画面の [ 設定 ] 項目 パーマリンク設定 56
WordPress の標準機能を理解する 投稿と固定ページ 記事を書くのに使うのは 基本 この 2 箇所 WordPress3.0 から カスタム投稿タイプ ができました 57
WordPress の標準機能を理解する 投稿と固定ページ 投稿 時系列の記事 カテゴリー& タグなどで分類 投稿間で親子関係は無し 投稿毎の専用テンプレートの選択は不可例 : ブログ記事 新着ニュース 固定ページ 時系列ではなく 順序でソート カテゴライズは無し 階層化( 親と子 ) 構造が可能 投稿毎の専用テンプレートの選択が可能例 : 自己紹介 会社概要 58
投稿 WordPress 入門講座 WordPress の標準機能を理解する 新規投稿をクリック 59
投稿 WordPress 入門講座 WordPress の標準機能を理解する 記事を書いて 公開! 60
投稿 WordPress 入門講座 WordPress の標準機能を理解する 表示されました! 表示の仕方は テーマのコードの書き方によって変えられますが デフォルトテーマでは 時系列に表示されます 61
投稿 WordPress 入門講座 WordPress の標準機能を理解する カテゴリー や タグ を使うことで 投稿記事を 分類することができます WordPress3.0から カスタムタクソノミー ( カスタム分類 ) ができました 62
投稿 WordPress 入門講座 WordPress の標準機能を理解する 本に例えると カテゴリー は 章 タグ は 付箋 というイメージ 63
WordPress の標準機能を理解する 投稿と固定ページ 投稿 時系列の記事 カテゴリー& タグなどで分類 投稿間で親子関係は無し 投稿毎の専用テンプレートの選択は不可例 : ブログ記事 新着ニュース 固定ページ 時系列ではなく 順序でソート カテゴライズは無し 階層化( 親と子 ) 構造が可能 投稿毎の専用テンプレートの選択が可能例 : 自己紹介 会社概要 64
WordPress の標準機能を理解する 固定ページ 新規追加をクリック 65
WordPress の標準機能を理解する 固定ページ 記事の書き方は投稿と同じ 66
WordPress の標準機能を理解する 固定ページ 表示されました! 時系列を意識せずに 表示されます 67
WordPress の標準機能を理解する 固定ページ ページは 階層化して使うことができます デザインテンプレートを複数用意して 切り替えることができます 順序も変えられます 68
WordPress の標準機能を理解する 投稿と固定ページ 入力方法には 1ビジュアル 2HTMLの2 種類があります 1ビジュアルは 公開した記事の表示をイメージしながら直感的に編集することができます 2HTMLは HTMLコードを書いて編集します (HTMLが分かる人向け) 69
WordPress の標準機能を理解する 投稿と固定ページ 記事にパスワードを掛けたり 下書き保存したり 未来の日付で予約投稿したり できます 70
WordPress の標準機能を理解する 投稿と固定ページ 画像の編集が WordPress 上で出来ます! ココをクリック 71
WordPress の標準機能を理解する 投稿と固定ページ 画像の編集が WordPress 上で出来ます! 72
WordPress の標準機能を理解する 投稿と固定ページ 画像の回転 画像の反転 トリミングなどができます 本格的な画像編集は Photoshop などの ソフトを使いましょう 73
WordPress の標準機能を理解する 投稿と固定ページ アイキャッチ画像 WordPress3.0 からの新機能 74
ウィジェット WordPress 入門講座 WordPress の標準機能を理解する 管理画面から 各エリアを 変更できる 75
WordPress の標準機能を理解する カスタムヘッダー 管理画面から メイン画像を 変更できる 76
WordPress の標準機能を理解する アイキャッチ画像 各記事の サムネイル画像を 指定できる 77
WordPress の標準機能を理解する カスタムメニュー メニューを 管理画面から 変更できる 78
WordPress の標準機能を理解する カスタム投稿タイプ 投稿 と 固定ページ 以外に 投稿箇所を作る (WordPress3.0からの新機能) カテゴリーの条件分岐以外で表示箇所を変えられるようになった テーマによっては予め実装されている カスタマイズをして 自分で実装することもできる 汎用的なテンプレートとして便利 79
WordPress の標準機能を理解する カスタム分類 ( カスタムタクソノミー ) カテゴリー と タグ 以外に 分類を作る (WordPress3.0からの新機能) カテゴリーとタグに縛られず 自由に分類設定ができるようになった 80
目次 0. 自己紹介 1.WordPressのサイト事例や概要 2. 独自ドメイン & サーバーを借りる 3.WordPressをインストールする 4.WordPressの標準機能を理解する 5. 既存のテーマと既存のプラグインの紹介 6. 質疑応答 81
既存のテーマと既存のプラグインの紹介 テーマとは? WEBデザインを変えるためのモノ ブログの 着せ替え 見た目の調整だけでなく 表示する内容を操ることもできます テーマは 自分で作ることも出来ます 慣れてきたら 自分でカスタマイズすると 自由度が高まります 82
既存のテーマと既存のプラグインの紹介 テーマフォルダの確認 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で入れる! 83
既存のテーマと既存のプラグインの紹介 テーマは管理画面からも選べます! 検索もできます! 84
既存のテーマと既存のプラグインの紹介 テーマは管理画面からも選べます! 85
既存のテーマと既存のプラグインの紹介 テーマは WordPress.org からも選べます! http://wordpress.org/extend/themes/ 86
既存のテーマと既存のプラグインの紹介 自分でカスタマイズしたテーマの場合 http://wordpress.org/extend/themes/ 既存のテーマは管理画面や公式ディレクトリからインストールできますが カスタマイズした独自のテーマは wp-content > themesフォルダにいれましょう 87
既存のテーマと既存のプラグインの紹介 プラグインとは? 追加機能 WordPressの本体はシンプルなので 自由に機能を追加するイメージ プラグインは 自分で作ることも出来ます 慣れてきたら 自分でカスタマイズすると 自由度が高まります 88
既存のテーマと既存のプラグインの紹介 プラグインフォルダの確認 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 ココにプラグインフォルダを入れる! 89
既存のテーマと既存のプラグインの紹介 プラグインも管理画面から選べます! 検索もできます! 90
既存のテーマと既存のプラグインの紹介 プラグインも WordPress.org から選べます! http://wordpress.org/extend/plugins/ 91
既存のテーマと既存のプラグインの紹介 デフォルトのプラグインのご紹介 有効化すると使えます! Akismet コメントスパム対策 Hello Dolly プラグインの開発サンプルコード WP Multibyte Patch マルチバイト文字による不具合の修正と強化 92
既存のテーマと既存のプラグインの紹介 プラグインの具体例 Contact Form 7 メールフォームを作成 Trust Form 確認画面付きメールフォームを作成 Ktai Style 日本の携帯電話 & スマートフォン対応 WPtouch スマートフォン対応 PS Auto Sitemap サイトマップを自動作成 Custom Field Template カスタムフィールドのテンプレート設定 Welcart ショッピングサイト構築 BuddyPress SNS 構築 Subscribe2 メールマガジン構築 Admin SSL SSL 対応 WP Super Cache キャッシュ生成 表示の高速化 WP-DB-Backup データベースのバックアップ Advertising Manager 広告管理 93
既存のテーマと既存のプラグインの紹介 既存のプラグインだけで作れる事例 既存のプラグインをインストールするだけで 実現できる WEB サービスを作ってみましょう! 94
既存のテーマと既存のプラグインの紹介 Twitter のような一言コメントができるサイト P2 テーマ 新規ユーザー登録を OKにすれば 不特定多数のユーザーが登録できるサイトも作れます 95
既存のテーマと既存のプラグインの紹介 WordPress 日本語翻訳の連絡も P2テーマを利用! WordPress Codex 日本語版会議室 http://wpjadocs.wordpress.com/ 96
既存のテーマと既存のプラグインの紹介 EC サイト ( ショップサイト ) Welcart プラグイン 具体的な事例やカスタマイズは 以下のURLを参照ください http://www.welcart.com/ 97
既存のテーマと既存のプラグインの紹介 オープン型 SNS( 会員制サイト ) BuddyPress プラグイン 新規ユーザー登録 OKにすれば不特定多数のユーザーが登録することのできるサイトも作れます 98
既存のテーマと既存のプラグインの紹介 メールマガジン登録 & 投稿システム Subscribe2 Subscribe2 widget プラグイン 99
既存のテーマと既存のプラグインの紹介 プラグイン Cawaii Admin 西川伸一さん @shinichin WordPress の管理画面を 可愛くするプラグイン 100
既存のテーマと既存のプラグインの紹介 ころぐ http://colog.jp/ WordPressの管理画面を変えられる! 101
既存のテーマと既存のプラグインの紹介 プラグイン WP Social カイ士伝さん @kai4den Bookmarking Light 数々のソーシャルボタンを まとめて設置! 102
既存のテーマと既存のプラグインの紹介 プラグインをインストールするだけ! Twitterに ツイートする ボタン Facebookの いいね! ボタン Google+1ボタンなどを 自分のサイトに設置してソーシャルな流れを作れる 103
既存のテーマと既存のプラグインの紹介 プラグイン Ktai Style 池田百合子さん @lilyfanjp WordPress を携帯対応 させるプラグイン 104
既存のテーマと既存のプラグインの紹介 同一 URLで PCサイト スマートフォンサイト ガラケー ( 携帯 ) サイトの振り分けを自動で実現 105
既存のテーマと既存のプラグインの紹介 プラグイン WPtouch 豊田有さん @Mighty_Works WordPress をスマートフォン 対応させるプラグイン 106
既存のテーマと既存のプラグインの紹介 WPtouchプラグインを有効化するだけで iphoneやandroidの端末で見たら スマートフォンっぽいサイトに見える 107
既存のテーマと既存のプラグインの紹介 テーマ Twenty Eleven 子テーマ オデさん @odyssey WordPress デフォルトテーマを 子テーマでカスタマイズ 108
既存のテーマと既存のプラグインの紹介 レスポンシブ ウェブデザインメディアクエリで 横幅に応じてサイトを最適化 8bitodyssey.com http://8bitodyssey.com/ 109
既存のテーマと既存のプラグインの紹介 プラグイン Feedback Champuru をかもとさん @wokamoto Twitter はてなブックマーク Google+ を コメントっぽく表示させるプラグイン 110
既存のテーマと既存のプラグインの紹介 コメント欄が賑わってる感じに! コメントしにくい敷居を下げる 111
既存のテーマと既存のプラグインの紹介 プラグイン Jetpack マクラケン直子さん @naokomc WordPress.com の標準機能である WordPress.com Stats プラグイン Twitter ウィジェット Shortcode エンベッド Sharedaddy などが含まれたバンドルプラグインです 112
既存のテーマと既存のプラグインの紹介 WordPress.com の機能をセットで使える 113
既存のテーマと既存のプラグインの紹介 プラグイン Contact Form 7 星野邦敏さん @khoshino メールフォームが作れるプラグイン 114
既存のテーマと既存のプラグインの紹介 メールフォーム 115
既存のテーマと既存のプラグインの紹介 星野邦敏さん @khoshino プラグイン Custom Field Template ( カスタムフィールドテンプレート ) カスタムフィールドをカスタマイズするプラグイン 116
既存のテーマと既存のプラグインの紹介 カスタムフィールド カスタムフィールドを 使ってみましょう! カスタムフィールドは WordPressに元々備わっている機能です 117
既存のテーマと既存のプラグインの紹介 カスタムフィールド 例 : カスタムフィールドを出力する WordPressのテンプレートタグ <?php echo get_post_meta($post->id,'address',true);?> カスタムフィールドに 入力したデータを 表示しています 水族館コミュニティ http://www.japan-aquarium.com/ 118
既存のテーマと既存のプラグインの紹介 カスタムフィールド テーマに4 行のプログラムを追加して実現! <?php $custom1 = urlencode(post_custom('name')); $yahoo_gazou_api = "http://search.yahooapis.jp/imagesearchservice/v2/imagesearch?appid=< アプリケーション ID>&query=". $custom1 ; $yahoo_gazou_api_xml = simplexml_load_file($yahoo_gazou_api); foreach($yahoo_gazou_api_xml->result as $gazou_output) {?> echo '<img src="'. $gazou_output->url. '" alt="" />'; } 119
既存のテーマと既存のプラグインの紹介 WordPress の各記事の位置情報を地図に表示 各記事の水族館の位置を Google Maps APIと連携して自動で地図に一覧表示させる & 近いスポットはピンをまとめる 120
既存のテーマと既存のプラグインの紹介 WordPress に周辺の写真を自動で表示 そのスポットの周辺の 写真を自動で表示させる 121
既存のテーマと既存のプラグインの紹介 WordPress に画像を自動で表示 各記事に関連する画像を 自動表示する 122
既存のテーマと既存のプラグインの紹介 WordPressに Twitter 情報を自動で表示 その水族館について Twitter の最新つぶやきを 自動表示させる 123
既存のテーマと既存のプラグインの紹介 WordPress にカフェ情報を自動で表示 そのスポットから 2 点間の直線距離の近い順番に カフェやレストランを 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて 成果の収益に繋がる 124
既存のテーマと既存のプラグインの紹介 WordPress にホテル情報を自動で表示 そのスポットから 2 点間の直線距離の近い順番に ホテルを 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて成果の収益に繋がる 125
既存のテーマと既存のプラグインの紹介 WordPress に商品情報を一覧表示 記事に関連する商品を 自動で一覧表示する この部分は 自動でアフィリエイトリンクになっていて成果の収益に繋がる 126
既存のテーマと既存のプラグインの紹介 カスタムフィールドで検索も可能 カスタムフィールドに 入力した情報で 検索ができる 127
既存のテーマと既存のプラグインの紹介 プラグイン WP Lightbox 2 星野邦敏さん @khoshino リンクのある画像をクリックすると 画像が浮き上がるようなデザイン となるプラグイン 128
既存のテーマと既存のプラグインの紹介 画像をクリックすると 129
既存のテーマと既存のプラグインの紹介 WordPress を使ったら サイトが重くなった! WordPress 初心者 ねこび んさん 130
既存のテーマと既存のプラグインの紹介 プラグイン マクラケン直子さん @naokomc WP Super Cache キャッシュを作ってくれて 表示の高速化ができる 131
既存のテーマと既存のプラグインの紹介 WP Super Cache プラグインをインストールして キャッシングを利用 にするだけです! 132
既存のテーマと既存のプラグインの紹介 大曲仁さん @jim0912 プラグイン 001 Prime Strategy Translate Accelerator 翻訳ファイルの読み込みを キャッシュ化する 133
既存のテーマと既存のプラグインの紹介 プラグイン WordPress Database 三木徹さん @waviaei Backup データベースのバックアップを手動または自動で取ることのできるプラグイン 134
既存のテーマと既存のプラグインの紹介 MySQL を 管理画面から 保存できる 定期バックアップ も自動で出来る 135
既存のテーマと既存のプラグインの紹介 プラグイン WP Total Hacks 宮内隆行さん @miya0001 お客様に WordPress を 納品する時に便利な プラグイン 136
既存のテーマと既存のプラグインの紹介 いわゆる WordPress 色を消すことが出来る設定が 20 項目以上 137
既存のテーマと既存のプラグインの紹介 管理画面のロゴを変えられる等 WordPress の色を消すことが出来る その他にも webmaster 権限追加 フッター文字情報の変更なども 138
既存のテーマと既存のプラグインの紹介 後藤賢司さん @428design プラグイン ytbd change the display in PC and smartphone スマホサイトとPCサイトの表示を分けて入力出来るプラグイン 139
既存のテーマと既存のプラグインの紹介 PC 表示用 スマホ表示用 140
既存のテーマと既存のプラグインの紹介 プラグイン WP Social Bookmarking Light 色々なソーシャルアイコンを WordPressの本文の上または下に設置することができるプラグイン 141
既存のテーマと既存のプラグインの紹介 ホームページ ビルダーでも ホームページ ビルダーの 管理画面から編集 142
既存のテーマと既存のプラグインの紹介 プラグインを使わず テーマに書く方法も <ul> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="khoshino" data-url="<?php the_permalink();?>" data-text="<?php the_title();?>">tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </li> <li> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height =62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowtransparency="true"></iframe> </li> <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php the_permalink();?>"></g:plusone></li> <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>" class="hatena-bookmark-button" data-hatena-bookmarktitle="<?php the_title();?> <?php bloginfo('name');?>" data-hatena-bookmark-layout="vertical" title=" このエントリーをはてなブックマークに追加 "><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt=" このエントリーをはてなブックマークに追加 " width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.sthatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> </ul> デザインの自由度が高い 143 http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/
既存のテーマと既存のプラグインの紹介 OGP(Open Graph protocol) 要は SNS に Web サイトの情報を認識してもらうもの Facebook に流れてきたとして どちらの方がクリックしてもらいやすい? 144
既存のテーマと既存のプラグインの紹介 Open Graph Pro プラグイン OGP の実装 meta 情報として OGP を書く <!-- facebook ogp --> <meta property="og:locale" content="ja_jp"> <meta property="og:type" content="article"> <meta property="fb:admins" content="( ココに Facebook のユーザー ID を書く 半角数字 )"> <meta property="fb:app_id" content="( ココに Facebook の Platform アプリケーション ID を書く 半角数字 )"> <meta property="og:site_name" content="<?php bloginfo('name');?>"> <?php if (has_post_thumbnail()) :?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'medium');?> <meta property="og:image" content="<?php echo $image_url[0];?>"> <?php else:?> <meta property="og:image" content="<?php bloginfo('template_url');?>/( ココに画像までのパスを書く )"> <?php endif ;?> <?php if (is_home() is_front_page()) :?> <meta property="og:title" content="<?php bloginfo('name');?>"> <?php else:?> <meta property="og:title" content="<?php the_title();?>"> <?php endif ;?> <?php if (is_home() is_front_page()) :?> <meta property="og:url" content="<?php bloginfo('url');?>"> <?php else:?> <meta property="og:url" content="<?php the_permalink();?>"> <?php endif ;?> <meta property="og:description" content="<?php the_excerpt();?>"> http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/ プラグインもあるし テーマに直接書くと自由度が高い 145
既存のテーマと既存のプラグインの紹介 WordPressの記事の更新を TwitterやFacebookに流す または TwitterやFacebookの情報を WordPressに保存する 146
既存のテーマと既存のプラグインの紹介 プラグインで実装 Social プラグイン WordPressから TwitterとFacebookのタイムラインに更新を流せる また コメント欄で SNSアカウントとしてコメント投稿できる 147
既存のテーマと既存のプラグインの紹介 Social プラグインでの投稿 Broadcast Post を Yes にする プレビューが表示される 148
既存のテーマと既存のプラグインの紹介 Social プラグインでの投稿 149
既存のテーマと既存のプラグインの紹介 Social プラグインでのコメント欄 150
既存のテーマと既存のプラグインの紹介 Facebook 公式 WordPress プラグイン Facebookが公式に公開しているプラグインがあります http://wordpress.org/extend/plugins/facebook/ 151
既存のテーマと既存のプラグインの紹介 Facebook 公式 WordPress プラグイン いいね! アイコン設置 コメント欄をFB 対応に FBで繋がっている人がどの記事に いいね! をしているか分かる オススメの記事を表示 など 152
既存のテーマと既存のプラグインの紹介 注意点 TwitterやFacebookのAPIの仕様変更に対応しなくなったプラグインは突然動かなくなることもある 自動が良いとは限らない Social や Facebook プラグイン以外にも 例えば Facebookページに投稿する Wordbooker プラグインなど 他にもSNS 連携のプラグインはある もちろん 自分でプログラムを書くこともできます 153
既存のテーマと既存のプラグインの紹介 TwitterやFacebookのアカウントで WordPressのユーザー登録 154
既存のテーマと既存のプラグインの紹介 メリット ユーザーは 新たに ID やパスワードを覚える必要がない サイト運営者はパスワード情報を持つことがない ユーザーとしてもパスワード情報をサイトに渡す必要がない 155
既存のテーマと既存のプラグインの紹介 プラグインで実装 Gianism プラグイン このプラグインを使うと Facebook, twitter, Googleのアカウントで新規登録およびログインできるようになります 登録制のWordPressサイトを作っている場合 ユーザーにアカウントを作ってもらうのが一苦労 このプラグインを使えば Webサービスの情報を使ってログインできるようになります ユーザーは新しいユーザー名とパスワードを覚える必要がありません http://wordpress.org/extend/plugins/gianism/ 156
既存のテーマと既存のプラグインの紹介 プラグインで実装 Gianism プラグイン ログイン 高橋文樹.com https://takahashifumiki.com/login/ WordPressで会員制サイトを作って ユーザーに投稿してもらったり 登録してもらうサイトを作る際に WordPress 独自登録でなく SNSのアカウントでクリック1つでログイン登録させることで 登録率を上げる 157
既存のテーマと既存のプラグインの紹介 例えば こういうログインフォームに Gianism プラグインを使って SNSアカウントでのログインをさせることもできる WordCamp Osaka 2012 参加登録 http://wcosaka.com/user_list/ 158
最後に WordPressで繋がろう! WordPressのコミュニティに ぜひご参加を! WordPressのイベントや勉強会に参加してみませんか? http://ja.wordpress.org/ 159
最後に今後のお問い合わせなど 何かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご連絡ください ありがとうございました! 株式会社コミュニティコム星野邦敏 160