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 記事に複数の画像がある場合は、” 最初に投稿された画像”(= 登録日付がもっとも古い画像 )を取ってくることにする。

やること２・画像をリサイズしてサムネイルサイズ にする

簡単のため、サムネイル画像を新規作成するのではなく、元画像の表示サイズを小さくして表示するだけにする。

やること３・記事の中に画像が無かった場合は？

<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 を調整してインデントとかセンタリングとかしてください。

完