Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第一回Word bench八王子

2,306 views

Published on

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

Published in: Technology, Design
  • Login to see the comments

  • Be the first to like this

第一回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

×