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.
home.phpを使ってTOPページをカスタマイズしよう!  第19回WordBench神戸                                   photo by Huasonic            http://www.fl...
簡単に自己紹介はじめまして!                                        photo by anko.gaku_ula    http://www.flickr.com/photos/anko3-gaku_ula...
細谷 崇(ほそや たかし)NPO法人コミュニティリンク    代表理事
NPO法人って福祉じゃないの?
19分野情報化社会の発展を図る活動
WordPressとの関係
WordPress使ってWEBサイト制作
共感寄付
Kifu KOBE
ウブスナ
WordPress使って勉強会
西宮北口駅周辺  毎月2回
箕面駅周辺 毎月2回
富田林市 毎月1回
堺駅周辺 毎月1回次回:1月26日(土)
本日のお話の概要
home.phpを使ってTOPページをカスタマイズ
例えばこんなこと ないですか?
企業サイト用のWPテンプレートをダウンロードしてこれで納品してやるぜ!
お客さんに見せたところ
10件から5件表示に変更
イベント情報を掲載したい
TOPペーじのカスタマイズの要望が出てしまった・・・
PHP?そんなもん知らねーな
ってなった時に役立つお話です
では、TOPページの  カスタマイズ
とりま、index.phpを修正すればいいんだろ?
ちょっと待った!!
index.php=TOPページ       なのか?
WordPressのテンプレート階層を見てみよう
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
すべての道はindex.phpに通ず                       photo by ho visto nina volare        http://www.flickr.com/photos/41099823@N00/443...
ってことで
index.php≠TOPページ
じゃぁ、TOPページはどのテンプレートになるのか
それもテンプレート階層に    書いてます
TOPページと言えるテンプレート   front-page.php      home.php
front-page.phpとhome.phpの            違い
TOPページ=front-page.phphome.phpは日の目を見ることはないfront-page.php>home.php
TOPページ=front-page.php※トップページ(固定ページ)に紐付くブログ(固定ページ)=home.php
固定ページと紐付く為、固定ページの内容をTOPページに表示しやすい  改めて取得し直す必要なし
front-page.phpとhome.phpの          使い分け
サイトのTOPページとブログの TOPページを別にしたい場合
参考サイト:http://bren.jp/
front-page.php
別に一緒でもOKまたはブログ機能は使わない場合
home.php
今回はhome.php
投稿内容の一覧を表示したいなら
投稿内容の一覧を                             表示したいなら<?php if ( have_posts() ) : ?> while ( have_posts() ) : the_post(); ?>  <ul> <...
投稿内容の一覧を                             表示したいなら<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  <ul> <li>...
なんで投稿の一覧を取得することが     出来るのか?
10件から5件表示に変更
この要望の対応するなら
ここの数字を5に変更すればOK
でも全ての一覧表示が  5件表示となる
TOPページの投稿表示のみを5件にしたい・・・
実現方法はいろいろ
方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス
方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス
方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス   データを再取得
処理速度を気にするならpre_get_postsフックがオススメ
簡単に処理の流れを見てみる
pre_get_posts
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
query_posts関数
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
get_posts関数
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみる
簡単に処理の流れを見てみるsetup_postdataをしなければ、メインクエリーで取得したデータを上書きしない
WP_Queryクラス
割愛
pre_get_postsフックfunctions.php// TOPページの投稿一覧を5件表示するfunction home_display_five_articles( $wp_query ) {  if ( $wp_query->is_ma...
pre_get_postsフックfunctions.php// TOPページのNewsカテゴリーの投稿を5件表示するfunction home_display_five_articles( $wp_query ) {  if ( $wp_quer...
get_posts関数home.php<?php // 5件データを取得する ?><?php $my_posts=get_posts(posts_per_page=5); ?><?php foreach($my_posts as $my_pos...
get_posts関数home.php<?php // 5件データを取得する ?><?php $my_posts=get_posts(posts_per_page=5); ?><?php foreach($my_posts as $my_pos...
get_posts関数// 5件データを取得する<?php $my_posts=get_posts(posts_per_page=5); ?>// 5件記事を取得してランダム表示する<?php$my_posts=get_posts(posts_...
イベント情報を掲載したい
get_posts関数home.php<?php // 『event』カテゴリーの中から5件データを取得する ?><?php$my_posts=get_posts(category_name=events&posts_per_page=5); ...
ご清聴ありがとうございました      tkc49     takashi.hosoya
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Home.phpを使ってtopページをカスタマイズしよう!
Upcoming SlideShare
Loading in …5
×

Home.phpを使ってtopページをカスタマイズしよう!

6,099 views

Published on

