セミナースライド

(1)

PHP開発者がWordPressをカスタマイズ（開発）

する際に知っておきたいWordPressの基礎

プライム・ストラテジー株式会社

(2)

P r i m e S t r a t e g y C o . , L t d . W o r d P r e s s I n t e g r a t i o n D i v i s i o n

(3)

最近、次のような声をいただく機会が多くなりました。

(4)

｢最近よく聞くWordPress、ブログだけじゃなくてCMSの開発や、Webアプリケーション開発のためのフレームワークライクにも使えるって話だけど、具体的にどうやって開発するのかなぁ。」

(5)

という声や

(6)

｢PHPとMySQLで出来てるってことは知ってるけど、ちょっと重いらしいね。月間1,000万PVのサイトにも使えるのかなぁ。」

(7)

という声や

(8)

｢そもそも何でみんなWordPress使ってるの？具体的なベネフィットってなに？」

(9)

という声にこれからお答えします。

(10)

(11)

中村けん牛自己紹介 11 WordPressインテグレーションサービスを提供するプライム･ストラテジー株式会社の代表取締役。執筆した書籍『WordPressの教科書』『WordPressの教科書2』は累計部数３万部突破。

t

@kengyu_n

f

Kengyu.Nakamura

(12)

執筆書籍（出版社：ソフトバンククリエイティブ株式会社） 2012年3月30日発売本格ビジネスサイトを作りながら学ぶ

WordPressの教科書

Amazon 「ＩＴ・コンピュータ」カテゴリ1位（2012年6月）２万部突破。重版（8刷）配本中。（2013年9月）

(13)

執筆書籍 13 （出版社：ソフトバンククリエイティブ株式会社） 2013年8月29日発売本格ビジネスサイトを作りながら学ぶ

WordPressの教科書2

[スマートフォン対応サイト編] Amazon 総合ランキング1位（2012年9月3日）

(14)

WordPressコンサルタント

ー米国Automatic社 Code Poet コンサルタントリストに掲載ー

プライム・ストラテジーは世界に52社ある

WordPressコンサルタントの１社です。

(15)

JTB アジアパシフィック様

世界中のグループ各社で利用する社内ポータルサイト（イントラサイト）

主なWordPress開発実績

(16)

株式会社マイナビ様

(17)

17

テレビ朝日様

(18)

３．WordPressとは？

(19)

WordPressとは？

PHP+MySQLで出来ている世界最大シェアのオープンソースCMSソフトウェア

(20)

WordPressとは？ • 世界のWordPressサイト数 • WordPressのシェア

世界シェアNo.1のCMSソフトウェア

（2013.9/27 http://en.wordpress.com/stats/調べ）世界のWebサイトの WordPress利用の割合世界のCMSを用いた Webサイトの WordPress利用の割合世界のWebサイトの CMS利用の割合 20

(21)

WordPressのメリット

20,000を超えるプラグインが公式Pluginディレクトリに登録

(22)

WordPressのメリット

(23)

WordPressの生産性 23 他のCMS デフォルト機能プラグイン開発情報開発カスタマイズデフォルト機能プラグイン開発情報開発カスタマイズ開発カスタマイズスクラッチ開発開発時間シェア１位かつ豊富なプラグインや開発情報があるので開発コストが低い

(24)

(25)

JTB アジアパシフィック様

世界中のグループ各社で利用する社内ポータルサイト（イントラサイト）

JavaやPHPのフレームワークなどを使わずにイントラサイトを開発

(26)

(27)

なので、WordPressは

生産性の高いCMS/アプリケーションプラットフォームとして利用されています

(28)

現在のWebサイトを取り囲む環境に適合したＣＭＳ

検索エンジン(SEO) ソーシャル(SMO)

CMSサイト

マルチデバイス (PC、スマホ)

(29)

SEO適性が高い

29

(30)

豊富なSEO関連のプラグイン

SEO関連プラグインが豊富

(31)

プロダクトとしてのSEO適性が高い

31

・もともとの作りがSEO適正に高いプロダクト

(32)

権威も認めるWordPressのSEO適正

WordPress is a great choice

WordPress takes care of 80-90% of(the mechanics of) Search Engine Optimization (SEO)

（意訳） WordPressを選ぶことは、非常に良い選択です。なぜなら、WordPress は、SEOの手法の80%～90%に対応するように作られているからです。 Google検索エンジン開発部門責任者 Matt Cutts（マット・カッツ）

(33)

ソーシャル適性が高い

33

(34)

