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 1. 今 日 お 話 しすること
最 近 次 のような 声 をいただく 機 会 が 多 く なりました 3
4 最 近 よく 聞 くWordPress ブログだけじゃなくてCMSの 開 発 や Webアプリケーション 開 発 のためのフレームワーク ライクにも 使 えるって 話 だけど 具 体 的 にどうやって 開 発 するのかなぁ
という 声 や 5
6 PHPとMySQLで 出 来 てるってことは 知 ってるけど ちょっ と 重 いらしいね 月 間 1,000 万 PVのサイトにも 使 えるのか なぁ
という 声 や 7
8 そもそも 何 でみんなWordPress 使 ってるの? 具 体 的 なベ ネフィットってなに?
という 声 にこれからお 答 えします 9
10 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 2. 自 己 紹 介
11 中 村 けん 牛 自 己 紹 介 WordPressインテグレーションサービスを 提 供 するプライム ストラテジー 株 式 会 社 の 代 表 取 締 役 執 筆 した 書 籍 WordPressの 教 科 書 WordPressの 教 科 書 2 は 累 計 部 数 3 万 部 突 破 t @kengyu_n f Kengyu.Nakamura
執 筆 書 籍 本 格 ビジネスサイトを 作 りながら 学 ぶ WordPressの 教 科 書 ( 出 版 社 :ソフトバンク クリエイティブ 株 式 会 社 ) 2012 年 3 月 30 日 発 売 Amazon IT コンピュータ カテゴリ1 位 (2012 年 6 月 ) 2 万 部 突 破 重 版 (8 刷 ) 配 本 中 (2013 年 9 月 ) 12
13 執 筆 書 籍 本 格 ビジネスサイトを 作 りながら 学 ぶ WordPressの 教 科 書 2 [スマートフォン 対 応 サイト 編 ] ( 出 版 社 :ソフトバンク クリエイティブ 株 式 会 社 ) 2013 年 8 月 29 日 発 売 Amazon 総 合 ランキング1 位 (2012 年 9 月 3 日 )
14 WordPressコンサルタント ー 米 国 Automatic 社 Code Poet コンサルタントリストに 掲 載 ー プライム ストラテジーは 世 界 に52 社 ある WordPressコンサルタントの1 社 です
15 主 なWordPress 開 発 実 績 JTB アジアパシフィック 様 世 界 中 のグループ 各 社 で 利 用 する 社 内 ポータルサイト(イントラサイト)
16 主 なWordPress 開 発 実 績 株 式 会 社 マイナビ 様 女 性 向 けポータルサイト マイナビウーマン
17 主 なWordPress 開 発 実 績 テレビ 朝 日 様 番 組 ブログポータル
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.WordPressとは? 何 故 多 くのサイトで 使 われているのか 18
19 WordPressとは? PHP+MySQLで 出 来 ている 世 界 最 大 シェアの オープンソースCMSソフトウェア
20 WordPressとは? 世 界 シェアNo.1のCMSソフトウェア 世 界 のWordPressサイト 数 WordPressのシェア (2013.9/27 http://en.wordpress.com/stats/ 調 べ) 世 界 のWebサイトの CMS 利 用 の 割 合 世 界 のCMSを 用 いた Webサイトの WordPress 利 用 の 割 合 世 界 のWebサイトの WordPress 利 用 の 割 合 20 34 65 (2012.4 W3Techs 調 べ)
21 WordPressのメリット 20,000を 超 えるプラグインが 公 式 Pluginディレクトリに 登 録
22 WordPressのメリット 2,000を 超 えるテーマが 公 式 Themeディレクトリに 登 録
23 WordPressの 生 産 性 シェア1 位 かつ 豊 富 なプラグインや 開 発 情 報 があるので 開 発 コストが 低 い 開 発 時 間 開 発 カスタマイズ 開 発 カスタマイズ 開 発 カスタマイズ デフォルト 機 能 プラグイン 開 発 情 報 デフォルト 機 能 プラグイン 開 発 情 報 他 のCMS スクラッチ 開 発
なので 24
25 JavaやPHPのフレームワークなどを 使 わずにイントラサイト を 開 発 JTB アジアパシフィック 様 世 界 中 のグループ 各 社 で 利 用 する 社 内 ポータルサイト(イントラサイト)
CMSの 管 理 画 面 を 現 場 担 当 者 向 けにカスタマイズ 26
27 なので WordPressは 生 産 性 の 高 いCMS/アプリケーションプラットフォーム として 利 用 されています
28 現 在 のWebサイトを 取 り 囲 む 環 境 に 適 合 したCMS 検 索 エンジン(SEO) ソーシャル(SMO) CMSサイト マルチデバイス (PC スマホ)
29 WordPressは SEO 適 性 が 高 い
30 SEO 関 連 プラグインが 豊 富 様 々なSEOの 強 化 を 簡 潔 に(SEO 内 部 対 策 ) 豊 富 なSEO 関 連 の プラグイン
プロダクトとしてのSEO 適 性 が 高 い もともとの 作 りがSEO 適 正 に 高 いプロダクト さらに 豊 富 なプラグインから 対 策 ( 作 業 )が 簡 潔 に 可 能 31
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(マット カッツ) WordCamp San Francisco 2009 での 講 演 にて
33 WordPressは ソーシャル 適 性 が 高 い
34 ソーシャル 関 連 のプラグインが 豊 富 SEO 同 様 豊 富 なプラグインによりソーシャルの 強 化 連 携 が 可 能 Facebook Twitter のプラグインも 豊 富
なので ソーシャルメディアと 検 索 エンジンを 繋 ぐ ハブとして 利 用 しやすい 35
36 WordPressは スマホ(マルチデバイス)と 相 性 がよい
レスポンシブWebデザイン 37
デバイスによるテーマ 切 り 替 え 38
デバイスごとのキャッシュ 対 応 も 可 能 (WP SiteManager) 39
つまり 現 在 のWebサイトを 取 り 囲 む 環 境 (SEO ソーシャル 連 携 スマホ 対 応 )に 適 したCMSとして 利 用 されています 40
41 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 4.WordPressのカスタマイズ( 開 発 )
42 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍
43 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 管 理 画 面
44 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 プラグイン テーマなど (ユーザ 領 域 )
45 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 プラグイン テーマなど (ユーザ 領 域 )
46 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 コアファイル
47 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 フロントエンドコントロー ラー(サイト 表 示 時 )
48 WordPressのファイル 構 成 WordPress 3.6.1 日 本 語 版 のzipファイルを 解 凍 設 定 ファイル
49 WordPressのサイト 表 示 の 流 れ (index.phpから 表 示 完 了 まで) index.php ( 設 定 ファイルwp-config.php) WordPressコア( 本 体 ) プラグイン テーマ functions.php ページ 種 別 ごとのテンプレート パーツテンプレート
サイトの 表 示 50
51 WordPressの 管 理 画 面 の 流 れ (wp-adminから 表 示 完 了 まで) wp-admin ( 設 定 ファイルwp-config.php) WordPressコア( 本 体 ) プラグイン テーマ functions.php 管 理 画 面 の 描 画
管 理 画 面 とサイトの 表 示 52
53 WordPressのサイト 表 示 ( 管 理 画 面 )の 開 発 領 域 index.php(またはwp-admin) WordPressコア( 本 体 ) プラグイン テーマ functions.php ページ 種 別 ごとのテンプレート パーツテンプレート PHPプログラマー
54 WordPressのサイト 表 示 の 開 発 領 域 index.php WordPressコア( 本 体 ) プラグイン テーマ functions.php ページ 種 別 ごとのテンプレート パーツテンプレート PHPプログラマーまたは Webデザイナー
55 ページ 種 別 ごとのテンプレート(メインテンプレート)とは? (WordPressのテンプレート 階 層 のルールによって 優 先 的 に 選 択 されるテンプレート) トップページ( 例 ) => front-page.php 個 別 ページ( 例 ) => single.php 一 覧 ページ( 例 ) => archive.php 優 先 テンプレートがない 場 合 はindex.php
56 パーツテンプレートとは? (ページ 種 別 にかかわらず 共 通 化 でき メインテンプレートから 呼 び 出 すテンプレート) ヘッダー( 例 ) => header.php フッター( 例 ) => footer.php サイドバー( 例 ) => sidebar.php
57 テンプレートタグとは? (WordPress 本 体 プラグイン functions.phpで 定 義 されたテンプレート 内 で 利 用 する ためのPHPの 関 数 またはメソッド) 記 事 のタイトルを 出 力 する => the_title() header.phpを 読 み 込 む => get_header() サイトの 基 本 情 報 を 表 示 する => bloginfo()
メインテンプレートの 例 (トップページ 表 示 のためのfront-page.php) <?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><!--.malls-group end --> <div class="malls-group"> <?php endif;?> <article> <h1><a href="<?php the_permalink();?>"><?php the_title();?></a></h1> ( 略 ) 58
パーツテンプレートの 例 (ヘッダー 部 分 のパーツテンプレートheader.php) <!DOCTYPE HTML> <html dir="ltr" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title><?php bloginfo('name');?></title> <link rel="apple-touch-icon" href="<?php bloginfo('template_url');?>/images/touchicon.png" /> <link rel="shortcut icon" href="<?php bloginfo('template_url');?>/images/favicon.ico" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url');?>" /> <!--[if lt IE 9]> <meta http-equiv="imagetoolbar" content="no" /> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <?php wp_head();?> </head> ( 略 ) 59
functions.phpとは1 (テーマごとに 機 能 の 追 加 変 更 やテンプレートタグを 追 加 する 関 数 ファイル) functions.php( 例 ) <?php // カスタムメニュー register_nav_menus( array( 'place_pc_global' => 'PCグローバル', 'place_sp_global' => 'SPグローバル', 'place_pc_utility' => 'PCユーティリティ', 'place_sp_utility' => 'SPユーティリティ', ) ); 60
functions.phpとは2 (テーマごとに 機 能 の 追 加 変 更 やテンプレートタグを 追 加 する 関 数 ファイル) 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; } } 61
フックとは ( 特 定 の 関 数 やメソッドが 実 行 されるタイミング(フックポイント)で 挙 動 を 変 更 させたり 機 能 を 追 加 させるためのWordPressの 仕 組 み) フックポイント 記 事 の 抜 粋 文 の 末 尾 が 出 力 されるタイミング => excerpt_more メインテンプレートを 選 択 するタイミング => template_redirect 管 理 画 面 の 基 本 メニューの 構 造 が 決 定 するタイミ ング => admin_menu 62
functions.phpとは3 (テーマごとに 機 能 の 追 加 変 更 やテンプレートタグを 追 加 する 関 数 ファイル) functions.php( 例 ) <?php // 抜 粋 の 文 末 を 変 更 します function apt_excerpt_more($more) { return '...'; } add_filter('excerpt_more', 'apt_excerpt_more'); 63
functions.phpとは4 (テーマごとに 機 能 の 追 加 変 更 やテンプレートタグを 追 加 する 関 数 ファイル) 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'); } 64
プラグインとは (テーマに 係 わらず 機 能 の 追 加 変 更 やテンプレートタグを 追 加 するモジュール) 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'); ( 略 ) 65
参 考 書 籍 1 本 格 ビジネスサイトを 作 りながら 学 ぶ WordPressの 教 科 書 ( 出 版 社 :ソフトバンク クリエイティブ 株 式 会 社 ) 2012 年 3 月 30 日 発 売 Amazon IT コンピュータ カテゴリ1 位 (2012 年 6 月 ) 2 万 部 突 破 重 版 (8 刷 ) 配 本 中 (2013 年 9 月 ) 66
67 参 考 書 籍 2 本 格 ビジネスサイトを 作 りながら 学 ぶ WordPressの 教 科 書 2 [スマートフォン 対 応 サイト 編 ] ( 出 版 社 :ソフトバンク クリエイティブ 株 式 会 社 ) 2013 年 8 月 29 日 発 売 Amazon 総 合 ランキング1 位 (2012 年 9 月 3 日 )
68 公 式 ドキュメント WordPress Codex 日 本 語 版 http://wpdocs.sourceforge.jp/
69 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 5.WordPressのパフォーマンス
70 WordPressのパフォーマンスを 改 善 する 某 VPSスモールインスタンスで 何 もしない 状 態 だと WordPress 1.ロード 時 間 2.リクエスト 数 800ms 1.2リクエスト/ 秒
71 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか WordPress スケールアップ( 某 VPSハ イCPUインスタンスに 変 更 )で 約 4 倍
72 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか WordPress スケールアップ( 某 VPSハ イCPUインスタンスに 変 更 )で 約 4 倍 APC(PHPアクセラレータ) 導 入 で 約 1.5 倍
73 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか WordPress スケールアップ( 某 VPSハ イCPUインスタンスに 変 更 )で 約 4 倍 APC(PHPアクセラレータ) 導 入 で 約 1.5 倍 MySQLのクエリキャッシュ 導 入 で 約 1.1 倍
74 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか WordPress スケールアップ( 某 VPSハ イCPUインスタンスに 変 更 )で 約 4 倍 APC(PHPアクセラレータ) 導 入 で 約 1.5 倍 翻 訳 キャッシュ(001 Prime Strategy Translate Accelarator) 導 入 で 約 1.5 倍 MySQLのクエリキャッシュ 導 入 で 約 1.1 倍
75 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか ページ 圧 縮 (mod_deflate) 導 入 で 約 1.1 倍 WordPress スケールアップ( 某 VPSハ イCPUインスタンスに 変 更 )で 約 4.5 倍 APC(PHPアクセラレータ) 導 入 で 約 1.5 倍 翻 訳 キャッシュ(001 Prime Strategy Translate Accelarator) 導 入 で 約 1.5 倍 MySQLのクエリキャッシュ 導 入 で 約 1.3 倍
76 WordPressのパフォーマンスを 改 善 する ページキャッシュを 使 わないでどこまでいけるか WordPress 1.ロード 時 間 80ms 2.リクエスト 数 20リクエスト/ 秒
77 WordPressのパフォーマンスを 改 善 する ページキャッシュを 導 入 する WordPress WP SiteManagerを 導 入 し てページキャッシュを 有 効 にすると 1.ロード 時 間 15ms 2.リクエスト 数 150リクエスト/ 秒
78 WordPressのパフォーマンスを 改 善 する 複 数 台 構 成 にすると Web#1 Web#2 Web#3 Web#4 Web#Admin lsyncd DB#Master 1.ロード 時 間 2.リクエスト 数 15ms 600リクエスト/ 秒
とはいっても ちょっと 技 術 的 にもコスト 的 にも 敷 居 が 高 いよなぁ という 声 も 79
そこで ブラウザだけでスケール 可 能 な Windows Azure Web サイト を 紹 介 します 80
81 Windows Azure 上 でWordPressを 動 かすには? Webサイト または 仮 想 マシン
82 Windows Azure 上 でWordPressを 動 かすには? 仮 想 マシン の 場 合 1.Windows ServerまたはLinuxでPHP+MySQL 環 境 を 構 築 してWordPressをインストール 2. 自 由 に 構 築 できる 反 面 サーバの 構 築 管 理 が 煩 雑 3. 最 初 からそれなりにコストがかかる
83 Windows Azure Webサイトとは? レンタルサーバ 感 覚 のクラウドサービス クリックして 数 ス テップでWebサイト 発 行 が 完 了
84 Windows Azure Webサイトとは? 発 行 後 すぐにWebサーバ PHP MySQL FTPなどが 利 用 可 能 に もちろんWordPressも インストール 可 能
85 Windows Azure Webサイトとは? レンタルサーバ 感 覚 なので 1.WordPressのインストールはFTPでアップロード するだけ 2. 自 由 にサーバ 構 築 できない 反 面 管 理 が 簡 単 3.コストもレンタルサーバ 感 覚
86 Windows Azure Webサイトとは? クラウドサービスなので 1.サービスのほとんどがブラウザの 操 作 で 完 結 するのでとにかく 管 理 が 楽 2. 世 界 3カ 所 に 地 理 冗 長 されるので 壊 れる 心 配 がない 3.MySQL(ClearDB)の 自 動 バックアップやサーバ 監 視 などクラウドならではのサービスも 充 実
87 Windows Azure Webサイトとは? クラウドサービスなので 4. 従 量 課 金 で 開 発 時 やローンチ 直 後 など 利 用 頻 度 が 低 いときは 無 料 もしくは 低 額 5.ブラウザの 管 理 画 面 だけから 無 停 止 でスケー ルアップ スケールアウトが 可 能 6.オートスケールの 設 定 も 可 能
88 Windows Azure Webサイトとは? クラウドサービスなので 4. 従 量 課 金 で 開 発 時 やローンチ 直 後 など 利 用 頻 度 が 低 いときは 無 料 もしくは 低 額 5.ブラウザの 管 理 画 面 だけから 無 停 止 でスケー ルアップ スケールアウトが 可 能 6.オートスケールの 設 定 も 可 能
89 Windows Azure Webサイトとは? ちょっと 大 きい 規 模 の 従 来 のサーバ 構 成 Web#1 Web#2 Web#3 Web#4 Web#Admin Web#Admin lsyncd lsyncd DB#Master DB#Master Replication
90 Windows Azure Webサイトとは? これだけ 簡 単 に Windows Azure Webサイト ClearDB
91 Windows Azure Webサイトを 検 証 する 実 際 にWordPressをインストールしてブラウザだけ でどこまでスケールできるかやってみました
Windows Azure Webサイトを 検 証 する 92
Windows Azure Webサイトを 検 証 する 93
94 Windows Azure Webサイトを 検 証 する( 無 料 モード) Webサ イト WordPress でのキャッ シュ ClearD B 同 時 接 続 瞬 間 最 大 アク セス/ 秒 想 定 PV ( 月 間 ) 想 定 コス ト( 月 間 ) スタート アップ 時 無 料 モー ド なし 無 料 4 4 10,000 0 円 (1 年 間 のみ) キャッ シュ 利 用 無 料 モー ド 無 料 4 14 20,000 0 円 (1 年 間 のみ)
95 Windows Azure Webサイトを 検 証 する( 共 有 モード&キャッ シュなし) Webサ イト WordPress でのキャッ シュ ClearD B 同 時 接 続 瞬 間 最 大 アク セス/ 秒 想 定 PV ( 月 間 ) 想 定 コス ト( 月 間 ) 共 有 に 拡 張 共 有 (1 インスタ ンス) なし 無 料 4 4 40,000 1,000 円 (1 年 間 のみ) インスタ ンス2つ に 共 有 (2 インスタ ンス) なし 無 料 4 4 80,000 2,000 円 (1 年 間 のみ) ClearDB をアップ グレード 共 有 (2 インスタ ンス) なし 月 額 10 ドル 15 15 300,000 3,600 円
Windows Azure Webサイトを 検 証 する( 共 有 モード&キャッ シュあり) キャッシュ 有 効 ClearDBを アップグ レード インスタン ス3つに ClearDBを アップグ レード ClearDBを アップグ レード Webサ イト 共 有 (1 インスタ ンス) 共 有 (1 インスタ ンス) 共 有 (3 インスタ ンス) 共 有 (3 インスタ ンス) 共 有 (3 インスタ ンス) WordPress でのキャッ シュ ClearD B 同 時 接 続 瞬 間 最 大 アク セス/ 秒 想 定 PV ( 月 間 ) 想 定 コス ト( 月 間 ) 無 料 4 14 160,000 1,300 円 (1 年 間 のみ) 月 額 10 ドル 月 額 10 ドル 月 額 50 ドル 月 額 100 ドル 15 14 160,000 3,500 円 15 33 1,000,00 0 30 83 3,000,00 0 40 105 5,000,00 0 6,000 円 14,000 円 23,000 円 96
97 Windows Azure Webサイトを 検 証 する( 標 準 モード&キャッ シュあり) 標 準 モー ドに インスタン ス4つに オートス ケール 利 用 時 Webサ イト 標 準 (1 インスタ ンス) 標 準 (4 インスタ ンス) 標 準 (1 ~4イン スタン ス) WordPress でのキャッ シュ ClearD B 月 額 100 ドル 月 額 100 ドル 月 額 100 ドル 同 時 接 続 瞬 間 最 大 アク セス/ 秒 想 定 PV ( 月 間 ) 40 24 2,500,00 0 40 95 10,000,0 00 40 95 10,000,0 00 想 定 コス ト( 月 間 ) 21,000 円 (1 年 間 のみ) 56,000 円 40,000 円
ということで 98
WordPressを 自 信 をもっておすすめします 99
ご 清 聴 ありがとうございました 100