とかくカオスになりがちな WordPress の PHP 周りのコードを、どう綺麗な設計で作るかということをデザイナーやディレクター向けにわかりやすく扱います。1年後に見て「あれ、なんだっけ？」となりにくい、コラボレーションしやすい設計をご紹介します。

1. WordCamp
クリーンな
WordPressサイトのための
PHPコーディングのお作法
計画的に WordPress を拡張していくためのフレームワーク思考
原 一浩 @kara_d
2011年11月27日日曜日 1

2. 本日お話すること
とかくカオスになりがちな WordPress の
PHP周りのコードを、どう綺麗な設計で
作るかということをデザイナーや
ディレクター向けにわかりやすく扱います。
1年後に見て「あれ、なんだっけ？」
となりにくい、コラボレーションしやすい
設計をご紹介します。
2011年11月27日日曜日 2

3. 経緯
WordPressを使った規模の大きい
カスタマイズを担当
➡ 大部分はフックを多用したプラグイン
➡ 一部WordPressの内部コードをいじる
➡ 既存プラグインはコードが入り組んでいて大変
➡ 切り離せる部分は別途CakePHPを使って構築
2011年11月27日日曜日 3

4. 僕について
原 一浩
➡ http://greative.jp/
➡ twitter id : @kara_d
➡ facebook : kazuhirohara
2011年11月27日日曜日 4

5. Greativeとは？
(グレーティブ)
➡ クリエイティブルールに沿った
成果物の自動化と、
トレンドに即した 統計
継続的な改良を
統計的手法で解決 デザイン トレンド
➡ karad@greative.jp
システム
2011年11月27日日曜日 5

6. もくじ
Framework
➡ 考え方の基準について
Design
➡ 設計のほうのデザイン
Coding
➡ コーディングにも決まりがある
➡ Naming
• 命名規則について
➡ Leaning
• 効率的にまなぶ
2011年11月27日日曜日 6

7. CakePHPでいうところのモンブラン
スパゲッティなコード
モンブラン ジャム
こんがらがったケーキ 紙づまり
2011年11月27日日曜日 7

8. プログラムを使った問題の解決方法
技術的ノウハウからの解決
➡ オブジェクト指向など実装のパラダイム
➡ ライブラリ、別言語の使用
考え方からの解決
➡ 規約
➡ フォルダ構成
➡ プログラムの構成
2011年11月27日日曜日 8

9. プログラムを使った問題の解決方法
技術的ノウハウからの解決
➡ オブジェクト指向など実装のパラダイム
➡ ライブラリ、別言語の使用
考え方からの解決
➡ 規約
➡ フォルダ構成
➡ プログラムの構成
2011年11月27日日曜日 9

10. テーマとは何か？
テーマとは！
➡ 単なるテンプレート集？
➡ アプリケーション？ or
テーマは、
「親子関係を作れるテンプレートであり、
設定画面なども持てるアプリケーション」
2011年11月27日日曜日 10

11. Framework
考え方の基準について
2011年11月27日日曜日 11

12. ます、わかりやすくて、よい設計
後から土台を
作らないよね
2011年11月27日日曜日 12

13. フレームワークの考え方を取り入れよう
フレームワーク(枠組み)
➡ 思考の方法
➡ Webフレームワーク
ツールの使い方
構造 作る手順
命名規約
2011年11月27日日曜日 13

14. Webフレームワークの考え方を取り入れよう
フレームワーク(枠組み)
➡ 思考の方法
➡ Webフレームワーク
オレオレからの
卒業
2011年11月27日日曜日 14

15. WordPressの設計思想
WordPressは、
あえて、フラットな設計にしてある
➡ クラスベースのオブジェクト指向とかではない
➡ グローバル領域に全ての関数が読み込まれる
➡ フラットなだけに理解しやすい
➡ ちょっとした拡張が楽
➡ 入れ子構造は、順番がある
➡ 拡張はフックなどを使った割り込みにより行う
拡張は計画的に
2011年11月27日日曜日 15

16. オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能
プログラムの設計をはじめると、
よく出てくる用語
オブジェクト指向 MVC
技術+考え方 考え方
2011年11月27日日曜日 16

17. オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能
プログラムの設計をはじめると、
よく出てくる用語
オブジェクト指向 MVC
技術+考え方 考え方
今回は技術的に難しい話はしません
2011年11月27日日曜日 17

18. フレームワークはMVCベースで考えてみる
MVCは、
MVC モデル ビュー コントローラ
2011年11月27日日曜日 18

19. MVCは使う
MVCは、一言で言うと、
「プログラムを、
データの管理(M：モデル)、
入出力の担当(C：コントローラー)、
出力のありかた(V：ビュー)、
に分けて構築する設計手法」
今回はMとVのみ
2011年11月27日日曜日 19

20. MVCというと難しいからMVのみを考えてみよう
データの管理および加工処理(モデル)と、
表示系の管理(ビュー)
MV
モデル ビュー
2011年11月27日日曜日 20

21. MVCというと難しいからMVのみを考えてみよう
M モデル
データの管理
WordPress内のデータは、
必要な形にして使おう
2011年11月27日日曜日 21

22. MVCというと難しいからMVのみを考えてみよう
テンプレートに
WordPressの情報を
入れるとき
どうしてますか？
2011年11月27日日曜日 22

23. テンプレートタグと関数
テンプレートタグと関数(API)
➡ テンプレートタグ
<?php
the_author();
?>
➡ 関数(API)
<?php
echo
get_the_author();
?>
2011年11月27日日曜日 23

24. テンプレートタグと関数
テンプレートタグと関数(API)
➡ テンプレートタグ
<?php
the_author();
?>
➡ 関数(API)
<?php
echo
get_the_author();
?>
2011年11月27日日曜日 24

25. MVCというと難しいからMVのみを考えてみよう
V ビュー
表示関係を管理
エレメント
ヘルパー
2011年11月27日日曜日 25

26. エレメントとヘルパー
エレメントって？
➡ ページ内に表示する様々なパーツを
共通化できるように切り出したもの
ヘルパーって？
➡ 表示系でプログラム的な処理が必要な
ものを切り出したもの
➡ モデル経由でデータを取得し、
加工など(専門的にはコントローラ
を兼ねている)
➡ 直表示せず返り値を返すように
2011年11月27日日曜日 26

27. オブジェクト指向は脇に置いておく
今すぐ出来る構造設計：概略
➡ フォルダ構造による意味的な関数の振り分け
➡ グローバル領域に変数などを置かない
➡ WordPressのAPIに直接アクセスしない間接化
➡ 命名規則、コーディング規則を徹底
2011年11月27日日曜日 27

28. Design
設計のほうのデザイン
2011年11月27日日曜日 28

29. テーマに使われているPHPコード
Twenty Elevenの場合
➡ 特定機能ファイル
• 404ページ、検索ページ、画像表示ページ
➡ 部分出力用標準ファイル
• ヘッダー用、フッター用、検索フォーム
➡ ページテンプレートファイル
• パーマリンク用、カテゴリー用、インデックス用
➡ 機能ファイル
• functions.php
2011年11月27日日曜日 29

30. functions.phpを掘り下げる
functions.phpは、
テーマに機能
を持たせれば持たせるほど、
肥大する
しかも、
1次元的に、
カオス。
2011年11月27日日曜日 30

31. functions.phpを開こう
functions.phpを見てみる
ギャーッ!!
2011年11月27日日曜日 31

32. いろいろな機能が入り乱れている
見なかったことにして、閉じよう...
2011年11月27日日曜日 32

33. まずは、フォルダーを分けましょう
こういう状態のものを
functions.php
2011年11月27日日曜日 33

34. 各フォルダ、ファイルの用途
functions.php
models
wordpress.php
views
helpers
util.php
elements
header.php
2011年11月27日日曜日 34

35. 各フォルダ、ファイルの用途
functions.php modelとviewsの呼び出しのみ
models データおよびロジック周りの管理
wordpress.php Wordpress内のAPI呼び出し
views 主に表示用の関数管理
helpers 表示用のデータ加工などを書く
util.php おおざっぱな機能ごとに用意
elements 主に表示用のパーツ管理
header.php 例えばヘッダーパーツ
2011年11月27日日曜日 35