ソーシャル関連のプラグインが豊富

SEO同様、豊富なプラグインによりソーシャルの強化・連携が可能

Facebook、Twitter のプラグインも豊富

(35)

35

なので、ソーシャルメディアと検索エンジンを繋ぐハブとして利用しやすい

(36)

スマホ（マルチデバイス）と相性がよい

(37)

レスポンシブWebデザイン

(38)

(39)

デバイスごとのキャッシュ対応も可能（WP SiteManager）

(40)

つまり、現在のWebサイトを取り囲む環境（SEO、ソーシャル連携、スマホ対応）に

(41)

41

(42)

WordPressのファイル構成

(43)

43

WordPress 3.6.1 日本語版のzipファイルを解凍

(44)

プラグイン、テーマなど（ユーザ領域）

(45)

45

プラグイン、テーマなど（ユーザ領域）

(46)

(47)

47

フロントエンドコントローラー（サイト表示時）

(48)

(49)

WordPressのサイト表示の流れ 49 （index.phpから表示完了まで） index.php （設定ファイルwp-config.php） WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート

(50)

(51)

WordPressの管理画面の流れ 51 （wp-adminから表示完了まで） wp-admin （設定ファイルwp-config.php） WordPressコア（本体）プラグインテーマ functions.php 管理画面の描画

(52)

(53)

WordPressのサイト表示（管理画面）の開発領域 53 index.php（またはwp-admin） WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート PHPプログラマー

(54)

WordPressのサイト表示の開発領域 index.php WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート PHPプログラマーまたは Webデザイナー

(55)

ページ種別ごとのテンプレート（メインテンプレート）とは？ 55 トップページ（例）＝＞ front-page.php 個別ページ（例）＝＞ single.php 一覧ページ（例）＝＞ archive.php ※優先テンプレートがない場合はindex.php (WordPressのテンプレート階層のルールによって優先的に選択されるテンプレート)

(56)

パーツテンプレートとは？

ヘッダー（例）＝＞ header.php フッター（例）＝＞ footer.php

サイドバー（例）＝＞ sidebar.php

(57)

テンプレートタグとは？ 57 記事のタイトルを出力する＝＞ the_title() header.phpを読み込む＝＞ get_header() サイトの基本情報を表示する＝＞ bloginfo() （WordPress本体、プラグイン、functions.phpで定義されたテンプレート内で利用するためのＰＨＰの関数またはメソッド)

(58)

メインテンプレートの例 <?php get_header(); ?> <section id="contents"> <section id="malls-pickup"> <div class="malls-group"> <?php query_posts('posts_per_page=-1&post_type=page&orderby=menu_order&order=asc&post_parent=43'); if (have_posts()) : $count = 1; while (have_posts()) : the_post();

if ($count % 2 > 0 && $count != 1) : ?>

</div> <div class="malls-group">

<?php endif; ?>

(59)

パーツテンプレートの例

59

<!DOCTYPE HTML>

<!--[if lt IE 9]>

(60)

functions.phpとは１ functions.php（例） <?php // カスタムメニュー register_nav_menus( array( 'place_pc_global' => 'PCグローバル', 'place_sp_global' => 'SPグローバル', 'place_pc_utility' => 'PCユーティリティ', 'place_sp_utility' => 'SPユーティリティ', ) ); （テーマごとに機能の追加・変更やテンプレートタグを追加する関数ファイル)

(61)

functions.phpとは２ 61 functions.php（例） <?php // 数字を円貨幣のフォーマットに整形します。 function apt_convert_yen($yen) {

$yen = mb_convert_kana($yen, 'n', 'UTF-8'); $yen = preg_replace('/[^0-9]/', '', $yen); if (is_numeric($yen)) { $yen = number_format($yen) . '円'; return $yen; } } （テーマごとに機能の追加・変更やテンプレートタグを追加する関数ファイル)

(62)

フックとは（特定の関数やメソッドが実行されるタイミング（フックポイント）で挙動を変更させたり、機能を追加させるためのWordPressの仕組み) ■フックポイント記事の抜粋文の末尾が出力されるタイミング＝＞ excerpt_more メインテンプレートを選択するタイミング＝＞ template_redirect 管理画面の基本メニューの構造が決定するタイミング＝＞ admin_menu

(63)

functions.phpとは３ 63 functions.php（例） <?php // 抜粋の文末を変更します。 function apt_excerpt_more($more) { return '...'; } add_filter('excerpt_more', 'apt_excerpt_more'); （テーマごとに機能の追加・変更やテンプレートタグを追加する関数ファイル)

