• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Home.phpを使ってtopページをカスタマイズしよう!
 

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

on

  • 4,828 views

 

Statistics

Views

Total Views
4,828
Views on SlideShare
3,992
Embed Views
836

Actions

Likes
17
Downloads
28
Comments
0

3 Embeds 836

http://ht79.info 434
http://127.0.0.1 252
https://twitter.com 150

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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.phphome.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