36. 用途別に分けるメリット
こんなメリットがあり
➡ プログラマーが構造を一目で判断しやすい
➡ 各関数のテストが容易になる
➡ 拡張する際にどこをいじればいいかわかる
➡ 再利用が容易
➡ 将来WordPressのAPIが変わっても対応が楽
➡ 平行作業が得意
➡ おれおれ流を作業者に伝える必要がない
➡ コードがすっきり
➡ モダン系MVCフレームワークと共通の概念
2011年11月27日日曜日 36

37. Coding
コーディングにも決まりがある
2011年11月27日日曜日 37

38. ここまでの流れ
ここまでで、やったこと
➡ functions.phpに書かれていた関数を
一旦用途別に振り分けた
その他やるべきこと
➡ functions.phpで各ファイルを読み込む
➡ プログラムの書き方に注意する
➡ 命名規則について気をつける
2011年11月27日日曜日 38

39. 関数をそのままテンプレートに埋め込むのは出来るだけやめよう
APIを
直接テンプレートから
使うのは、出来るだけ避けましょう
なんで?
2011年11月27日日曜日 39

40. APIをテンプレート内で使うことのいくない点
こんな可能性が
➡ 返ってくる値にいろいろな処理を追加する必要が
➡ なんか Deprecated になっちゃった
➡ テンプレート中にいきなりプログラムが始まった
➡ ちょっと変えたらエラーで動かなくなった
そこで設計の登場
2011年11月27日日曜日 40

41. 各フォルダ、ファイルの用途
functions.php modelとviewsの呼び出しのみ
models データおよびロジック周りの管理
wordpress.php Wordpress内のAPI呼び出し
views 主に表示用の関数管理
helpers 表示用のデータ加工などを書く
util.php おおざっぱな機能ごとに用意
elements 主に表示用のパーツ管理
header.php 例えばヘッダーパーツ
2011年11月27日日曜日 41

42. 従来型の読み込み方
階層型に格納されたテンプレートを取得
<?php
require_once(
dirname(
__FILE__
)
.
'/views/helpers/sidebar-­‐helper.php'
);
?>
便利な関数が用意
2011年11月27日日曜日 42

43. テンプレートの読み込み
get_template_part
➡ get_template_part( $slug, $name )
<?php
get_template_part(
'/views/helpers/sidebar',
'helper'
);
?>
バージョン3.0以降
2011年11月27日日曜日 43

44. モデルの場合
モデルの場合も
<?php
get_template_part(
'/model/blog',
'model'
);
?>
すっきりかつモダン
2011年11月27日日曜日 44

45. APIとMVC
テンプレート内で、
APIをそのまま使って
ロジックを書かないようにする
$current_user
=
wp_get_current_user();
$user
=
$current_user-­‐>user_login;
echo
$user
.
'さん、ようこそ';
➡ こういうのはヘルパーに関数を書いて、タグにする
<?php
display_current_user();?>
2011年11月27日日曜日 45

46. こんな風に書いてませんか？
もう1つ。
基本関数内に変数などは閉じ込める
グローバル領域をなるべく浸食しない
$current_user
=
wp_get_current_user();
$user
=
$current_user-­‐>user_login;
echo
$user
.
'さん、ようこそ';
2011年11月27日日曜日 46

47. テンプレートに書いていいもの
基本的にはタグしか書かない!!
➡ 複雑な処理はヘルパー
➡ 分岐はエレメントとかで
テンプレートすっきり
2011年11月27日日曜日 47

48. まとめ
Framework
➡ ModelとViewの考え方
Design
➡ 決められた役割で設計
Coding
➡ 決められたスタイルを守る
2011年11月27日日曜日 48

49. おつかれさまでした!!
➡ Webデザイナーのための、PHPプログラミング
WordPressで学ぶCMSカスタマイズ入門
∼WordPressサイト構築編∼
• http://www.pasonatech.co.jp/event/index.jsp?no=3311
2011年11月27日日曜日 49

