第一回Word bench八王子

2,168 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,168
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

第一回Word bench八王子

  1. 1. 第一回 WordBench八王子第一回 WordBench八王子 WordPress PHPカスタマイズと、それまでの流れ 真木 俊久 1
  2. 2. 第一回 WordBench八王子 WordPress WordPress から学べることはたくさんあります WordPress のカスタマイズの流れをお話します  HTML、CSS  JavaScript、jQuery  PHP、WordPress  MySQL、Apache 2 ここまで の流れ HTML CSS JavaScript JQuery PHP WordPress
  3. 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. 4. 第一回 WordBench八王子 #container { float: left; margin: 0 -240px 0 0; width: 100%; } #wrapper  WordPress3.0 のテーマ 「Twenty Ten」のレイアウト #main #container #primary #secondary #header #footer2カラムレイアウトにしている Padding Margin 4 HTML CSS JavaScript JQuery PHP WordPress HTML, CSS for WordPress
  5. 5. 第一回 WordBench八王子 Firebug (FirefoxのAddon) 5 レイアウトが表示され、 Padding や Margin の 範囲が分かる 効いているスタイル文、 優先順位が分かる (右図ではB≫A) HTML: 要素を選択すると・・・ HTML CSS JavaScript JQuery PHP WordPress HTML, CSS for WordPress
  6. 6. 第一回 WordBench八王子 jQuery ・・・ JavaScript のプラグイン ・JavaScript の作成が簡単に! ・スライドショー、ライトボックス等のプラグイン 私がよく使っていたのは 「csv2table」 ・ CSVファイルを table表示 → 社内のExcel資産の流用が簡単にできる 6 HTML CSS JavaScript JQuery PHP WordPress JavaScript/jQuery for WordPress
  7. 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. 8. 第一回 WordBench八王子 WordPressでは多くの仕組みが用意されている • テンプレート階層 • ページテンプレート • 子テーマ(テーマのテンプレート) • アクションフック、フィルターフック • ウィジェット • ショートコード • プラグイン 説明しきれませんが、便利なので活用下さい 8 HTML CSS JavaScript JQuery PHP WordPress Template for WordPress
  9. 9. 第一回 WordBench八王子 PHPの自動型変換 便利ですが要注意、「===」の方が安心。 9 HTML CSS JavaScript JQuery PHP WordPress PHP Types for WordPress 整数値を文字列と比較したり、比較に数値形式の文字が 含まれる場合は、文字列が 数値に変換され、 数値として の比較を行います。これらのルールは、 switch 文にも適 用されます。 === あるいは !== による比較では型変換は発生しません。 この場合は値だけでなく型も比較します。 (出典)PHP Manual http://www.php.net/manual/ja/
  10. 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. 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. 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. 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. 14. 第一回 WordBench八王子 クラスのよいところ カプセル化(データ隠蔽) ・ 変数と関数がまとまっていて、分かりやすい! HTML CSS JavaScript JQuery PHP WordPress PHP Class for WordPress ○○○.php ×××.php △△△.php □□□.php グローバル 変数 処理1 処理2 処理3 処理4 ???
  15. 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. 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. 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,・・・ POA 処理の流れが 分かり易い DOA データの 状態遷移が 分かり易い 疎 結 合
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. 第一回 WordBench八王子 PHP for WordPress ご清聴ありがとうございました 27

×