Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
2014/03/29 WordBench TOKYO
2014/03/29 WordBench TOKYO
Loading in …3
×

Check these out next

1 of 135 Ad
Advertisement

More Related Content

More from Takashi Hosoya (13)

Advertisement

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.php home.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

×