クリーンな WordPress サイトのための PHP コーディングのお作法 ― 計画的に...
-
Upload
kazuhiro-hara -
Category
Technology
-
view
14.107 -
download
0
description
Transcript of クリーンな 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とは?
➡ クリエイティブルールに沿った成果物の自動化と、トレンドに即した継続的な改良を統計的手法で解決
統計
トレンドデザイン
システム
(グレーティブ)
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日日曜日