20100116 02 同一カテゴリの投稿を一覧表示する
Post on 20-Jun-2015
2.022 Views
Preview:
DESCRIPTION
TRANSCRIPT
2010/1/16フリーランスシステムエンジニア
上村 崇
WordPress カスタマイズ同一カテゴリの投稿を一覧表示する
プレゼンの主旨
単一記事の投稿before
カテゴリが同じ投稿のタイトルを表示する!
after
さらに
投稿の中に使われている画像をアイコンとして表示する!
afterbefore
Step2:画像サムネイルを追加
Step1:同一カテゴリの投稿一覧を表示する
Step1:同一カテゴリの投稿一覧を表示する
default
単一投稿のテンプレート
single.php
<?php get_header(); ?>
<?php if ( have_posts() ) : ?> <?php while (have_posts()) : the_post(); ?>
<?php previous_post_link(); ?> <?php next_post_link(); ?>
<h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php wp_link_pages(); ?> <?php the_tags(); ?> <?php comments_template(); ?>
<?php endwhile; ?> <?php endif; ?>
<?php get_footer(); ?>
どこにコードを入れる?
single.php
<?php get_header(); ?>
<?php if ( have_posts() ) : ?> <?php while (have_posts()) : the_post(); ?>
<?php previous_post_link(); ?> <?php next_post_link(); ?>
<h2><?php the_title(); ?></h2> <?php the_content(); ?> <?php wp_link_pages(); ?> <?php the_tags(); ?> <?php comments_template(); ?>
<?php endwhile; ?> <?php endif; ?>
<?php get_footer(); ?>
どこにコードを入れる?
仕様投稿記事と同じカテゴリの記事を新しい投稿から順に 5 件分のタイトルをリスト表示する
実装・同一カテゴリ ( ドラゴンボール ) のポストを取り出す ( 最新 5 件分を日付降順で取ってくる )・ 5 件分ループする・リンク先 URL も必要
仕様投稿記事と同じカテゴリの記事を新しい投稿から順に 5 件分のタイトルをリスト表示する
しかし、ドラゴンボールにも AKB48にも分類される記事が存在する!(1 つの記事にカテゴリは複数設定できる )
ということはこうでなければならない!
実装・同一カテゴリ ( 複数の場合あり ) のポストを取り出す ( カテゴリ毎に最新 5 件分を日付降順で取ってくる )・ 1 カテゴリにつき 5 件分ループする・リンク先 URL も必要
仕様投稿記事と同じカテゴリの記事を新しい投稿から順に 5 件分のタイトルをリスト表示する
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php 完成図 (抜粋 )
細かく見ていきます→
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
カテゴリ情報を取得する
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
1 行ずつ処理する
cat_ID cat_name
1 AKB48
2 ドラゴンボール
$cats
← $cat
← $cat
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.phpcat_ID cat_name
1 AKB48$cat-
>cat_ID$cat-
>cat_name
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
条件に合う記事を取得category = $cat->cat_ID カテゴリIDnumberposts = 5 5 件orderby = post_date 日付順order = DESC 降順
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
get_posts 関数により posts テーブルのデータを取得できる
ID post_title
8 新生ピッコロあらわる! 7 ベジーター!! 6 フリーザがやっと変身しました。 ・・・
$cposts
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php 完成図
Step2:画像サムネイルを表示する
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php どこにコードを追加する?
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
やること1・各記事に埋め込まれた画像を取ってくる ( ただし 1 つずつ )
1 記事に複数の画像がある場合は、” 最初に投稿された画像”(= 登録日付がもっとも古い画像 )を取ってくることにする。
やること2・画像をリサイズしてサムネイルサイズ にする
簡単のため、サムネイル画像を新規作成するのではなく、元画像の表示サイズを小さくして表示するだけにする。
やること3・記事の中に画像が無かった場合は?
<h2> 同じカテゴリーの一覧 </h2><?php $cats = get_the_category(); foreach ($cats as $cat) :?> <h2> <a href="<?php echo get_category_link($cat->cat_ID); ?>"> <?php echo $cat->cat_name; ?> </a> </h2> <ul> <?php $cposts = get_posts( "category=" . $cat->cat_ID . "&numberposts=5&orderby=post_date&order=DESC"); foreach ($cposts as $cpost) : ?> <li> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a> </li> <?php endforeach; ?> </ul><?php endforeach; ?>
single.php
抜粋
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php画像情報を取ってくる
サムネイルサイズの計算をして画像表示
画像が無いとき
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
サムネイルサイズの計算
画像が無いとき
画像情報も get_posts 関数で取ってこれるpost_parent = $cpost->ID 親投稿 IDpost_type = attachment 添付numberposts = 1 1 件orderby = post_date 日付順order = ASC 昇順
ID post_type guid
10 attachment http://....../xxx.jpg
$img
← $img[0]
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
サムネイルサイズの計算をして画像表示
画像が無いとき
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
画像が無いとき
画像のメタ情報を取得
width height
1024 768
$meta
$meta[‘width’]
$meta[‘height’]
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
画像が無いとき
画像のメタ情報を取得
width height
1024 768
$meta
$meta[‘width’]
$meta[‘height’]
最大 100px になるように縦横のサイズを決める。 横長画像のとき → 横サイズが 100px の サムネイル 縦長画像のとき → 縦サイズが 100px の サムネイル
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
画像が無いとき
画像のメタ情報を取得
width height
1024 768
$meta
$meta[‘width’]
$meta[‘height’]
最大 100px になるように縦横のサイズを決める。 横長画像のとき → 横サイズが 100px の サムネイル 縦長画像のとき → 縦サイズが 100px の サムネイル
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>“ height="<?php echo $height ?>"> <?php else: ?> <img src="http://toyao.net/wordpress2/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
画像が無いとき
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?> px“ height="<?php echo $height ?>px"> <?php else: ?> <img src="http://xxx.xxx/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php
代替画像を表示する
<li> <?php $img = get_posts("post_parent=" . $cpost->ID . "&post_type=attachment&numberposts=1&orderby=post_date&order=ASC"); ?> <?php if($img): ?> <?php $meta = wp_get_attachment_metadata($img[0]->ID); if( $meta['width'] > $meta['height'] ){ $width = 100; $height = $meta['height'] * ( 100 / $meta['width'] ); } else { $width = $meta['width'] * ( 100 / $meta['height'] ); $height = 100; } ?> <img src="<?php echo $img[0]->guid ?>" width="<?php echo $width ?>px“ height="<?php echo $height ?>px "> <?php else: ?> <img src="http://xxx.xxx/noimage.jpg"> <?php endif; ?> <a href="<?php echo get_page_link($cpost->ID); ?>"> <?php echo $cpost->post_title; ?> </a></li>
single.php 完成!
あとは CSS を調整してインデントとかセンタリングとかしてください。
完
top related