クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に...

WordCamp

クリーンなWordPressサイトのためのPHPコーディングのお作法

原 一浩 @kara_d

計画的に WordPress を拡張していくためのフレームワーク思考

12011年11月27日日曜日

本日お話すること

とかくカオスになりがちな WordPress のPHP周りのコードを、どう綺麗な設計で作るかということをデザイナーやディレクター向けにわかりやすく扱います。

1年後に見て「あれ、なんだっけ？」となりにくい、コラボレーションしやすい設計をご紹介します。

22011年11月27日日曜日

経緯

WordPressを使った規模の大きいカスタマイズを担当

➡ 大部分はフックを多用したプラグイン➡ 一部WordPressの内部コードをいじる➡ 既存プラグインはコードが入り組んでいて大変➡ 切り離せる部分は別途CakePHPを使って構築

32011年11月27日日曜日

僕について

原　一浩➡ http://greative.jp/➡ twitter id : @kara_d➡ facebook : kazuhirohara

42011年11月27日日曜日

Greativeとは？

➡ クリエイティブルールに沿った成果物の自動化と、トレンドに即した継続的な改良を統計的手法で解決

➡ karad@greative.jp

統計

トレンドデザイン

システム

(グレーティブ)

52011年11月27日日曜日

もくじ

Framework➡ 考え方の基準について

Design➡ 設計のほうのデザイン

Coding➡ コーディングにも決まりがある ➡ Naming• 命名規則について

➡ Leaning• 効率的にまなぶ

62011年11月27日日曜日

CakePHPでいうところのモンブラン

モンブラン ジャム

スパゲッティなコード

こんがらがったケーキ 紙づまり

72011年11月27日日曜日

プログラムを使った問題の解決方法

技術的ノウハウからの解決➡ オブジェクト指向など実装のパラダイム➡ ライブラリ、別言語の使用

考え方からの解決➡ 規約➡ フォルダ構成➡ プログラムの構成

82011年11月27日日曜日

プログラムを使った問題の解決方法

技術的ノウハウからの解決➡ オブジェクト指向など実装のパラダイム➡ ライブラリ、別言語の使用

考え方からの解決➡ 規約➡ フォルダ構成➡ プログラムの構成

92011年11月27日日曜日

テーマとは何か？

テーマとは！➡ 単なるテンプレート集？➡ アプリケーション？

テーマは、「親子関係を作れるテンプレートであり、　設定画面なども持てるアプリケーション」

or

102011年11月27日日曜日

Framework考え方の基準について

112011年11月27日日曜日

ます、わかりやすくて、よい設計

後から土台を作らないよね

122011年11月27日日曜日

フレームワークの考え方を取り入れよう

フレームワーク(枠組み)➡ 思考の方法➡ Webフレームワーク

ツールの使い方

構造 作る手順

命名規約

132011年11月27日日曜日

Webフレームワークの考え方を取り入れよう

フレームワーク(枠組み)➡ 思考の方法➡ Webフレームワーク

オレオレからの卒業

142011年11月27日日曜日

WordPressの設計思想

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

拡張は計画的に152011年11月27日日曜日

オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能

プログラムの設計をはじめると、よく出てくる用語

技術+考え方 考え方

オブジェクト指向 MVC

162011年11月27日日曜日

オブジェクト指向、Webフレームワークを使わない場合でもいい仕事をすることは可能

プログラムの設計をはじめると、よく出てくる用語

技術+考え方 考え方

オブジェクト指向 MVC

今回は技術的に難しい話はしません

172011年11月27日日曜日

フレームワークはMVCベースで考えてみる

MVCは、

MVCモデル ビュー コントローラ

182011年11月27日日曜日

MVCは使う

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

今回はMとVのみ192011年11月27日日曜日

MVCというと難しいからMVのみを考えてみよう

データの管理および加工処理(モデル)と、表示系の管理(ビュー)

MVモデル ビュー

202011年11月27日日曜日

MVCというと難しいからMVのみを考えてみよう

データの管理WordPress内のデータは、必要な形にして使おう

Mモデル

212011年11月27日日曜日

MVCというと難しいからMVのみを考えてみよう

テンプレートにWordPressの情報を

入れるときどうしてますか？

222011年11月27日日曜日

テンプレートタグと関数

テンプレートタグと関数(API)➡ テンプレートタグ

➡ 関数(API)

<?php  the_author();  ?>

