WordPressで記事上に最新記事などの記事リストを並べる方法

WordPress

2012/04/22

WordPressで記事上に最新記事などの記事リストを並べる方法

どうも。ブログのカスタマイズをおかずにごはんが三杯は食べられそうな気がしてきている@knk_nです。
たぶん気のせいでしょうけどね。
今回はヘッダと記事の間にいくつかサムネ付きで記事を並べてみました。
「和洋風◎」さん、「NANOKAMO BLOG」さんを見てカッコイイな。ここでもやりたいな。
よし、やるか。

和洋風◎

おお！和洋風のサイトデザインが変わってる！！ビジュアルリストを全面に押し出してるね| frasm

自分なりに少しこだわってみた

お二人を真似て最新記事を並べるだけでは芸がないので、少しこだわってみました。

記事画面では同カテゴリの記事をランダムに表示
カテゴリ画面では同カテゴリの記事をランダムに表示
タグ画面では同タグの記事をランダムに表示
それ以外のページでは最新記事を表示

1, 2. 同カテゴリの関連記事をランダムに表示

記事画面ではその記事と同じカテゴリである記事を表示するようにしました。
カテゴリページ（例: https://knk-n.com/category/evernote/）でも同カテゴリの記事を表示するようにしてあります。

関連記事は記事の後にYARPPを使って関連記事リストを設置してありますが、同カテゴリのランダム記事も合わせて見てもらおうという試みです。

関連記事表示のプラグインらしいです。
導入に踏み切った理由は三つ。

プラグインの数

良記事が出てた

WordPressデザインブックに載ってた

via: テーマリメイクでのカスタマイズ引き継ぎと新録まとめ | WordPressデザインブック買っ…てしまったその2 | けんけん.com

ランダムにしてあるので古い記事も引っ張ってこれて良い感じ。
相変わらずサムネの取得は自前です。

参考: WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう- | けんけん.com

<ul class="header-post">
<?php $cat = get_the_category(); $cat = $cat[0]; ?>
<?php $bk_wp_query = clone $wp_query; ?>
<?php query_posts( array('cat' => $cat->cat_ID, 'showposts' => 4,
                               'orderby' => 'rand', 'post__not_in' => array($post->ID)) ); ?>
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="<?php echo new_catch_that_image(); ?>" /><span><?php echo mb_substr($post->post_title,0,30); ?>…</span></a>
</li>
<?php endwhile; wp_reset_query();?>
<?php endif; wp_reset_query();?>
</ul>

記事ページに同じカテゴリ内の別の記事をランダムにリスト表示 | trash-area.com

こちらのコードを改造してます。

3. 同タグの記事をランダムに表示

タグページ（例: https://knk-n.com/tag/ramen/）では同じタグを持つ記事をランダムで並べてあります。
1や2と同様に「こんな記事もあるんだ」とすぐに見てもらいやすい位置にセットしてあります。
こちらはWEBクリエイターボックスさんのコードを改造。

プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックス

<ul class="header-post">
<?php
    $original_post = $post;
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags) {
        $tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
    $args=array(
    'tag__in' => $tagIDs,
    'post__not_in' => array($post->ID),
    'showposts'=>4,
    'caller_get_posts'=>1,
    'orderby'=>rand
    );
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
    while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li>
           <a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="<?php echo new_catch_that_image(); ?>" /><span><?php echo mb_substr($post->post_title,0,30); ?>…</span></a>
        </li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
<!--    関連する記事は見当たりません… -->
<?php } } ?>
</ul>

4. それ以外のページでは最新記事を表示

その他のページでは最新記事を表示するようにしてあります。ようやくの真似です。
NANOKAMOさんのと同じコードなので、ここは割愛。
全部クラス名を統一してあるので同じスタイルでの表示になります。
あんまりキレイじゃないけどCSSはこちら。細かな部分は各自調整してください。

.header-post {
	background-color: #fff;
	overflow: hidden;
	margin: 10px 0;
	padding: 0;
	z-index: 1;
}
.header-post li {
	margin: 0;
	list-style: none;
	float: left;
	width: 220px;
	height: 160px;
	margin: 0 4px;
	position: relative;
	overflow: hidden;
	padding: 5px;
	border: solid 1px #bbb;
}
.header-post img {
	text-align: center;
	width: 100%;
	height: 100%;
}
.header-post li:hover {
	opacity:0.6;
	background: #f2f2f2;
}
.header-post span {
	margin: 0;
	padding: 0;
	color: #222;
	width: 216px;
	position: absolute;
	bottom: 5px;
	left: 0;
	height: 50px;
	font-size: 0.9em;
	opacity: 0.9;
	background: #ffffff;
	padding: 0 7px;
}
.header-post a {
	text-decoration: none;
}

wp_reset_query();忘れるとヤバイ！

これでオッケー、ドヤァと修正したもののいきなり問題発生。

@knk_n 今けんけんさんのページ見させて貰っているのですがトップページから読みたい記事のタイトルをクリックすると違う記事へリンクされるんですが。

— こーぱぱさん (@kouseipapa) 4月 22, 2012

原因はwp_reset_query();の入れ忘れでした。せっかく@kuroji1987さんが丁寧に説明して下さったのに。。。

気をつけなきゃいけないのが、 wp_reset_query();という部分。これを書かないと、どの記事も新着1記事目の内容になってしまいます。これにハマって大変でしたｗ

via: WordPressで新着記事へのリンクを投稿の上に設置する方法 | NANOKAMO BLOG

他のページのものを自分なりに改造したのですが肝心な部分が抜けていたようです。
主要な部分のコードを上記事のものに直したらうまくいきました。
いち早く知らせて下さった@kouseipapaさんありがとうございました。

おわりに

同カテゴリ、同タグのランダム記事を表示することで昔書いた記事にアクセスしてもらいやすくなるかもしれませんね。
見た目にも悪くないし、導入してよかった。
@kuroji1987さんが調べようとしていたそうなので、少しはお返事になったかな。記事への返答を記事でするのもなかなかオツなものですね。
気になる方はぜひお試しください。そして昔の記事もぜひご覧になってくださいね。