11月27日開催 前半：WordPressカスタマイズにあたって知っておきたいこと 後半：PHPカスタマイズでつまづきやすいこと

1. 第一回 WordBench八王子第一回 WordBench八王子
WordPress
PHPカスタマイズと、それまでの流れ
真木 俊久
1

2. 第一回 WordBench八王子
WordPress
WordPress から学べることはたくさんあります
WordPress のカスタマイズの流れをお話します
 HTML、CSS
 JavaScript、jQuery
 PHP、WordPress
 MySQL、Apache
2
ここまで
の流れ
HTML
CSS
JavaScript
JQuery
PHP
WordPress

3. 第一回 WordBench八王子
HTMLレイアウト
TABLE＋HTMLタグ＝格子状
<tr><td width=“100px”>○○○</td></tr>
HTML要素＋CSS＝高い自由度
（divはwidthなどのHTMLタグは効かない）
div.menu li { float: left; position: relative; }
3
HTML
CSS
JavaScript
JQuery
PHP
WordPress
HTML, CSS for WordPress

4. 第一回 WordBench八王子
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
#wrapper
 WordPress3.0 のテーマ
「Twenty Ten」のレイアウト
#main
#container #primary
#secondary
#header
#footer２カラムレイアウトにしている
Padding Margin
4
HTML
CSS
JavaScript
JQuery
PHP
WordPress
HTML, CSS for WordPress

5. 第一回 WordBench八王子
Firebug （FirefoxのAddon）
5
レイアウトが表示され、
Padding や Margin の
範囲が分かる
効いているスタイル文、
優先順位が分かる
（右図ではＢ≫Ａ）
ＨＴＭＬ：
要素を選択すると・・・
HTML
CSS
JavaScript
JQuery
PHP
WordPress
HTML, CSS for WordPress

6. 第一回 WordBench八王子
jQuery ・・・ JavaScript のプラグイン
・JavaScript の作成が簡単に！
・スライドショー、ライトボックス等のプラグイン
私がよく使っていたのは 「csv2table」
・ CSVファイルを table表示
→ 社内のExcel資産の流用が簡単にできる
6
HTML
CSS
JavaScript
JQuery
PHP
WordPress
JavaScript/jQuery for WordPress

