さぶみっと

基本からエンタープライズでの構築事例まで「WordPress」活用セミナー

簡単に自己紹介

小賀　浩通@digitalcube

株式会社デジタルキューブ代表

Automattic Code Poet コンサルタントリストに掲載されたWordPress Consultant

WordPressでのサイト構築実績数は400サイト以上！

通称

組め

10press.net

メンバー

構成メンバー7名神戸/東京/福岡/新潟の4拠点で連携

@digitalcube @tekapo

@megane9988@banjo006 @takayukister

@Webnist

@wokamoto

仕事

ビジネス

・め組テーマ：WordPress ThemeFrameworkの開発

ビジネス

・め組CMS：WordPress構築

ビジネス

・め組サーバ：WordPress 専門のWebホスティング

ビジネス

・韋駄天：WordPressのサーバ環境高速化サービス

ビジネス

・用心棒：保守/テクニカルサポート

ビジネス

・影武者： 導入支援サービス

ビジネス

・WPSI：コンサルティングサービス

ビジネス

・め組ストア：無料Theme＆電子書籍のダウンロード

貢献

コミュニティーへの貢献

•WordCamp Tokyo 2009•WordCamp Kyoto 2009•WordCamp Fukuoka 2010•WordCamp Yokohama 2010•WordCamp Nagoya 2010•WordCamp Fukuoka2011•WordCamp Kobe2011•WordBench Kobe •WordBench Fukuoka 2011•WordBench Fukui 2011•Open Source World 2009 •OSC2010 Kansai@Kyoto

コミュニティーへの貢献

弊社へのご相談

仕事の99.9999....％以上がWordPress

アジェンダ

今日のアジェンダ

1: WordPressとは？2: WordPressをサーバにインストールしてみよう3: WordPressの便利な機能を知ろう4: エンタープライズでの構築事例をもとに実践的な「WordPress」活用のポイントを理解しよう

■本日のターゲットWordPressに興味を持っている人・Web制作者

■本日の目的今後仕事でWordPress使おう！と思ってもらう。

では、はじめます。

1:WordPressとは？数字をまじえて理解しましょう

2010 Open Source Awards １位オープンソースのCMSにおいて世界ナンバー1

http://wordpress.org/download/counter/

WordPress

The 1000 most-visited sites on the web (by Google)

8.5%

WordPress

CMS Market ShereTop 1,000,000 websites (by Alexa)

22.5%

WordPress

Themes

1,413

WordPress

Plugins

15,396

なぜ？WordPressは世界中で愛されるのか？

Open Source ⇒ ニーズによる進化

なぜ？WordPressは世界中で愛されるのか？

例えば...

なぜ？WordPressは世界中で愛されるのか？

なぜ？WordPressは世界中で愛されるのか？

・コンテンツの公開・コンテンツのインプット/アウトプット・ソーシャルサービスへの公開・マルチディバイスへの対応

柔軟・変幻自在・スピーディーに

やりたいことが形になる

なぜ？WordPressは世界中で愛されるのか？

Publishing Platformパブリッシング・プラットフォーム

2:WordPressをインストールしてみようとにかく簡単！ワンクリック。

必要なもの（ バージョン 3.2 系）・WEBサーバ・MYSQL バージョン 5.0 以上・PHP　バージョン 5.2.4 以上　・FTP/SSHツール

1：サーバのコントロールパネルにてデータベースを作成

2：日本語公式サイトよりDLしたファイルをアップロード

3：アクセスし、データベースの内容を入力

4：サイト情報を入力

以上！慣れれば5分かかりません。

最近のレンタルサーバなら、さらに簡単！一発インストーラーがあります。

スマイルサー　　　も、もちろんあります。

ワンクリックでおわり。

実際にやってみます。

できました！！

早速ログインします。

アドレスの最後に/wp-adminと入力してエントリー

ユーザ名とパスワードを入力してログインします。

ダッシュボード（管理画面）に到着！

3:WordPressの便利な機能を知ろうちょいと気がきく「め組」おすすめPlugins

基本的なやつ

・Contactform7・Akismet・Ktai-style・WPtouch・Custom Field Template・Google XML Sitemaps・Category Order・Simple Tags・WP-PageNavi・PS Auto Sitemap

例　：　Custom Field Template美的.com

例　：　Contactform7サイボウズ総合研究所

・https対応・送信データをサイボウズデヂエDBに取込み

ソーシャルメディア対応

・Open Graph Pro・Simple Tweet・Feedback Champuru・WP Social Bookmarking Light・Simple Twitter Connect・Simple Facebook Connect

例　：　Open Graph Proめ組テーマ

サイト上のLikeクリックでFacebookのTLに反映

例　：　Simple Twitter Connect

例　：　Feedback Champuru小学館Men-Joy

メンテナンス系

・Head Cleaner・WP Total Hacks・W3 Total Cache/WP Super Cache・GD Custom Posts And Taxonomies Tools /Custom Post Type UI・Maintenance Mode・User Role Editor・Peter's Collaboration E-mails・WordPress Importer・Google Analytics for WordPress

実例　：　WP Total Hacks

実例　：　Custom Post Type UI

その他

・Easing Slider /AnythingSlider for WordPress・WP-Polls・Welcart e-Commerce・qTranslate /WPML Multilingual CMS

例　：　Easing Slider

例　：　Easing Slider

例　：　WPML Multilingual CMS

すごいぞ！

どうです？使いたくなってきました？

