• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

第一回Word bench八王子

on

  • 2,181 views

11月27日開催

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

Statistics

Views

Total Views
2,181
Views on SlideShare
2,154
Embed Views
27

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 27

http://experiment.street-square.com 22
http://s.deeeki.com 3
http://sample7.example.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    第一回Word bench八王子 第一回Word bench八王子 Presentation Transcript

    • WordPress PHPカスタマイズと、それまでの流れ 真木 俊久第一回 WordBench八王子 1
    • HTML JavaScript PHP CSS JQuery WordPress WordPressWordPress から学べることはたくさんありますWordPress のカスタマイズの流れをお話します ここまで HTML、CSS の流れ JavaScript、jQuery PHP、WordPress MySQL、Apache第一回 WordBench八王子 2
    • HTML JavaScript PHP CSS JQuery WordPress HTML, CSS for WordPressHTMLレイアウト TABLE+HTMLタグ=格子状 <tr><td width=“100px”>○○○</td></tr> HTML要素+CSS=高い自由度 (divはwidthなどのHTMLタグは効かない) div.menu li { float: left; position: relative; }第一回 WordBench八王子 3
    • HTML JavaScript PHP CSS JQuery WordPress HTML, CSS for WordPress Padding Margin WordPress3.0 のテーマ #wrapper 「Twenty Ten」のレイアウト #header #main #container #primary #container { float: left; margin: 0 -240px 0 0; #secondary width: 100%; } 2カラムレイアウトにしている #footer第一回 WordBench八王子 4
    • HTML JavaScript PHP CSS JQuery WordPress HTML, CSS for WordPressFirebug (FirefoxのAddon) HTML: 要素を選択すると・・・ 効いているスタイル文、 優先順位が分かる (右図ではB≫A) レイアウトが表示され、 Padding や Margin の 範囲が分かる第一回 WordBench八王子 5
    • HTML JavaScript PHP CSS JQuery WordPress JavaScript/jQuery for WordPressjQuery ・・・ JavaScript のプラグイン ・JavaScript の作成が簡単に! ・スライドショー、ライトボックス等のプラグイン 私がよく使っていたのは 「csv2table」 ・ CSVファイルを table表示 → 社内のExcel資産の流用が簡単にできる第一回 WordBench八王子 6
    • HTML JavaScript PHP CSS JQuery WordPress JavaScript/jQuery for WordPressFireQuery(FirefoxのAddon) ・JQuery や CSS の開発に便利 ・本番サイトでも試せる (例)Google ロゴの変更 コンソールからJQueryを 実行して変更できる ※ブラウザ上のみ >>> $(‘div#logo’).css(‘background’,’yellowgreen’)第一回 WordBench八王子 7
    • HTML JavaScript PHP CSS JQuery WordPress Template for WordPressWordPressでは多くの仕組みが用意されている • テンプレート階層 • ページテンプレート • 子テーマ(テーマのテンプレート) • アクションフック、フィルターフック • ウィジェット • ショートコード • プラグイン 説明しきれませんが、便利なので活用下さい第一回 WordBench八王子 8
    • HTML JavaScript PHP CSS JQuery WordPress PHP Types for WordPressPHPの自動型変換 便利ですが要注意、「===」の方が安心。 整数値を文字列と比較したり、比較に数値形式の文字が 含まれる場合は、文字列が 数値に変換され、 数値として の比較を行います。これらのルールは、 switch 文にも適 用されます。 === あるいは !== による比較では型変換は発生しません。 この場合は値だけでなく型も比較します。 (出典)PHP Manual http://www.php.net/manual/ja/第一回 WordBench八王子 9
    • HTML JavaScript PHP CSS JQuery WordPress PHP Types for WordPressPHPの自動型変換 $value = 1; var_dump( $value == ‘1回WB八王子 ); bool(true) var_dump((string)$value ===‘1回WB八王子’ ); bool(false) $a == $b 等しい $a が $b に等しい時に TRUE $a === $b 等しい $a が $b に等しく同じ型である場合に TRUE第一回 WordBench八王子 10
    • HTML JavaScript PHP CSS JQuery WordPress PHP for WordPress意外と奥が深い構文 よく使うのですが・・・ $wp_query = new WP_Query(array(post_type=‘food’)); while(have_posts()) : the_post(); $post->ID the_titile(); the_content(); endwhile;第一回 WordBench八王子 11
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPress意外と奥が深い構文 よく使うのですが・・・ $wp_query = new WP_Query(array(post_type=‘food’)); while(have_posts()) : the_post(); $post->ID the_titile(); クラスのコンストラクタ the_content(); クラスの型に基づいて、 endwhile; オブジェクトを生成する第一回 WordBench八王子 12
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressnew WP_Query はコンストラクタ・ クラス (Class) クラスは、変数およびこれらの変数で動作する 関数の集まりです。変数は var で、そして関数 は function で定義します Class WP_Query { var 変数; function 関数(){…}} ・ コンストラクタ (Constructor) オブジェクトをクラスから構築する初期化関数 $wp_query = new WP_Query( array(・・・) );第一回 WordBench八王子 13
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ カプセル化(データ隠蔽)・ 変数と関数がまとまっていて、分かりやすい! ○○○.php ×××.php △△△.php □□□.php 処理1 処理2 処理3 処理4 ??? グローバル 変数第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ カプセル化(データ隠蔽)・ 変数と関数がまとまっていて、分かりやすい! ○○○.php ×××.php △△△.php □□□.php the_title the_con get_post ・・・ () tent() _class() $post post-template.php第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ カプセル化(データ隠蔽)・ 変数と関数がまとまっていて、分かりやすい! ○○○.php ×××.php △△△.php □□□.php ??? the_title the_con get_post ・・・ () tent() _class() $post post-template.php第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ カプセル化(データ隠蔽)・ 変数と関数がまとまっていて、分かりやすい! ○○○.php ×××.php △△△.php □□□.php POA 処理の流れが 分かり易い 疎 結 the_post &get_pos 合 () ts() have_ ・・・ DOA posts() $posts,・・・ データの 状態遷移が query.php Class WP_Query 分かり易い第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ カプセル化(データ隠蔽)・ 変数と関数がまとまっていて、分かりやすい! ○○○.php ×××.php △△△.php □□□.php 投稿 添付 ページ オブジェクト post attachment page コンストラクタ new WP_Query query.php Class WP_Query (‘post_type=・・・’)第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Class for WordPressクラスのよいところ 継承( inheritance )・ 変数や関数をセットで呼び出せる! class my_widget extends WP_Widget function my_widget() Class WP_Widget function widget() function form() 処理 function update()第一回 WordBench八王子
    • HTML JavaScript PHP CSS JQuery WordPress PHP Object for WordPressPHPオブジェクトをvar_dumpで見分ける Array $array = array(‘post_type’=>‘post’); var_dump($array); Object while(have_posts()):the_post(); var_dump($post); endwhile; Class $wp_query = new WP_Query( $array ); var_dump($wp_query); Xml $xml=@simplexml_load_file(‘$rss_url’); var_dump($xml);第一回 WordBench八王子 20
    • HTML JavaScript PHP CSS JQuery WordPress PHP Object for WordPressPHPのオブジェクト をvar_dumpで見分ける Array array(1) { ["post_type"]=> string(4) "post" } 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第一回 WordBench八王子 21
    • HTML JavaScript PHP CSS JQuery WordPress PHP Object for WordPress変数や関数の呼び出し方 配列とオブジェクトで呼び出し方が違う Array $post_type = array[’post_type’]; Object $post_id = $post->ID; (Class) $post = $wp_query->the_post();第一回 WordBench八王子 22
    • HTML JavaScript PHP CSS JQuery WordPress PHP Global for WordPress意外と奥が深い構文、よく使うのですが・・・ $wp_query = new WP_Query(array(post_type=‘food’)); while(have_post()) : the_post() $post->ID the_titile(); 引数がない the_content(); 投稿IDを渡さずに、 タイトル・本文を表示 ??? endwhile;第一回 WordBench八王子 23
    • HTML JavaScript PHP CSS JQuery WordPress PHP Global for WordPress意外と奥が深い構文、よく使うのですが・・・ $wp_query = new WP_Query(array(post_type=‘food’)); while(have_post()) : the_post() $post->ID the_titile(); グローバル変数 the_content(); 通常のスコープ(関数内) を超えて使用できる endwhile;第一回 WordBench八王子 24
    • HTML JavaScript PHP CSS JQuery WordPress PHP Global for WordPress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); }}第一回 WordBench八王子 25
    • HTML JavaScript PHP CSS JQuery WordPress PHP Global for WordPressテンプレート階層やLoop外で使用する際は (自作関数内など)、global宣言をして下さい global $wp_query; global $post; $wp_query = new WP_Query(array(・・・)); while(have_posts()) : the_post(); the_content(); endwhile;第一回 WordBench八王子 26
    • PHP for WordPress ご清聴ありがとうございました第一回 WordBench八王子 27