7. 第一回 WordBench八王子
FireQuery（FirefoxのAddon）
・JQuery や CSS の開発に便利
・本番サイトでも試せる
7
（例）Google ロゴの変更
コンソールからJQueryを
実行して変更できる
※ブラウザ上のみ
>>> $(‘div#logo’).css(‘background’,’yellowgreen’)
HTML
CSS
JavaScript
JQuery
PHP
WordPress
JavaScript/jQuery for WordPress

8. 第一回 WordBench八王子
WordPressでは多くの仕組みが用意されている
• テンプレート階層
• ページテンプレート
• 子テーマ（テーマのテンプレート）
• アクションフック、フィルターフック
• ウィジェット
• ショートコード
• プラグイン
説明しきれませんが、便利なので活用下さい
8
HTML
CSS
JavaScript
JQuery
PHP
WordPress
Template for WordPress

9. 第一回 WordBench八王子
PHPの自動型変換
便利ですが要注意、「===」の方が安心。
9
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Types for WordPress
整数値を文字列と比較したり、比較に数値形式の文字が
含まれる場合は、文字列が 数値に変換され、 数値として
の比較を行います。これらのルールは、 switch 文にも適
用されます。
=== あるいは !== による比較では型変換は発生しません。
この場合は値だけでなく型も比較します。
(出典）PHP Manual http://www.php.net/manual/ja/

10. 第一回 WordBench八王子
var_dump((string)$value ===‘1回WB八王子’ );
bool(false)
$value = 1;
var_dump( $value == ‘1回WB八王子' );
bool(true)
PHPの自動型変換
$a == $b 等しい $a が $b に等しい時に TRUE
$a === $b 等しい $a が $b に等しく同じ型である場合に TRUE
10
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Types for WordPress

11. 第一回 WordBench八王子
意外と奥が深い構文 よく使うのですが・・・
$wp_query =
new WP_Query(array(post_type=‘food’));
while(have_posts()) : the_post();
$post->ID
the_titile();
the_content();
endwhile;
11
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP for WordPress

12. 第一回 WordBench八王子
意外と奥が深い構文 よく使うのですが・・・
$wp_query =
new WP_Query(array(post_type=‘food’));
while(have_posts()) : the_post();
$post->ID
the_titile();
the_content();
endwhile;
クラスのコンストラクタ
クラスの型に基づいて、
オブジェクトを生成する
12
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress

13. 第一回 WordBench八王子
new WP_Query はコンストラクタ
・ クラス (Class)
クラスは、変数およびこれらの変数で動作する
関数の集まりです。変数は var で、そして関数
は function で定義します
Class WP_Query { var 変数; function 関数(){…}}
・ コンストラクタ (Constructor)
オブジェクトをクラスから構築する初期化関数
$wp_query = new WP_Query( array(・・・) );
13
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress

14. 第一回 WordBench八王子
クラスのよいところ カプセル化（データ隠蔽）
・ 変数と関数がまとまっていて、分かりやすい！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
○○○.php ×××.php △△△.php □□□.php
グローバル
変数
処理１ 処理２ 処理３ 処理４
???

15. 第一回 WordBench八王子
post-template.php
クラスのよいところ カプセル化（データ隠蔽）
・ 変数と関数がまとまっていて、分かりやすい！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
○○○.php ×××.php △△△.php □□□.php
$post
the_title
()
the_con
tent()
get_post
_class()
・・・

16. 第一回 WordBench八王子
post-template.php
クラスのよいところ カプセル化（データ隠蔽）
・ 変数と関数がまとまっていて、分かりやすい！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
○○○.php ×××.php △△△.php □□□.php
$post
the_title
()
the_con
tent()
get_post
_class()
・・・
???

17. 第一回 WordBench八王子
クラスのよいところ カプセル化（データ隠蔽）
・ 変数と関数がまとまっていて、分かりやすい！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
query.php
○○○.php ×××.php △△△.php □□□.php
have_
posts()
the_post
()
&get_pos
ts()
・・・
Class WP_Query
$posts,・・・
ＰＯＡ
処理の流れが
分かり易い
DOA
データの
状態遷移が
分かり易い
疎
結
合

18. 第一回 WordBench八王子
クラスのよいところ カプセル化（データ隠蔽）
・ 変数と関数がまとまっていて、分かりやすい！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
query.php
○○○.php ×××.php △△△.php □□□.php
Class WP_Query
投稿
post
添付
attachment
ページ
page
オブジェクト
コンストラクタ
new WP_Query
(‘post_type=・・・’)

19. 第一回 WordBench八王子
クラスのよいところ 継承（ inheritance ）
・ 変数や関数をセットで呼び出せる！
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Class for WordPress
class my_widget extends WP_Widget
function my_widget()
function widget()
function form()
function update()
Class WP_Widget
処理

20. 第一回 WordBench八王子
PHPオブジェクトをvar_dumpで見分ける
Class $wp_query = new WP_Query( $array );
var_dump($wp_query);
Object while(have_posts()):the_post();
var_dump($post); endwhile;
Xml $xml=@simplexml_load_file(‘$rss_url’);
var_dump($xml);
Array $array = array(‘post_type’=>‘post’);
var_dump($array);
20
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Object for WordPress

21. 第一回 WordBench八王子
PHPのオブジェクト をvar_dumpで見分ける
Object object(stdClass)#46 (24) { ["ID"]=>
int(1) ["post_author“]=> string(1) "1"
Class object(WP_Query)#98 (41) {
["query_vars"]=> array(55){ ["post_typ
Xml object(SimpleXMLElement)#114(2){
["@attributes"]=> array(1) { ["version
Array array(1) { ["post_type"]=> string(4)
"post" }
21
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Object for WordPress

22. 第一回 WordBench八王子
変数や関数の呼び出し方
配列とオブジェクトで呼び出し方が違う
Object $post_id = $post->ID;
（Class） $post = $wp_query->the_post();
Array $post_type = array[’post_type’];
22
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Object for WordPress

23. 第一回 WordBench八王子
意外と奥が深い構文、よく使うのですが・・・
$wp_query =
new WP_Query(array(post_type=‘food’));
while(have_post()) : the_post()
$post->ID
the_titile();
the_content();
endwhile;
引数がない
投稿IDを渡さずに、
タイトル・本文を表示 ???
23
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Global for WordPress

24. 第一回 WordBench八王子
意外と奥が深い構文、よく使うのですが・・・
$wp_query =
new WP_Query(array(post_type=‘food’));
while(have_post()) : the_post()
$post->ID
the_titile();
the_content();
endwhile;
グローバル変数
通常のスコープ（関数内）
を超えて使用できる
24
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Global for WordPress

25. 第一回 WordBench八王子
the_post() の流れ（概要）
(1) function the_post() {
global $wp_query;
$wp_query->the_post(); }
(2) class WP_Query {
function the_post() {
global $post;
setup_postdata($post); }}
グローバル変数
の宣言
25
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Global for WordPress

26. 第一回 WordBench八王子
テンプレート階層やLoop外で使用する際は
（自作関数内など）、global宣言をして下さい
global $wp_query;
global $post;
$wp_query = new WP_Query(array(・・・));
while(have_posts()) : the_post();
the_content();
endwhile;
26
HTML
CSS
JavaScript
JQuery
PHP
WordPress
PHP Global for WordPress

27. 第一回 WordBench八王子
PHP for WordPress
ご清聴ありがとうございました
27