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

PHP開発者がWordPressをカスタマイズ（開発）する際に知っておきたい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

１．今日お話しすること

2

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

3

｢最近よく聞くWordPress、ブログだけじゃなくてCMSの開

発や、Webアプリケーション開発のためのフレームワーク

ライクにも使えるって話だけど、具体的にどうやって開発

するのかなぁ。」

4

という声や

5

｢PHPとMySQLで出来てるってことは知ってるけど、ちょっ

と重いらしいね。月間1,000万PVのサイトにも使えるのか

なぁ。」

6

という声や

7

｢そもそも何でみんなWordPress使ってるの？具体的なベ

ネフィットってなに？」

8

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

9


10

２．自己紹介

中村けん牛自己紹介

11

WordPressインテグレーションサービスを提供

するプライム･ストラテジー株式会社の代表取

締役。

執筆した書籍『WordPressの教科書』

『WordPressの教科書2』は累計部数３万部突

破。

t @kengyu_n f Kengyu.Nakamura

執筆書籍

12

（出版社：ソフトバンククリエイティブ株式会社）

2012年3月30日発売

本格ビジネスサイトを作りながら学ぶ

WordPressの教科書

Amazon 「ＩＴ・コンピュータ」カテゴリ1位（2012年6月）

２万部突破。重版（8刷）配本中。（2013年9月）

執筆書籍

13




WordPressの教科書2 [スマートフォン対応サイト編]

Amazon 総合ランキング1位（2012年9月3日）

WordPressコンサルタント

14

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

プライム・ストラテジーは世界に52社ある WordPressコンサルタントの１社です。

JTB アジアパシフィック様世界中のグループ各社で利用する社内ポータルサイト（イントラサイト）

主なWordPress開発実績

15


16

株式会社マイナビ様女性向けポータルサイト「マイナビウーマン」


17

テレビ朝日様番組ブログポータル


18

３．WordPressとは？

何故多くのサイトで使われているのか。

WordPressとは？

PHP+MySQLで出来ている世界最大シェアの

オープンソースCMSソフトウェア

19

WordPressとは？

20

• 世界のWordPressサイト数

• WordPressのシェア

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

（2013.9/27 http://en.wordpress.com/stats/調べ）

世界のWebサイトの

WordPress利用の割合

世界のCMSを用いた

Webサイトの

WordPress利用の割合

世界のWebサイトの

CMS利用の割合

（2012.4 W3Techs調べ）

34 65

20

WordPressのメリット

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

21

WordPressのメリット

2,000を超えるテーマが公式Themeディレクトリに登録

22

WordPressの生産性

23

他のCMS

デフォルト機能

プラグイン

開発情報

開発

カスタマイズ

デフォルト機能

プラグイン

開発情報

開発

カスタマイズ

開発

カスタマイズ

スクラッチ開発

開発時間

シェア１位かつ豊富なプラグインや開発情報があるので開発コストが低い

なので、

24

JTB アジアパシフィック様世界中のグループ各社で利用する社内ポータルサイト（イントラサイト）

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

25

26

ＣＭＳの管理画面を現場担当者向けにカスタマイズ

なので、WordPressは

生産性の高いCMS/アプリケーションプラットフォーム

として利用されています

27

28

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

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

CMSサイト

マルチデバイス

(PC、スマホ)

SEO適性が高い

29

WordPressは

30

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

SEO関連プラグインが豊富

様々なSEOの強化を簡潔に（SEO内部対策）

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

31

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

・さらに、豊富なプラグインから対策（作業）が簡潔に可能

権威も認めるWordPressのSEO適正

32

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

4．WordPressのカスタマイズ（開発）

WordPressのファイル構成

42

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


43


管理画面


44


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


45


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


46


コアファイル


47


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


48


設定ファイル

WordPressのサイト表示の流れ

49

（index.phpから表示完了まで）

index.php （設定ファイルwp-config.php）

WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート

50

サイトの表示

WordPressの管理画面の流れ

51

（wp-adminから表示完了まで）

wp-admin （設定ファイルwp-config.php）

WordPressコア（本体）プラグインテーマ functions.php 管理画面の描画

52

管理画面とサイトの表示

WordPressのサイト表示（管理画面）の開発領域

53

index.php（またはwp-admin） WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート

PHPプログラマー

WordPressのサイト表示の開発領域

54

index.php WordPressコア（本体）プラグインテーマ functions.php ページ種別ごとのテンプレートパーツテンプレート

PHPプログラマーまたはWebデザイナー

ページ種別ごとのテンプレート（メインテンプレート）とは？

55

トップページ（例）＝＞ front-page.php 個別ページ（例）＝＞ single.php 一覧ページ（例）＝＞ archive.php ※優先テンプレートがない場合はindex.php

(WordPressのテンプレート階層のルールによって優先的に選択されるテンプレート)

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

56

ヘッダー（例）＝＞ header.php フッター（例）＝＞ footer.php サイドバー（例）＝＞ sidebar.php

