第一回word bench八王子

第一回 WordBench八王子第一回 WordBench八王子

WordPressPHPカスタマイズと、それまでの流れ

真木俊久

1

第一回 WordBench八王子

WordPress

WordPress から学べることはたくさんあります

WordPress のカスタマイズの流れをお話します

HTML、CSS

JavaScript、jQuery

PHP、WordPress

MySQL、Apache

2

ここまでの流れ

HTMLCSS

JavaScriptJQuery

PHPWordPress


HTMLレイアウト

TABLE＋HTMLタグ＝格子状

<tr><td width=“100px”>○○○</td></tr>

HTML要素＋CSS＝高い自由度（divはwidthなどのHTMLタグは効かない）

div.menu li { float: left; position: relative; }

3

HTMLCSS

JavaScriptJQuery

PHPWordPress

HTML, CSS for WordPress


#container {float: left;margin: 0 -240px 0 0;width: 100%;

}

#wrapperWordPress3.0 のテーマ

「Twenty Ten」のレイアウト#main

#container #primary

#secondary

#header

#footer２カラムレイアウトにしている

Padding Margin

4

HTMLCSS

JavaScriptJQuery

PHPWordPress



Firebug （FirefoxのAddon）

5

レイアウトが表示され、Padding や Margin の範囲が分かる

効いているスタイル文、優先順位が分かる（右図ではＢ≫Ａ）

ＨＴＭＬ：要素を選択すると・・・

HTMLCSS

JavaScriptJQuery

PHPWordPress



jQuery ・・・ JavaScript のプラグイン

・JavaScript の作成が簡単に！

・スライドショー、ライトボックス等のプラグイン

私がよく使っていたのは「csv2table」

・ CSVファイルを table表示

→ 社内のExcel資産の流用が簡単にできる

6

HTMLCSS

JavaScriptJQuery

PHPWordPress

JavaScript/jQuery for WordPress


FireQuery（FirefoxのAddon）

・JQuery や CSS の開発に便利

・本番サイトでも試せる

7

（例）Google ロゴの変更コンソールからJQueryを実行して変更できる

※ブラウザ上のみ

>>> $(‘div#logo’).css(‘background’,’yellowgreen’)

HTMLCSS

JavaScriptJQuery

PHPWordPress

JavaScript/jQuery for WordPress


WordPressでは多くの仕組みが用意されている

• テンプレート階層

• ページテンプレート

• 子テーマ（テーマのテンプレート）

• アクションフック、フィルターフック

• ウィジェット

• ショートコード

• プラグイン

説明しきれませんが、便利なので活用下さい

8

HTMLCSS

JavaScriptJQuery

PHPWordPress

Template for WordPress


PHPの自動型変換

便利ですが要注意、「===」の方が安心。

9

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP Types for WordPress

整数値を文字列と比較したり、比較に数値形式の文字が含まれる場合は、文字列が数値に変換され、数値としての比較を行います。これらのルールは、 switch 文にも適用されます。=== あるいは !== による比較では型変換は発生しません。この場合は値だけでなく型も比較します。

(出典）PHP Manual http://www.php.net/manual/ja/


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

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP Types for WordPress


意外と奥が深い構文よく使うのですが・・・

$wp_query =

new WP_Query(array(post_type=‘food’));

while(have_posts()) : the_post();

$post->ID

the_titile();

the_content();

endwhile;

11

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP for WordPress


意外と奥が深い構文よく使うのですが・・・

$wp_query =



$post->ID

the_titile();

the_content();

endwhile;

クラスのコンストラクタ

クラスの型に基づいて、オブジェクトを生成する

12

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP Class for WordPress


new WP_Query はコンストラクタ

・クラス (Class)

クラスは、変数およびこれらの変数で動作する

関数の集まりです。変数は var で、そして関数は function で定義しますClass WP_Query { var 変数; function 関数(){…}}

・コンストラクタ (Constructor)

オブジェクトをクラスから構築する初期化関数$wp_query = new WP_Query( array(・・・) );

13

HTMLCSS

JavaScriptJQuery

PHPWordPress



クラスのよいところカプセル化（データ隠蔽）

・変数と関数がまとまっていて、分かりやすい！

HTMLCSS

JavaScriptJQuery

PHPWordPress


○○○.php ×××.php △△△.php □□□.php

グローバル変数

処理１処理２処理３処理４

???


post-template.php



HTMLCSS

JavaScriptJQuery

PHPWordPress


○○○.php ×××.php △△△.php □□□.php

$post

the_title()

the_content()

get_post_class()

・・・


post-template.php



HTMLCSS

JavaScriptJQuery

PHPWordPress


○○○.php ×××.php △△△.php □□□.php

$post

the_title()

the_content()

get_post_class()

・・・

???




HTMLCSS

JavaScriptJQuery

PHPWordPress


query.php

○○○.php ×××.php △△△.php □□□.php

have_posts()

the_post()

&get_posts()

・・・

Class WP_Query

$posts,・・・

ＰＯＡ処理の流れが

分かり易い

DOAデータの

状態遷移が分かり易い

疎結合




HTMLCSS

JavaScriptJQuery

PHPWordPress


query.php

○○○.php ×××.php △△△.php □□□.php

Class WP_Query

投稿post

添付attachment

ページpage

オブジェクト

コンストラクタnew WP_Query

(‘post_type=・・・’)


クラスのよいところ継承（ inheritance ）

・変数や関数をセットで呼び出せる！

HTMLCSS

JavaScriptJQuery

PHPWordPress


class my_widget extends WP_Widget

function my_widget()

function widget()

function form()

function update()

Class WP_Widget

処理


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

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP Object for WordPress


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

HTMLCSS

JavaScriptJQuery

PHPWordPress



変数や関数の呼び出し方

配列とオブジェクトで呼び出し方が違う

Object $post_id = $post->ID;

（Class） $post = $wp_query->the_post();

Array $post_type = array[’post_type’];

22

HTMLCSS

JavaScriptJQuery

PHPWordPress



意外と奥が深い構文、よく使うのですが・・・

$wp_query =


while(have_post()) : the_post()

$post->ID

the_titile();

the_content();

endwhile;

引数がない

投稿IDを渡さずに、タイトル・本文を表示 ???

23

HTMLCSS

JavaScriptJQuery

PHPWordPress

PHP Global for WordPress


意外と奥が深い構文、よく使うのですが・・・

$wp_query =


while(have_post()) : the_post()

$post->ID

the_titile();

the_content();

endwhile;

グローバル変数

通常のスコープ（関数内）を超えて使用できる

24

HTMLCSS

JavaScriptJQuery

PHPWordPress



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

HTMLCSS

JavaScriptJQuery

PHPWordPress



テンプレート階層やLoop外で使用する際は

（自作関数内など）、global宣言をして下さい

global $wp_query;

global $post;

$wp_query = new WP_Query(array(・・・));


the_content();

endwhile;

26

HTMLCSS

JavaScriptJQuery

PHPWordPress



PHP for WordPress

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

27

第一回word bench八王子

Technology