Home.phpを使ってtopページをカスタマイズしよう!

  1. 1. home.phpを使ってTOPページをカスタマイズしよう! 第19回WordBench神戸 photo by Huasonic http://www.flickr.com/photos/huasonic/3008074711/
  2. 2. 簡単に自己紹介はじめまして! photo by anko.gaku_ula http://www.flickr.com/photos/anko3-gaku_ula/3738379893/in/photostream/
  3. 3. 細谷 崇(ほそや たかし)NPO法人コミュニティリンク 代表理事
  4. 4. NPO法人って福祉じゃないの?
  5. 5. 19分野情報化社会の発展を図る活動
  6. 6. WordPressとの関係
  7. 7. WordPress使ってWEBサイト制作
  8. 8. 共感寄付
  9. 9. Kifu KOBE
  10. 10. ウブスナ
  11. 11. WordPress使って勉強会
  12. 12. 西宮北口駅周辺 毎月2回
  13. 13. 箕面駅周辺 毎月2回
  14. 14. 富田林市 毎月1回
  15. 15. 堺駅周辺 毎月1回次回:1月26日(土)
  16. 16. 本日のお話の概要
  17. 17. home.phpを使ってTOPページをカスタマイズ
  18. 18. 例えばこんなこと ないですか?
  19. 19. 企業サイト用のWPテンプレートをダウンロードしてこれで納品してやるぜ!
  20. 20. お客さんに見せたところ
  21. 21. 10件から5件表示に変更
  22. 22. イベント情報を掲載したい
  23. 23. TOPペーじのカスタマイズの要望が出てしまった・・・
  24. 24. PHP?そんなもん知らねーな
  25. 25. ってなった時に役立つお話です
  26. 26. では、TOPページの カスタマイズ
  27. 27. とりま、index.phpを修正すればいいんだろ?
  28. 28. ちょっと待った!!
  29. 29. index.php=TOPページ なのか?
  30. 30. WordPressのテンプレート階層を見てみよう
  31. 31. http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
  32. 32. http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
  33. 33. http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4
  34. 34. すべての道はindex.phpに通ず photo by ho visto nina volare http://www.flickr.com/photos/41099823@N00/4434875759/
  35. 35. ってことで
  36. 36. index.php≠TOPページ
  37. 37. じゃぁ、TOPページはどのテンプレートになるのか
  38. 38. それもテンプレート階層に 書いてます
  39. 39. TOPページと言えるテンプレート front-page.php home.php
  40. 40. front-page.phpとhome.phpの 違い
  41. 41. TOPページ=front-page.phphome.phpは日の目を見ることはないfront-page.php>home.php
  42. 42. TOPページ=front-page.php※トップページ(固定ページ)に紐付くブログ(固定ページ)=home.php
  43. 43. 固定ページと紐付く為、固定ページの内容をTOPページに表示しやすい 改めて取得し直す必要なし
  44. 44. front-page.phpとhome.phpの 使い分け
  45. 45. サイトのTOPページとブログの TOPページを別にしたい場合
  46. 46. 参考サイト:http://bren.jp/
  47. 47. front-page.php
  48. 48. 別に一緒でもOKまたはブログ機能は使わない場合
  49. 49. home.php
  50. 50. 今回はhome.php
  51. 51. 投稿内容の一覧を表示したいなら
  52. 52. 投稿内容の一覧を 表示したいなら<?php if ( have_posts() ) : ?> while ( have_posts() ) : the_post(); ?> <ul> <li><?php the_time(Y年m月d日); ?></li> <li><?php the_title(); ?></li> </ul><?php endwhile; endif; ?>
  53. 53. 投稿内容の一覧を 表示したいなら<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <ul> <li><?php the_time(Y年m月d日); ?></li> <li><?php the_title(); ?></li> </ul><?php endwhile; endif; ?>
  54. 54. なんで投稿の一覧を取得することが 出来るのか?
  55. 55. 10件から5件表示に変更
  56. 56. この要望の対応するなら
  57. 57. ここの数字を5に変更すればOK
  58. 58. でも全ての一覧表示が 5件表示となる
  59. 59. TOPページの投稿表示のみを5件にしたい・・・
  60. 60. 実現方法はいろいろ
  61. 61. 方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス
  62. 62. 方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス
  63. 63. 方法①:pre_get_postsフック方法②:get_posts関数方法③:query_posts関数方法④:WP_Queryクラス データを再取得
  64. 64. 処理速度を気にするならpre_get_postsフックがオススメ
  65. 65. 簡単に処理の流れを見てみる
  66. 66. pre_get_posts
  67. 67. 簡単に処理の流れを見てみる
  68. 68. 簡単に処理の流れを見てみる
  69. 69. 簡単に処理の流れを見てみる
  70. 70. 簡単に処理の流れを見てみる
  71. 71. 簡単に処理の流れを見てみる
  72. 72. 簡単に処理の流れを見てみる
  73. 73. 簡単に処理の流れを見てみる
  74. 74. 簡単に処理の流れを見てみる
  75. 75. query_posts関数
  76. 76. 簡単に処理の流れを見てみる
  77. 77. 簡単に処理の流れを見てみる
  78. 78. 簡単に処理の流れを見てみる
  79. 79. 簡単に処理の流れを見てみる
  80. 80. 簡単に処理の流れを見てみる
  81. 81. 簡単に処理の流れを見てみる
  82. 82. 簡単に処理の流れを見てみる
  83. 83. 簡単に処理の流れを見てみる
  84. 84. 簡単に処理の流れを見てみる
  85. 85. 簡単に処理の流れを見てみる
  86. 86. 簡単に処理の流れを見てみる
  87. 87. 簡単に処理の流れを見てみる
  88. 88. 簡単に処理の流れを見てみる
  89. 89. 簡単に処理の流れを見てみる
  90. 90. get_posts関数
  91. 91. 簡単に処理の流れを見てみる
  92. 92. 簡単に処理の流れを見てみる
  93. 93. 簡単に処理の流れを見てみる
  94. 94. 簡単に処理の流れを見てみる
  95. 95. 簡単に処理の流れを見てみる
  96. 96. 簡単に処理の流れを見てみる
  97. 97. 簡単に処理の流れを見てみる
  98. 98. 簡単に処理の流れを見てみる
  99. 99. 簡単に処理の流れを見てみる
  100. 100. 簡単に処理の流れを見てみる
  101. 101. 簡単に処理の流れを見てみる
  102. 102. 簡単に処理の流れを見てみる
  103. 103. 簡単に処理の流れを見てみるsetup_postdataをしなければ、メインクエリーで取得したデータを上書きしない
  104. 104. WP_Queryクラス
  105. 105. 割愛
  106. 106. pre_get_postsフックfunctions.php// TOPページの投稿一覧を5件表示するfunction home_display_five_articles( $wp_query ) { if ( $wp_query->is_main_query() && $wp_query->is_home() ) { $wp_query->set( posts_per_page, 5 ); }}add_action( pre_get_posts, home_display_five_articles );
  107. 107. pre_get_postsフックfunctions.php// TOPページのNewsカテゴリーの投稿を5件表示するfunction home_display_five_articles( $wp_query ) { if ( $wp_query->is_main_query() && $wp_query->is_home() ) { $wp_query->set( posts_per_page, 5 ); $wp_query->set( category_name, news ); }}add_action( pre_get_posts, home_display_five_articles );http://codex.wordpress.org/Class_Reference/WP_Query
  108. 108. get_posts関数home.php<?php // 5件データを取得する ?><?php $my_posts=get_posts(posts_per_page=5); ?><?php foreach($my_posts as $my_post): ?> <ul> <li><?php echo $my_post->post_date; ?></li> <li><?php echo $my_post->post_title; ?></li> </ul><?php endforeach; ?>
  109. 109. get_posts関数home.php<?php // 5件データを取得する ?><?php $my_posts=get_posts(posts_per_page=5); ?><?php foreach($my_posts as $my_post): ?> <ul> <li><?php echo $my_post->post_date; ?></li> <li><?php echo $my_post->post_title; ?></li> </ul><?php endforeach; ?>
  110. 110. get_posts関数// 5件データを取得する<?php $my_posts=get_posts(posts_per_page=5); ?>// 5件記事を取得してランダム表示する<?php$my_posts=get_posts(posts_per_page=5&orderby=rand); ?>// 日付けを古いもの順に表示する<?php $my_posts=get_posts(posts_per_page=5&orderby=post_date&order=ASC); ?>// 『news』カテゴリーに所属している記事のみ5件表示する<?php$my_posts=get_posts(posts_per_page=5&category_name=news);?>
  111. 111. イベント情報を掲載したい
  112. 112. get_posts関数home.php<?php // 『event』カテゴリーの中から5件データを取得する ?><?php$my_posts=get_posts(category_name=events&posts_per_page=5); ?><?php foreach($my_posts as $my_post): ?> <ul> <li><?php echo $my_post->post_date; ?></li>  <li><?php echo $my_post->post_title; ?></li> </ul><?php endforeach; ?>
  113. 113. ご清聴ありがとうございました tkc49 takashi.hosoya

×