(64)

functions.phpとは４ functions.php（例） <?php // 検索ワードが未入力または0の場合にsearch.phpをテンプレートとして使用する function apt_search_redirect() { global $wp_query; $wp_query->is_search = true; $wp_query->is_home = false; if (file_exists(TEMPLATEPATH . '/search.php')) { include(TEMPLATEPATH . '/search.php'); } exit; }

if (isset($_GET['s']) && $_GET['s'] == false) {

add_action('template_redirect', 'apt_search_redirect'); }

(65)

プラグインとは

65

fb_admins.php（プラグイン例） <?php

/*

Plugin Name: Fb admins

Plugin URI: http://www.prime-strategy.co.jp/

Description: Facebook のfb:adminsパラメータを管理画面で設定できるようにします。 Author: Prime Strategy Co.,Ltd.

Version: 1.0

Author URI: http://www.prime-strategy.co.jp/ */

function add_fb_admins_menu() {

add_options_page('Fb admins 設定', 'Fb admins', 'manage_options', 'fb-admins.php', 'fb_admins_page' );

}

add_action('admin_menu', 'add_fb_admins_menu'); （略）

(66)

参考書籍１（出版社：ソフトバンククリエイティブ株式会社） 2012年3月30日発売本格ビジネスサイトを作りながら学ぶ

WordPressの教科書

Amazon 「ＩＴ・コンピュータ」カテゴリ1位（2012年6月）２万部突破。重版（8刷）配本中。（2013年9月）

(67)

参考書籍２ 67 （出版社：ソフトバンククリエイティブ株式会社） 2013年8月29日発売本格ビジネスサイトを作りながら学ぶ

WordPressの教科書2

[スマートフォン対応サイト編] Amazon 総合ランキング1位（2012年9月3日）

(68)

公式ドキュメント

(69)

69

(70)

WordPressのパフォーマンスを改善する

某ＶＰＳスモールインスタンスで何もしない状態だと

WordPress

１．ロード時間 800ms

(71)

WordPressのパフォーマンスを改善する 71

ページキャッシュを使わないでどこまでいけるか

WordPress スケールアップ（某VPSハイＣＰＵインスタンスに変更）で約４倍

(72)

ページキャッシュを使わないでどこまでいけるか

WordPress スケールアップ（某VPSハイＣＰＵインスタンスに変更）で約４倍 APC（PHPアクセラレータ）導入で約１．５倍

(73)

ページキャッシュを使わないでどこまでいけるか

WordPress スケールアップ（某VPSハイＣＰＵインスタンスに変更）で約４倍 APC（PHPアクセラレータ）導入で約１．５倍 MySQLのクエリキャッシュ導入で約１．１倍

(74)

ページキャッシュを使わないでどこまでいけるか

WordPress スケールアップ（某VPSハイＣＰＵインスタンスに変更）で約４倍 APC（PHPアクセラレータ）導入で約１．５倍 MySQLのクエリキャッシュ導入で約１．１倍翻訳キャッシュ（001 Prime Strategy Translate Accelarator）導入で約１．５倍

(75)

ページキャッシュを使わないでどこまでいけるか

WordPress スケールアップ（某VPSハイＣＰＵインスタンスに変更）で約４．５倍 APC（PHPアクセラレータ）導入で約１．５倍 MySQLのクエリキャッシュ導入で約１．３倍翻訳キャッシュ（001 Prime Strategy Translate Accelarator）導入で約１．５倍ページ圧縮（mod_deflate）導入で約１．１倍

(76)

ページキャッシュを使わないでどこまでいけるか

WordPress

１．ロード時間 80ms

(77)

ページキャッシュを導入する

WordPress １．ロード時間 15ms ２．リクエスト数 150リクエスト/秒 WP SiteManagerを導入してページキャッシュを有効にすると

(78)

複数台構成にすると

Web#1 Web#3 DB#Master Web#Admin Web#2 Web#4 lsyncd １．ロード時間 15ms ２．リクエスト数 600リクエスト/秒

(79)

「とはいっても、ちょっと技術的にもコスト的にも敷居が高いよなぁ」という声も

(80)

そこで、ブラウザだけでスケール可能な「Windows Azure Web サイト」を紹介します

(81)

Windows Azure上でWordPressを動かすには？

81

(82)

Windows Azure上でWordPressを動かすには？

「仮想マシン」の場合

