脱コピペ!デザイナーにもわかるPHPとWP_Query

2,966 views

Published on

脱コピペ!デザイナーにもわかるPHPとWP_Query

  1. 1. WordFes2013 脱コピペ! デザイナーにもわかるPHPと WP_Query な・・・なんとなくでも理解してみよう!
  2. 2. 自己紹介
  3. 3. 名古屋で株式会社ベクトル というウェブ制作会社をしています。 普段はWordPressを使って企業サイトなどを制作しながら生きています。 デザイナー上がりなので高度なPGやサーバー・DBなど、バックエンドの 部分は苦手です… 名前:石川栄和 Twitter : @kurudrive 2013 WordCrab Fukui セッションスピーカー 2012 WordCamp Tokyo セッションスピーカー 2012 WordBeach Nagoya 実行委員 & セッションスピーカー 2012 WordBench Tokyo LT その他セミナーやLTも少し… 最近のWordPressコミュニティでの活動
  4. 4. テーマ作ってます 企業サイト向けテーマ「BizVektor」
  5. 5. このセッションで言いたいこと
  6. 6. PHPと配列の基本を 理解すれば出来る事が 飛躍的に増える!
  7. 7. このセッションの内容 • PHPの書式の超基本 • 条件分岐 • 配列を理解する • WP_Query で情報を取り出す • 投稿の中身を理解する • ユーザーのリストを作ってみる
  8. 8. 書式の超基本
  9. 9. PHPの書き方 PHPはここから PHPはここまで PHPを書く時は必ず <?php ではじまります。 <?php phpのプログラム; ?>
  10. 10. <h1> the_title(); </h1>
  11. 11. <h1><?php the_title(); ?></h1> <h1> the_title(); </h1>
  12. 12. echo ~ 後ろに続く文字列などを出力します。 <?php echo ‘表示します’; ?> 表示します
  13. 13. 変数 $で始まる英字の文字列に いろいろなものを格納できます。 <?php $a = ‘表示します’; echo $a; ?> 表示します
  14. 14. <?php $a = ‘表示します’; echo $a; ?> 文字列を変数に代入する時は ’ ’ でくくる 処理の行の最後は ; 数学の = とは違う! 右辺の値を左辺に代入
  15. 15. 条件分岐 <?php if ( $a == ‘white’ ) { echo ‘ホワイト企業です。’; } else { echo ‘ブラック企業です。’; } ?> $a の中身が white かどうか たぶんこれは何となく意味がわかると思います。
  16. 16. 条件分岐_比較が無いのは真か偽か <?php if ( $a ) { echo ‘ホワイト企業です。’; } ?> $a に何か値が入っている = 真
  17. 17. <?php $age = esc_html( post_custom(‘age’) ); if ( $age ) { echo ‘年齢:’. $age; } ?> 年齢入力用のカスタムフィールド 「age」の値を $age に代入 年齢欄が入力されていたら カスタムフィールドに値が入力されて いる場合のみ表示する。 用例 ピリオドは「連結」の意味です。
  18. 18. 条件分岐_書き方が複数ある! <?php if ( $a ) { echo ‘ホワイト企業です。’; } ?> <?php if ( $a ) : ?> <?php echo ‘ホワイト企業です。’; ?> <?php endif; ?> 同じ
  19. 19. 変数(配列) $a
  20. 20. $a = array( ‘a’ , ‘b’ ); 配列を定義
  21. 21. 配列の中身の取り出し方 $a = array( ‘a’,‘b’,‘c’ ); 0個目 1個目 2個目 echo $a[0].‘<br />’; echo $a[1].‘<br />’; echo $a[2].‘<br />’;
  22. 22. $a = array( ‘a’,‘b’,‘c’ ); echo $a[0].‘<br />’; echo $a[1].‘<br />’; echo $a[2].‘<br />’; a b c
  23. 23. 変数(連想配列) 値だけを複数持つのではなく、 キーとセットで持てる $a = array( ‘cat' => 5, ‘posts_per_page' => 10, ); WordPressでよく見かけるヤツ!!
  24. 24. $a = array( ‘cat' => 5, ‘posts_per_page' => 10, ); キー 値 $a という1つの変数の中に、 いろいろな情報を持たせている。
  25. 25. 連想配列の中身の取り出し方 $a = array( ‘cat' => 5, ‘posts_per_page' => 10, ); echo $a[‘cat’].‘<br />’; echo $a[‘post_per_page’].‘<br />’;
  26. 26. 5 10
  27. 27. WP_QUERY 投稿や固定ページのデータを自分の求める条件で取得・表示!
  28. 28. できる事 トップページや固定ページ、 サイドバーなどに、 任意の条件で絞り込んだ 記事一覧を表示したい!
  29. 29. 例 • 不動産サイト • カスタム投稿タイプ ‘room’に 物件情報を登録 • 畳数や家賃、築年数、駅からの距離など をカスタムフィールドに登録 トップページに特定の条件に 合致する物件情報を表示
  30. 30. 1.絞り込み条件を作成 女性向けのオススメ物件として • オートロックあり (カスタムフィールド ‘autolock’) • 独立洗面台完備 (カスタムフィールド ‘senmendai’) の物件を表示したい場合
  31. 31. $args = array( 'post_type' => 'room', 'posts_per_page' => 5, 'meta_query' => array( array( 'key' => 'autolock', 'value' => 'yes', ), array( 'key' => 'senmendai', 'value' => 'yes', ) ) ); 絞込の条件を配列で定義して、 配列に格納します。 投稿タイプが room カスタムフィールドのパラメーター 独立洗面台(senmendai)が あり(yes) 1ページの表示件数 オートロック(autolock)が あり(yes)
  32. 32. これで $args に条件が入りました。 http://notnil-creative.com/blog/archives/1288 条件のパラメーターは非常に沢山あります。 下記など参考にして試してみて下さい。 他 「WP_Query パラメーター」で検索!
  33. 33. 2.該当記事のデータを取得 new WP_Query( $args ); 絞込条件を指定した配列 WP_Queryに $args を入れる! $datas =
  34. 34. 3.データをループして出力 カテゴリーや月別アーカイブなど <ul> <?php while ( have_posts() ) : the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; ?> </ul> アーカイブ系のページの場合、ループの中に表示する記事の条件は 予め設定されている。 該当データがあるかないか 次の投稿に進み、 グローバル変数$postを設定。
  35. 35. さっき出来た $datas の 内容でループしたい。
  36. 36. <ul> <?php while ( $datas->have_posts() ) : $datas-> the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; ?> </ul> <?php wp_reset_query(); ?> $datas-> を付ける事で、 $datasの内容でループする
  37. 37. <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'post_type' => 'room', 'meta_query' => array( array( 'key' => 'autolock', 'value' => 'yes', ), array( 'key' => 'senmendai', 'value' => 'yes', ) ) ); $datas = new WP_Query( $args ); ?> <ul> <?php while ( $datas->have_posts() ) : $datas-> the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; ?> </ul> <?php wp_reset_query(); ?>
  38. 38. 投稿データの中身
  39. 39. ところで、ループの中で、 $post->post_title; $post->ID; とか、 見かけた事ありませんか?
  40. 40. この $post の中に、 1つの投稿のデータが 連想配列で入っています。
  41. 41. カテゴリーや月別アーカイブなど <ul> <?php while ( have_posts() ) : the_post(); ?> <li><?php the_title(); ?></li> <?php endwhile; ?> </ul> 該当データがあるかないか 次の投稿に進み、 グローバル変数$postを設定。
  42. 42. the_title()の部分は 下記のようにも書けます。 ※本当はエスケープしましょう。 <ul> <?php while ( have_posts() ) : the_post(); ?> <li><?php echo $post->post_title; ?></li> <?php endwhile; ?> </ul>
  43. 43. <ul> <?php while ( have_posts() ) : the_post(); ?> <li><?php echo $post->post_title; ?></li> <?php endwhile; ?> </ul> 次の投稿に進み、 グローバル変数$postを設定。 該当する投稿のデータが $post の中に入っている
  44. 44. $post の中身を 覗いてみよう。
  45. 45. <ul> <?php while ( have_posts() ) : the_post(); ?> <?php print ‘<pre>’; print_r($post); print ‘</pre>’; ?> <?php endwhile; ?> </ul> よく使います!
  46. 46. WP_Post Object ( [ID] => 2483 [post_author] => 1 [post_date] => 2013-06-04 12:20:53 [post_date_gmt] => 2013-06-04 03:20:53 [post_content] => 記事1の本文です。 [post_title] => 記事1 [post_excerpt] => 記事1の抜粋です。 [post_status] => publish [comment_status] => closed [ping_status] => closed [post_password] => [post_name] => post_1_slug [to_ping] => [pinged] => [post_modified] => 2013-08-30 23:54:28 [post_modified_gmt] => 2013-08-30 14:54:28 [post_content_filtered] => [post_parent] => 0 [guid] => http://XXXXXXXXX.com/?post_type=room&p=2483 [menu_order] => 0 [post_type] => info [post_mime_type] => [comment_count] => 0 [filter] => raw ) ブラウザで見ると こんな感じで 配列の中身が整形 されて表示できる!
  47. 47. WP_Post Object ( [ID] => 2483 [post_author] => 1 [post_date] => 2013-06-04 12:20:53 [post_date_gmt] => 2013-06-04 03:20:53 [post_content] => 記事1の本文です。 [post_title] => 記事1 [post_excerpt] => 記事1の抜粋です。 部分拡大すると 配列のキー 配列の値
  48. 48. 記事のタイトル echo $post->post_title; echo $post->ID; 記事のID
  49. 49. $post など変数の中身を調べて 欲しいデータを自在に表示!!
  50. 50. 普通の配列の場合 $post[‘post_title’]; $post->post_title; クラスオブジェクトの場合 補足
  51. 51. ユーザー一覧を作る
  52. 52. ユーザー情報を取得したい! get_users(); $users = get_users(); ユーザー情報を取得 WordPress 検索 変数に代入
  53. 53. 取得した中身 <?php $users = get_users(); print '<pre>'; print_r($users); print '</pre>'; ?>
  54. 54. Array ( [0] => WP_User Object ( [data] => stdClass Object ( [ID] => 3 [user_login] => kurudrive [user_pass] => XXXXXXXXXXXXXXXXXXXXXXXXXXXXX. [user_nicename] => kurudrive [user_email] => kurudrive@gmail.com [user_url] => [user_activation_key] => [display_name] => kurudrive ) 以下略 配列のキー 配列の値 配列の値が さらに配列に なっている
  55. 55. foreach文でループ foreach ($users as $key => $user) { //1人分の情報が変数$userに入る } 配列のキー 配列の値元の配列 $usersの中身の配列を 1つずつキーと値に代入しながらループ
  56. 56. 1人分の情報を見てみる <?php $users = get_users(); foreach ($users as $key => $user) { print '<pre>'; print_r($user); print '</pre>'; } ?>
  57. 57. WP_User Object ( [data] => stdClass Object ( [ID] => 3 [user_login] => kurudrive [user_pass] => XXXXXXXXXXXXXXXXXXXXXXXXXXXXX. [user_nicename] => kurudrive [user_email] => kurudrive@gmail.com [user_url] => [user_activation_key] => [display_name] => kurudrive ) 以下略 $userの中身
  58. 58. Array ( [0] => WP_User Object ( [data] => stdClass Object ( [ID] => 3 [user_login] => kurudrive [user_pass] => XXXXXXXXXXXXXXXXXXXXXXXXXXXXX. [user_nicename] => kurudrive [user_email] => kurudrive@gmail.com [user_url] => [user_activation_key] => [display_name] => kurudrive ) 以下略 $usersの中身
  59. 59. WP_User Object ( [data] => stdClass Object ( [ID] => 3 [user_login] => kurudrive [user_pass] => XXXXXXXXXXXXXXXXXXXXXXXXXXXXX. [user_nicename] => kurudrive [user_email] => kurudrive@gmail.com [user_url] => [user_activation_key] => [display_name] => kurudrive ) 以下略 $userの中身
  60. 60. ユーザーページへのURL site_url() サイトURL/author/ログインID $user->user_login $author_url = site_url(). '/author/'. $user->user_login;
  61. 61. ユーザー名の一覧 <ul> <?php $users = get_users(); foreach ($users as $key => $user) { $author_url = site_url(). '/author/'. $user->user_login; echo '<li><a href="'.$author_url.'">'.$user->display_name.'</a></li>'."¥n"; } ?> </ul> $user->display_name
  62. 62. Array ( [0] => WP_User Object ( [data] => stdClass Object ( [ID] => 3 [user_login] => kurudrive [user_pass] => XXXXXXXXXXXXXXXXXXXXXXXXXXXXX. [user_nicename] => kurudrive [user_email] => kurudrive@gmail.com [user_url] => [user_activation_key] => [display_name] => kurudrive ) 以下略
  63. 63. なんとなく伝わりましたかね?
  64. 64. ご清聴ありがとうございました。

×