<?php  echo  get_the_author();  ?>

232011年11月27日日曜日

テンプレートタグと関数

テンプレートタグと関数(API)➡ テンプレートタグ

➡ 関数(API)

<?php  the_author();  ?>

<?php  echo  get_the_author();  ?>

242011年11月27日日曜日

MVCというと難しいからMVのみを考えてみよう

表示関係を管理エレメントヘルパー

Vビュー

252011年11月27日日曜日

エレメントとヘルパー

エレメントって？➡ ページ内に表示する様々なパーツを共通化できるように切り出したもの

ヘルパーって？➡ 表示系でプログラム的な処理が必要なものを切り出したもの

➡ モデル経由でデータを取得し、加工など(専門的にはコントローラを兼ねている)

➡ 直表示せず返り値を返すように

262011年11月27日日曜日

オブジェクト指向は脇に置いておく

今すぐ出来る構造設計：概略➡ フォルダ構造による意味的な関数の振り分け➡ グローバル領域に変数などを置かない➡ WordPressのAPIに直接アクセスしない間接化➡ 命名規則、コーディング規則を徹底

272011年11月27日日曜日

Design設計のほうのデザイン

282011年11月27日日曜日

テーマに使われているPHPコード

Twenty Elevenの場合➡ 特定機能ファイル• 404ページ、検索ページ、画像表示ページ

➡ 部分出力用標準ファイル• ヘッダー用、フッター用、検索フォーム

➡ ページテンプレートファイル• パーマリンク用、カテゴリー用、インデックス用

➡ 機能ファイル• functions.php

292011年11月27日日曜日

functions.phpを掘り下げる

functions.phpは、テーマに機能を持たせれば持たせるほど、肥大する

しかも、1次元的に、カオス。

302011年11月27日日曜日

functions.phpを開こう

functions.phpを見てみる

ギャーッ!!

312011年11月27日日曜日

いろいろな機能が入り乱れている

見なかったことにして、閉じよう...

322011年11月27日日曜日

まずは、フォルダーを分けましょう

こういう状態のものを

functions.php

332011年11月27日日曜日

各フォルダ、ファイルの用途

functions.php

models

views

wordpress.php

helpers

elements

util.php

header.php342011年11月27日日曜日

各フォルダ、ファイルの用途

functions.php

models

views

wordpress.php

helpers

elements

util.php

header.php

modelとviewsの呼び出しのみ

データおよびロジック周りの管理

Wordpress内のAPI呼び出し

主に表示用の関数管理

表示用のデータ加工などを書く

おおざっぱな機能ごとに用意

主に表示用のパーツ管理

例えばヘッダーパーツ

352011年11月27日日曜日

用途別に分けるメリット

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

362011年11月27日日曜日

Codingコーディングにも決まりがある

372011年11月27日日曜日

ここまでの流れ

ここまでで、やったこと➡ functions.phpに書かれていた関数を一旦用途別に振り分けた

その他やるべきこと➡ functions.phpで各ファイルを読み込む➡ プログラムの書き方に注意する➡ 命名規則について気をつける

382011年11月27日日曜日

関数をそのままテンプレートに埋め込むのは出来るだけやめよう

APIを直接テンプレートから使うのは、出来るだけ避けましょう

なんで?

392011年11月27日日曜日

APIをテンプレート内で使うことのいくない点

こんな可能性が➡ 返ってくる値にいろいろな処理を追加する必要が➡ なんか Deprecated になっちゃった➡ テンプレート中にいきなりプログラムが始まった➡ ちょっと変えたらエラーで動かなくなった

そこで設計の登場

402011年11月27日日曜日

各フォルダ、ファイルの用途

functions.php

models

views

wordpress.php

helpers

elements

util.php

header.php

modelとviewsの呼び出しのみ

データおよびロジック周りの管理

Wordpress内のAPI呼び出し

主に表示用の関数管理

表示用のデータ加工などを書く

おおざっぱな機能ごとに用意

主に表示用のパーツ管理

例えばヘッダーパーツ

412011年11月27日日曜日

従来型の読み込み方

階層型に格納されたテンプレートを取得

<?php  require_once(        dirname(  __FILE__  )  .          '/views/helpers/sidebar-­‐helper.php');  ?>

便利な関数が用意

422011年11月27日日曜日

テンプレートの読み込み

get_template_part➡ get_template_part( $slug, $name )