4: エンタープライズでの構築事例をもとに実践的な活用のポイントを理解しよう

活用事例

エンタープライズサイト構築で求められること

1.高い運用性2.高いメンテナンス性3.高速化4.高可用性

１．高い運用性

Case1：運用者が多人数×素人

解決方法：Custom投稿タイプの実装

ポイント：いらないものは無くす！

２.高メンテナンス性

Case2：クライアントがテーマを結構カスタマイズする

解決方法：子テーマのCSSのみでフロント部分を実装

WordPressがアップデート↓対応するためにテーマもアップデート↓直接、親テーマ編集して構築した場合、・アップデートできない。。。・上書きされて元にもどってしまう。。。

だから子テーマでやりましょう！！

404.php/archive.phppage.php/index.php/single.php

header.php

footer.php

sidebar.php

Twenty Elevenの場合

404.phparchive.phpcategory.phptag.phppage.phpindex.phpauthor.phpsingle.phpearch.phpattachment.php

loop.phpsidebar-footer.phpcomments.phpsidebar.phpfooter.phpheader.php

rtl.csseditor-style-rtl.cssstyle.csseditor-style.cssfunctions.php

screenshot.pnglicense.txtimages/languages/

テンプレート

関数

スタイルシート

モジュールテンプレート

画像・言語

ファイル構成WordPress テーマは、wp-content/themes/ の中のサブディレクトリに存在しますテーマフォルダには、スタイルシートファイル、テンプレートファイル、オプションの関数ファイル (functions.php)、画像といったものが含まれています。

通常オリジナルテーマをつくるには

子テーマとは

別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

子テーマとは

もっとも単純な形式では style.css ファイルを一つだけそれだけでOKです！

親テーマの変更したいとろこだけ自分でカスタムすることで、残りは親テーマをそのまま利用します！

■1: Twenty Elevenの子テーマを制作。

1: wp-content/themes に新しいディレクトリを作成今回は”kodomo”と名づけます2: 次のコードを style.css ファイルを作成して入れる/*Theme Name: kodomoAuthor: MegumiTemplate: twentyeleven*/

@import url('../twentyeleven/style.css'); ←親のCSSをインポートしている

すると

出ました！

CSSをカスタマイズ！

/*Theme Name: kodomoAuthor: MegumiTemplate: twentyeleven*/

@import url('../twentyeleven/style.css');

#site-title a { color: #009900;}

←サイトのタイトル文字を緑色に

タイトルが緑色になりました！！

wp_test

■子テーマにCSSやテンプレートファイルが無い場合親テーマのテンプレートファイルが適応される

■子テーマにCSSやテンプレートファイルがある場合子テーマのテンプレートファイルに上書きされる

例外

■functions.phpこちらのみは上書きされません。親テーマの functions.php の直前に追加して読み込まれます。

もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。

ポイント：機能とデザインを完全分離

３.WordPressを高速化する

Case３：月間 数百万～数千万のPVの複数のWebメディアを運用

解決方法：Nginx + fastCGI

Nginx

nginx は従来の HTTP サーバのようにリクエストの処理をスレッドで行わず、非同期 のアーキテクチャーを用いるイベントループモデルのサーバです。

そのため、多数のリクエストがきた場合に実行スタックをコピーする必要があるス レッドモデルのサーバと違い、1プロセスでリクエストを処理できるため、メモリ消費 量が極端に少なくてすむという利点があります。

fastCGI

Apache で PHP を動作させる際は mod_php を使用してモジュール実行していまし たが、nginx では Apache のようにモジュール実行はできません。 そこで PHP を fastCGI で動作させます。

$ ab -n 1000 -c 100 Concurrency Level: 100Time taken for tests: 4.595144 secondsComplete requests: 1000Failed requests: 0Write errors: 0Total transferred: 35398175 bytesHTML transferred: 35106431 bytesRequests per second: 217.62 [#/sec] (mean)Time per request: 459.514 [ms] (mean)Time per request: 4.595 [ms] (mean, across all concurrent requests)Transfer rate: 7522.72 [Kbytes/sec] received

Apache（チューニング前）

$ ab -n 1000 -c 100 http://XXXXXXXX/Concurrency Level: 100Time taken for tests: 0.185727 secondsComplete requests: 1000Failed requests: 0Write errors: 0Total transferred: 5424224 bytesHTML transferred: 5181498 bytesRequests per second: 5384.25 [#/sec] (mean)Time per request: 18.573 [ms] (mean)Time per request: 0.186 [ms] (mean, across all concurrent requests)Transfer rate: 28520.36 [Kbytes/sec] received

Nginx（チューニング後）

Requests per second: 5384.25 [#/sec]

Requests per second: 217.62 [#/sec]

ポイント：ボトムネックになる処理の高速化

４.高可用性

Case４：絶対に止めてはならないw最悪の事態を想定した運用基盤

解決方法：複数台構成＋リアルタイムバックアップ

lsyncd

ポイント：リスク分散とバックアップの完全自動化

最後に...

WordPressはオープンソースだから『保証』がないんだよね........

困った...orz

用心棒がいますw

自信をもってWordPressを提案してください

まとめ

とにかくやってみよう。ノーリスクですよ。

やってみる！（壊しまくるw）正しい情報を調べる（Codex）フォーラム（Give＆Take）勉強会・カンファレンス（コミュニケーション）困ったときはみんなで助けあう

僕らもできたのでダイジョブ！

WordPressを使うと素敵な出会いがまってます

Thank you！