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

5,735 views
5,568 views

Published on

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,735
On SlideShare
0
From Embeds
0
Number of Embeds
821
Actions
Shares
0
Downloads
30
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

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

×