SlideShare a Scribd company logo
1 of 135
Download to read offline
home.phpを使ってTOP
ページをカスタマイズしよう!
  第19回WordBench神戸




                                   photo by Huasonic
            http://www.flickr.com/photos/huasonic/3008074711/
簡単に自己紹介




はじめまして!
                                        photo by anko.gaku_ula
    http://www.flickr.com/photos/anko3-gaku_ula/3738379893/in/photostream/
細谷 崇
(ほそや たかし)
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/4434875759/
ってことで
index.php≠TOPページ
じゃぁ、TOPページは
どのテンプレートになるのか
それもテンプレート階層に
    書いてます
TOPページと言えるテンプレート
   front-page.php
      home.php
front-page.phpとhome.phpの
            違い
TOPページ=front-page.php
home.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>
 <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件から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_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カテゴリーの投稿を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
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

More Related Content

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

WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門Yuji Nojima
 
あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)Hiroyuki Ishiyama
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!Takashi Uemura
 
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法DREAMHIVE CO., LTD.
 
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法regret raym
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoyatamotsu toyoda
 
フレームワークを使うべき 3 つの理由
フレームワークを使うべき 3 つの理由フレームワークを使うべき 3 つの理由
フレームワークを使うべき 3 つの理由Kenichi Mukai
 
Facebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラーFacebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラーGaryuten
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでTakashi Uemura
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshoptakashi ono
 
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるテーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるTsuyoshi.
 
第21回Creators MeetUp
第21回Creators MeetUp第21回Creators MeetUp
第21回Creators MeetUpKenichi Mukai
 
8時間耐久 PHP構築の教室
8時間耐久 PHP構築の教室8時間耐久 PHP構築の教室
8時間耐久 PHP構築の教室Yusuke Ando
 
今、最も勢いのあるWebフレームワーク「fuel php」
今、最も勢いのあるWebフレームワーク「fuel php」今、最も勢いのあるWebフレームワーク「fuel php」
今、最も勢いのあるWebフレームワーク「fuel php」Soudai Sone
 
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフローWDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフローKazumich YAMAMOTO
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Muyuu Fujita
 
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Toshiki Iga
 

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

WordPressプラグイン作成入門
WordPressプラグイン作成入門WordPressプラグイン作成入門
WordPressプラグイン作成入門
 
あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)あにみた!(PHPカンファレンス用資料)
あにみた!(PHPカンファレンス用資料)
 
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ doshirouto2014 を作ったのでこれでテーマを理解しよう!
 
Php+Word Press
Php+Word PressPhp+Word Press
Php+Word Press
 
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法
FacebookとWordPressを連携させて、広告費0円の自動集客システムを作る方法
 
WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法WordPressで投稿記事情報の取得方法
WordPressで投稿記事情報の取得方法
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
 
フレームワークを使うべき 3 つの理由
フレームワークを使うべき 3 つの理由フレームワークを使うべき 3 つの理由
フレームワークを使うべき 3 つの理由
 
Facebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラーFacebook対応と大規模サイト移転のトライ&エラー
Facebook対応と大規模サイト移転のトライ&エラー
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
WordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshopWordBeachDeathMarchWorkshop
WordBeachDeathMarchWorkshop
 
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考えるテーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
 
第21回Creators MeetUp
第21回Creators MeetUp第21回Creators MeetUp
第21回Creators MeetUp
 
8時間耐久 PHP構築の教室
8時間耐久 PHP構築の教室8時間耐久 PHP構築の教室
8時間耐久 PHP構築の教室
 
今、最も勢いのあるWebフレームワーク「fuel php」
今、最も勢いのあるWebフレームワーク「fuel php」今、最も勢いのあるWebフレームワーク「fuel php」
今、最も勢いのあるWebフレームワーク「fuel php」
 
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフローWDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
WDHA#038 CMS会議 AOMORI / a-blog cms 2.1を活用したWeb制作のワークフロー
 
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
 
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
 

More from Takashi Hosoya

WordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオンWordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオンTakashi Hosoya
 
Kintone café 大阪 vol2
Kintone café 大阪 vol2Kintone café 大阪 vol2
Kintone café 大阪 vol2Takashi Hosoya
 
新しい働き方の提案 クラウドソーシング(公開用)
新しい働き方の提案 クラウドソーシング(公開用)新しい働き方の提案 クラウドソーシング(公開用)
新しい働き方の提案 クラウドソーシング(公開用)Takashi Hosoya
 
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!Takashi Hosoya
 
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作Takashi Hosoya
 
CoderDojoでもAWSを使ってみようかしら
CoderDojoでもAWSを使ってみようかしらCoderDojoでもAWSを使ってみようかしら
CoderDojoでもAWSを使ってみようかしらTakashi Hosoya
 
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方Takashi Hosoya
 
パーフェクトダッシュボード
パーフェクトダッシュボードパーフェクトダッシュボード
パーフェクトダッシュボードTakashi Hosoya
 
WordPress専用ディレクトリーで運用
WordPress専用ディレクトリーで運用WordPress専用ディレクトリーで運用
WordPress専用ディレクトリーで運用Takashi Hosoya
 
Typesハンズオン
TypesハンズオンTypesハンズオン
TypesハンズオンTakashi Hosoya
 
「WordPress事例の徹底解説」
「WordPress事例の徹底解説」「WordPress事例の徹底解説」
「WordPress事例の徹底解説」Takashi Hosoya
 

More from Takashi Hosoya (13)

WordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオンWordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオン
 
Kintone café 大阪 vol2
Kintone café 大阪 vol2Kintone café 大阪 vol2
Kintone café 大阪 vol2
 
新しい働き方の提案 クラウドソーシング(公開用)
新しい働き方の提案 クラウドソーシング(公開用)新しい働き方の提案 クラウドソーシング(公開用)
新しい働き方の提案 クラウドソーシング(公開用)
 
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!
Kintone勉強会@大阪 Vol.1 ドラッグ&ドロップで顧客管理システムを作ってみよう!
 
Welcome to CoderDojo
Welcome to CoderDojoWelcome to CoderDojo
Welcome to CoderDojo
 
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
2014年6月7日【ハンズオン】体験して学ぶ はじめてのブログ・サイト制作
 
CoderDojoでもAWSを使ってみようかしら
CoderDojoでもAWSを使ってみようかしらCoderDojoでもAWSを使ってみようかしら
CoderDojoでもAWSを使ってみようかしら
 
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方
【ひょうごんNPO塾】ネットワークで動くNPOに必要不可欠!グループウェアの使い方
 
パーフェクトダッシュボード
パーフェクトダッシュボードパーフェクトダッシュボード
パーフェクトダッシュボード
 
WordPress専用ディレクトリーで運用
WordPress専用ディレクトリーで運用WordPress専用ディレクトリーで運用
WordPress専用ディレクトリーで運用
 
Typesハンズオン
TypesハンズオンTypesハンズオン
Typesハンズオン
 
Types紹介
Types紹介Types紹介
Types紹介
 
「WordPress事例の徹底解説」
「WordPress事例の徹底解説」「WordPress事例の徹底解説」
「WordPress事例の徹底解説」
 

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