PAGE TOP

WordPressで新着情報を表示するまとめ

WordPressで新着情報を表示する

コーポレートサイトなどでよく見かける新着情報エリアを設置する方法です。

最も一般的な、更新日付とタイトルにカテゴリーごとのアイコンを付けたタイプ。

PHP/HTML

新着情報を表示したいテンプレートファイルに記述します。

<div id="feed_area">
<?php query_posts('posts_per_page=5'); ?>
<?php if (have_posts()):while(have_posts()):the_post(); ?>
<?php
$cats = get_the_category($post->id);
$cat = $cats[0];
$img = '<img src="' . get_bloginfo('template_url'). '/img/category-' . $cat->category_nicename . '.png" alt="' . $cat->cat_name . '" />';
?>
<dl>
<dt><?php the_time('Y年m月d日 (D)'); ?></dt>
<dd><?php echo $img; ?><span class="article_title"><a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a></span></dd>
</dl>
<?php endwhile; endif; ?>
</div><!--end feed_area-->

CSS

#feed_area{
	margin:2em 0;
}

#feed_area dt{
	line-height:24px;
	width:180px;
	padding-right:1em;
}

#feed_area dd{
	margin-top:-24px;
	line-height:24px;
	padding-left:150px;
}

#feed_area img {
	vertical-align:middle;
}

.article_title{
	padding-left:1em;
}

※サンプル画像

新着情報サンプル

解説

新着情報を出す
新着順に5件までの記事を一覧表示させます。
2行目 posts_per_page=○の部分で記事数を設定できます。

新着情報にカテゴリーごとのアイコンを出す
4~9行目の記述は、カテゴリー毎にアイコンを表示したい場合に記述します。
画像は「category-カテゴリースラッグ.png」で作成してimgディレクトリにアップロード。
※サンプルのアイコンサイズは50☓22ピクセルです。

アイコンを出したい箇所に以下のコードを記述。

<?php echo $img; ?>


サムネイルとタイトル、記事抜粋も付ける

アイキャッチ画像を使ってコンテンツっぽく新着情報を表示する方法。

PHP/HTML

<?php
query_posts('posts_per_page=4');
	if (have_posts()) :
	$count = 1;
	while (have_posts()) :
	the_post();
	if ($count % 2 > 0 && $count != 1) :
?>
<?php
	endif;
?>
<div class="feedbox">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'), 'title' => the_title_attribute('echo=0'))); ?></a>
<?php the_excerpt(); ?>
</div>
<?php
	$count++;
	endwhile;
	endif;
	wp_reset_query();
?>

2行目、「posts_per_page=○」の数字で、表示する記事数を設定します。
17行目の、

<?php the_excerpt(); ?>

このタグで本文を抜粋します。特に設定をしていない場合、110文字が抜粋される仕様です。
cssでfeedboxクラス内を自由に装飾してお使いください。



カテゴリーごとに新着情報を表示させる方法

特定のカテゴリーだけ新着情報を表示させたい、といったケースもありますね。
タブメニューを使って、カテゴリーごとに新着情報を表示させるなどでも使える方法です。

functions.phpに記述

<?php
function cat_post_list( $show_num, $cat_id ) {
global $post;
$args = array( 'posts_per_page' => $show_num, 'cat' => $cat_id );
$myposts = get_posts( $args );
foreach( $myposts as $post ) {
setup_postdata($post);
?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p>
<?php the_excerpt(); ?>
</p>
<?php
}
wp_reset_postdata();
}
?>

PHP

表示させたい箇所に以下を記述。数字は(記事数, カテゴリーID)を示しています。

<?php cat_post_list( 5, 2 ); ?>

該当のカテゴリーIDを調べる方法は、管理画面のカテゴリーをクリックして、URLの「category&tag_ID=○」○の部分に数字があり、これがカテゴリーIDナンバーになります。

その他、記事をランダムに抽出して表示する。カスタム投稿や固定ページを含める。など記事の取得に関連する表示のさせ方は様々ありますが、また気が向いた時に追記します。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •