Home.phpを使ってtopページをカスタマイズしよう！

第１９回WordBench神戸

home.phpを使ってTOPページをカスタマイズしよう！

photo by Huasonichttp://www.flickr.com/photos/huasonic/3008074711/

http://www.flickr.com/photos/huasonic/3008074711/

http://www.flickr.com/photos/huasonic/3008074711/

photo by anko.gaku_ulahttp://www.flickr.com/photos/anko3-gaku_ula/3738379893/in/photostream/

はじめまして！

簡単に自己紹介

http://www.flickr.com/photos/anko3-gaku_ula/3738379893/in/photostream/

http://www.flickr.com/photos/anko3-gaku_ula/3738379893/in/photostream/

細谷　崇（ほそや　たかし）NPO法人コミュニティリンク

代表理事

NPO法人って福祉じゃないの？

19分野情報化社会の発展を図る活動

WordPressとの関係

WordPress使ってWEBサイト制作

共感寄付

Kifu KOBE

ウブスナ

WordPress使って勉強会

西宮北口駅周辺毎月２回

箕面駅周辺　毎月２回

富田林市　毎月１回

堺駅周辺毎月１回次回：１月２６日（土）

本日のお話の概要

home.phpを使ってTOPページをカスタマイズ

例えばこんなことないですか？

企業サイト用のWPテンプレートをダウンロードしてこれで納品してやるぜ！

お客さんに見せたところ

10件から５件表示に変更

イベント情報を掲載したい

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









すべての道はindex.phpに通ず

photo by ho visto nina volarehttp://www.flickr.com/photos/41099823@N00/4434875759/

http://www.flickr.com/photos/41099823@N00/4434875759/

http://www.flickr.com/photos/41099823@N00/4434875759/

ってことで

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/

http://bren.jp/

http://bren.jp/

front-page.php

別に一緒でもOKまたはブログ機能は使わない場合

home.php

今回はhome.php

投稿内容の一覧を表示したいなら


<?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; ?>


<?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; ?>

なんで投稿の一覧を取得することが出来るのか？

10件から５件表示に変更

この要望の対応するなら

ここの数字を５に変更すればOK

でも全ての一覧表示が５件表示となる

TOPページの投稿表示のみを５件にしたい・・・

実現方法はいろいろ

方法①：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ページの投稿一覧を５件表示する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' );

pre_get_postsフックfunctions.php// TOPページのNewsカテゴリーの投稿を５件表示する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



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; ?>

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; ?>

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'); ?>

イベント情報を掲載したい

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; ?>

ご清聴ありがとうございました

tkc49

takashi.hosoya

Documents

Home.phpを使ってtopページをカスタマイズしよう！