<?php  get_template_part(        '/views/helpers/sidebar',  'helper');  ?>

バージョン3.0以降

432011年11月27日日曜日

モデルの場合

モデルの場合も<?php  get_template_part(        '/model/blog',  'model');  ?>

すっきりかつモダン

442011年11月27日日曜日

APIとMVC

テンプレート内で、APIをそのまま使ってロジックを書かないようにする

➡ こういうのはヘルパーに関数を書いて、タグにする

$current_user  =  wp_get_current_user();$user  =  $current_user-­‐>user_login;

echo  $user  .  'さん、ようこそ';

<?php  display_current_user();?>

452011年11月27日日曜日

こんな風に書いてませんか？

もう1つ。基本関数内に変数などは閉じ込めるグローバル領域をなるべく浸食しない

$current_user  =  wp_get_current_user();$user  =  $current_user-­‐>user_login;

echo  $user  .  'さん、ようこそ';

462011年11月27日日曜日

テンプレートに書いていいもの

基本的にはタグしか書かない!!➡ 複雑な処理はヘルパー➡ 分岐はエレメントとかで

テンプレートすっきり

472011年11月27日日曜日

まとめ

Framework➡ ModelとViewの考え方

Design➡ 決められた役割で設計

Coding➡ 決められたスタイルを守る

482011年11月27日日曜日

おつかれさまでした!!

➡ Webデザイナーのための、PHPプログラミングWordPressで学ぶCMSカスタマイズ入門～WordPressサイト構築編～• http://www.pasonatech.co.jp/event/index.jsp?no=3311

492011年11月27日日曜日

Naming命名規則について

502011年11月27日日曜日

命名規則

キャメルケース➡ getBlogEntries

スネークケース➡ get_blog_entry

ハイフン区切り(チェインケースとか?)➡ get-blog-entry.php

512011年11月27日日曜日

名前空間的な話

独自の名前空間(擬似的)を持とう➡ ドメイン名、プロジェクト名、用途名など• jp_greative_get_blog_info();

• JP_GREATIVE_DEFAULT_LIB_PATH

522011年11月27日日曜日

定数

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/

532011年11月27日日曜日

関数名のつけかた

get_➡ だいたい何かを出力する系• get_user_info()

is_➡ 何かを判定する系• is_user_active()

display_➡ 何かを出力する系• display_side_ad()

542011年11月27日日曜日

他言語化系のハナシ

_e()から__()へ➡ __e()は、翻訳済みの語句を、echoで出力➡ __()は、翻訳済みの語句を、返す

function内で使うと、具合が悪い時があるので、_e()を__()に変える

552011年11月27日日曜日

learning効率的にまなぶ

562011年11月27日日曜日

Codexを読もう

Codexの歩き方➡ テンプレートタグ➡ 条件分岐タグ➡ インクルードタグ➡ 関数

ブクマしておこう

572011年11月27日日曜日

本家の読み方

困ったら本家を読もう➡ Usage　…　構文➡ Parameters　…　引数➡ Examples　…　例➡ Source File　…　この関数が書かれているファイル➡ Related　…　関係している関数

Deprecatedに注意

582011年11月27日日曜日

WordPressのコーディングの基準にまず目を通そう

WordPress コーディング基準➡ http://codex.wordpress.org/WordPress_Coding_Standards

592011年11月27日日曜日

PHPの規約にも目を通そう

Zend Framwork PHP標準コーディング規約➡ http://framework.zend.com/manual/ja/coding-standard.html

602011年11月27日日曜日

Othersその他

612011年11月27日日曜日

編集画面からやらない

IDE推奨➡ とくにプログラムが苦手な方こそ

➡ できればバージョン管理も

622011年11月27日日曜日

WordPressでのMVCとは

本気モードでプラグインとかを作ろうと考えたら➡ WP MVC• Webアプリケーションフレームワーク

➡ WP Unit• ユニットテスト

こういうのを使うと、よいよ

この話はいずれまた..

632011年11月27日日曜日

パーツに直接アクセスが可能

実行すると表示されてしまうパーツは、やめよう➡ 例）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

642011年11月27日日曜日

テーマディレクトリにあるindex.php

/PATH/wp-content/themes

index.php

twentyeleven

652011年11月27日日曜日

index.phpにこんなことが書かれている

沈黙は金なり

<?php//  Silence  is  golden.?>

index.php

662011年11月27日日曜日