Your SlideShare is downloading. ×
Home.phpを使ってtopページをカスタマイズしよう!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

5,008

Published on

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

No Downloads
Views
Total Views
5,008
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
29
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×