(ページ種別にかかわらず共通化でき、メインテンプレートから呼び出すテンプレート)

テンプレートタグとは？

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; ?> <article> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> （略）

（トップページ表示のためのfront-page.php)

パーツテンプレートの例

59

<!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/touch-icon.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'); ?>" />  <?php wp_head(); ?> </head> （略）

（ヘッダー部分のパーツテンプレートheader.php)

functions.phpとは１

60

functions.php（例） <?php // カスタムメニュー register_nav_menus( array( 'place_pc_global' => 'PCグローバル', 'place_sp_global' => 'SPグローバル', 'place_pc_utility' => 'PCユーティリティ', 'place_sp_utility' => 'SPユーティリティ', ) );

（テーマごとに機能の追加・変更やテンプレートタグを追加する関数ファイル)

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

functions.phpとは３

63

functions.php（例） <?php // 抜粋の文末を変更します。 function apt_excerpt_more($more) { return '...'; } add_filter('excerpt_more', 'apt_excerpt_more');


functions.phpとは４

64

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

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




WordPressの教科書

Amazon 「ＩＴ・コンピュータ」カテゴリ1位（2012年6月）

２万部突破。重版（8刷）配本中。（2013年9月）

参考書籍２

67




WordPressの教科書2 [スマートフォン対応サイト編]

Amazon 総合ランキング1位（2012年9月3日）

公式ドキュメント

68

WordPress Codex 日本語版 http://wpdocs.sourceforge.jp/


69

5．WordPressのパフォーマンス

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

70

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

WordPress

１．ロード時間 800ms

２．リクエスト数 1.2リクエスト/秒


71

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

WordPress

スケールアップ（某VPSハ

イＣＰＵインスタンスに変更）で約４倍


72


WordPress



APC（PHPアクセラレータ）導入で約１．５倍


73


WordPress




MySQLのクエリキャッシュ導入で約１．１倍


74


WordPress




MySQLのクエリキャッシュ導入で約１．１倍

翻訳キャッシュ（001 Prime Strategy Translate

Accelarator）導入で約１．５倍


75


WordPress


イＣＰＵインスタンスに変更）で約４．５倍


MySQLのクエリキャッシュ導入で約１．３倍

翻訳キャッシュ（001 Prime Strategy Translate

Accelarator）導入で約１．５倍

ページ圧縮（mod_deflate）導入で約１．１倍


76


WordPress


２．リクエスト数 20リクエスト/秒


77

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

WordPress



WP SiteManagerを導入し

てページキャッシュを有効にすると


78

複数台構成にすると

Web#1 Web#3

DB#Master

Web#Admin Web#2 Web#4

lsyncd



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

79

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

80

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

81

「Webサイト」または「仮想マシン」

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

82

「仮想マシン」の場合

１．Windows ServerまたはLinuxでPHP+MySQL環境を構築してWordPressをインストール

２．自由に構築できる反面、サーバの構築・管理が煩雑

３．最初からそれなりにコストがかかる

Windows Azure Webサイトとは？

83

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

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


84

発行後すぐに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サイト

ClearDB

Windows Azure Webサイトを検証する

91

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

92


93


Windows Azure Webサイトを検証する（無料モード）

94

Ｗｅｂサイト

WordPress

でのキャッシュ

ＣｌｅａｒＤＢ

同時接続

瞬間最大アクセス/秒

想定ＰＶ（月間）

想定コスト（月間）

スタートアップ時

無料モード

なし無料 4 4 10,000

0円（１年間のみ）

キャッシュ利用

無料モード

○ 無料

4 14 20,000 0円（１年間のみ）

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円

Windows Azure Webサイトを検証する（共有モード＆キャッシュあり）

96

Ｗｅｂサイト

WordPress



同時接続




キャッシュ有効


○ 無料 4 14 160,000

1,300円


ClearDBを

アップグレード


○ 月額10ドル

15 14 160,000 3,500円

インスタンス３つに

共有（３インスタンス）

○ 月額10ドル

15

33 1,000,000

6,000円

ClearDBを



○ 月額50ドル

30 83 3,000,000

14,000円

ClearDBを



○ 月額100ドル

40 105 5,000,000

23,000円

Windows Azure Webサイトを検証する（標準モード＆キャッシュあり）

97

Ｗｅｂサイト

WordPress



同時接続




標準モードに

標準（１インスタンス）

○ 月額100ドル

40 24 2,500,000

21,000円


インスタンス４つに

標準（４インスタンス）

○ 月額100ドル

40 95 10,000,000

56,000円

オートスケール利用時

標準（１～４インスタンス）

○ 月額100ドル

40 95 10,000,000

40,000円

ということで

98

99

「WordPressを自信をもっておすすめします。」

100

ご清聴ありがとうございました。

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

Documents

Transcript of PHP開発者がWordPressをカスタマイズ（開発）す...

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

Documents

Transcript of PHP開発者がWordPressをカスタマイズ（開発） す...

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

Transcript of PHP開発者がWordPressをカスタマイズ（開発）す...