１．Windows ServerまたはLinuxでPHP+MySQL環境を構築してWordPressをインストール２．自由に構築できる反面、サーバの構築・管理が煩雑３．最初からそれなりにコストがかかる

(83)

Windows Azure Webサイトとは？ 83

レンタルサーバ感覚のクラウドサービス

クリックして数ステップでWebサイト発行が完了

(84)

Windows Azure Webサイトとは？

発行後すぐにWebサーバ、PHP、MySQL、FTPなどが利用可能に

もちろんWordPressもインストール可能

(85)

レンタルサーバ感覚なので

１．WordPressのインストールはFTPでアップロードするだけ２．自由にサーバ構築できない反面、管理が簡単３．コストもレンタルサーバ感覚

(86)

クラウドサービスなので

１．サービスのほとんどがブラウザの操作で完結するのでとにかく管理が楽２．世界３カ所に地理冗長されるので壊れる心配がない３．MySQL(ClearDB)の自動バックアップやサーバ監視などクラウドならではのサービスも充実

(87)

クラウドサービスなので

４．従量課金で開発時やローンチ直後など利用頻度が低いときは無料もしくは低額５．ブラウザの管理画面だけから無停止でスケールアップ、スケールアウトが可能６．オートスケールの設定も可能

(88)

クラウドサービスなので

４．従量課金で開発時やローンチ直後など利用頻度が低いときは無料もしくは低額５．ブラウザの管理画面だけから無停止でスケールアップ、スケールアウトが可能６．オートスケールの設定も可能

(89)

ちょっと大きい規模の従来のサーバ構成

Web#1 Web#3 DB#Master Web#Admin Web#2 Web#4 lsyncd DB#Master Replication Web#Admin lsyncd

(90)

これだけ簡単に

Windows Azure Webサイト

(91)

Windows Azure Webサイトを検証する

91

実際にWordPressをインストールしてブラウザだけでどこまでスケールできるかやってみました。

(92)

(93)

93

(94)

Windows Azure Webサイトを検証する（無料モード）Ｗｅｂサイト WordPress でのキャッシュＣｌｅａｒＤＢ同時接続瞬間最大アク セス/秒 想定ＰＶ （月間） 想定コス ト（月間） スタートアップ時無料モードなし無料 4 4 10,000 0円（１年間のみ）キャッシュ利用無料モード ○ 無料 4 14 20,000 0円（１年間のみ）

(95)

Windows Azure Webサイトを検証する（共有モード＆キャッシュなし） 95 Ｗｅｂサイト WordPress でのキャッシュＣｌｅａｒＤＢ同時接続瞬間最大アク セス/秒 想定ＰＶ （月間） 想定コス ト（月間） 共有に拡張共有（１インスタンス）なし無料 4 4 40,000 1,000円（１年間のみ）インスタンス２つに共有（２インスタンス）なし無料 4 4 80,000 2,000円（１年間のみ） ClearDB をアップグレード共有（２インスタンス）なし月額10 ドル 15 15 300,000 3,600円

(96)

Windows Azure Webサイトを検証する（共有モード＆キャッシュあり）Ｗｅｂサイト WordPress でのキャッシュＣｌｅａｒＤＢ同時接続瞬間最大アク セス/秒 想定ＰＶ （月間） 想定コス ト（月間） キャッシュ有効共有（１インスタンス） ○ 無料 4 14 160,000 1,300円（１年間のみ） ClearDBをアップグレード共有（１インスタンス） ○ 月額10 ドル 15 14 160,000 3,500円インスタンス３つに共有（３インスタンス） ○ 月額10 ドル 15 33 1,000,00 0 6,000円 ClearDBをアップグレード共有（３インスタンス） ○ 月額50 ドル 30 83 3,000,00 0 14,000円 ClearDBを共有（３ ○ 月額100 ドル 40 105 5,000,00 23,000円

(97)

Windows Azure Webサイトを検証する（標準モード＆キャッシュあり） 97 Ｗｅｂサイト WordPress でのキャッシュＣｌｅａｒＤＢ同時接続瞬間最大アク セス/秒 想定ＰＶ （月間） 想定コス ト（月間） 標準モードに標準（１インスタンス） ○ 月額100 ドル 40 24 2,500,00 0 21,000円（１年間のみ）インスタンス４つに標準（４インスタンス） ○ 月額100 ドル 40 95 10,000,0 00 56,000円オートスケール利用時標準（１～４インスタンス） ○ 月額100 ドル 40 95 10,000,0 00 40,000円

(98)

(99)

99

(100)