50. Naming
命名規則について
2011年11月27日日曜日 50

51. 命名規則
キャメルケース
➡ getBlogEntries
スネークケース
➡ get_blog_entry
ハイフン区切り(チェインケースとか?)
➡ get-blog-entry.php
2011年11月27日日曜日 51

52. 名前空間的な話
独自の名前空間(擬似的)を持とう
➡ ドメイン名、プロジェクト名、用途名など
• jp_greative_get_blog_info();
• JP_GREATIVE_DEFAULT_LIB_PATH
2011年11月27日日曜日 52

53. 定数
print_r(get_defined_constants());
➡ [WP_CONTENT_URL] => http://URL/wp-content
➡ [WP_PLUGIN_DIR] => /PATH/wp-content/plugins
➡ [WP_PLUGIN_URL] => http://URL/wp-content/plugins
➡ [PLUGINDIR] => wp-content/plugins
➡ [TEMPLATEPATH] => /PATH/wp-content/themes/twentyeleven
➡ [STYLESHEETPATH] => /PATH/wp-content/themes/twentyeleven
➡ [WP_DEFAULT_THEME] => twentyeleven
➡ [WP_CONTENT_DIR] => /PATH/wp-content
➡ [ABSPATH] => /PATH/
2011年11月27日日曜日 53

54. 関数名のつけかた
get_
➡ だいたい何かを出力する系
• get_user_info()
is_
➡ 何かを判定する系
• is_user_active()
display_
➡ 何かを出力する系
• display_side_ad()
2011年11月27日日曜日 54

55. 他言語化系のハナシ
_e()から__()へ
➡ __e()は、翻訳済みの語句を、echoで出力
➡ __()は、翻訳済みの語句を、返す
function内で使うと、
具合が悪い時があるので、
_e()を__()に変える
2011年11月27日日曜日 55

56. learning
効率的にまなぶ
2011年11月27日日曜日 56

57. Codexを読もう
Codexの歩き方
➡ テンプレートタグ
➡ 条件分岐タグ
➡ インクルードタグ
➡ 関数
ブクマしておこう
2011年11月27日日曜日 57

58. 本家の読み方
困ったら本家を読もう
➡ Usage … 構文
➡ Parameters … 引数
➡ Examples … 例
➡ Source File … この関数が書かれているファイル
➡ Related … 関係している関数
Deprecatedに注意
2011年11月27日日曜日 58

59. WordPressのコーディングの基準にまず目を通そう
WordPress コーディング基準
➡ http://codex.wordpress.org/
WordPress_Coding_Standards
2011年11月27日日曜日 59

60. PHPの規約にも目を通そう
Zend Framwork PHP
標準コーディング規約
➡ http://framework.zend.com/manual/ja/coding-
standard.html
2011年11月27日日曜日 60

61. Others
その他
2011年11月27日日曜日 61

62. 編集画面からやらない
IDE推奨
➡ とくにプログラムが苦手な方こそ
➡ できればバージョン管理も
2011年11月27日日曜日 62

63. WordPressでのMVCとは
本気モードでプラグインとかを
作ろうと考えたら
➡ WP MVC
• Webアプリケーションフレームワーク
➡ WP Unit
• ユニットテスト
こういうのを使うと、よいよ
この話はいずれまた..
2011年11月27日日曜日 63

64. パーツに直接アクセスが可能
実行すると表示されてしまうパーツは、
やめよう
➡ 例）
http://localhost:8805/wp-content/themes/
twentyeleven/sidebar-footer.php
Fatal
error:
Call
to
undefined
function
is_active_sidebar()
in
/Users/
harakazuhiro/gitrepo/wpjelly/wp-­‐content/
themes/twentyeleven/sidebar-­‐footer.php
on
line
17
2011年11月27日日曜日 64

65. テーマディレクトリにあるindex.php
/PATH/wp-content/themes
index.php
twentyeleven
2011年11月27日日曜日 65

66. index.phpにこんなことが書かれている
沈黙は金なり
index.php
<?php
//
Silence
is
golden.
?>
2011年11月27日日曜日 66