WordPressでタグに関連する記事をサムネイル付きで表示するコードを書いた

現在表示している記事と同じタグを持つ記事を、サムネイル付きで一覧表示するコードを書いた。

functions.phpに追加するコード

以下のコードをfunctions.phpに追加します。

function get_related_article($show_post='10', $order_by='DESC', $sort_key='ID', $sort_by='DESC')
{
    // 関連記事格納用変数初期化
    $posts = array();
    // 重複チェック用記事ID
    $post_not_in = array();
    // 表示している記事の記事IDを格納する
    $post_not_in[] = get_the_ID();

    // 数値以外だったらエラー防止のためにデフォルト値をセットする
    if(!is_numeric($show_post))
    {
        $show_post = '10';
    }

    // 基準キー順がASC・DESCでなかったらデフォルト値をセットする
    if($order_by != 'ASC' && $order_by != 'DESC')
    {
        $order_by = 'DESC';
    }

    // 並び変えキーがID・post_dateでなかったらデフォルト値をセットする
    if($sort_key != 'ID' && $sort_key != 'post_date')
    {
        $sort_key = 'ID';
    }

    // 並び変え順がASC・DESCでなかったらデフォルト値をセットする
    if($sort_by != 'ASC' && $sort_by != 'DESC')
    {
        $sort_by = 'DESC';
    }

    // 最終的な並び順によって変数の中身を変える
    if($sort_by == 'ASC')
    {
        $sort_by = SORT_ASC;
    }
    else
    {
        $sort_by = SORT_DESC;
    }

    // タグを変数に格納する
    $tags = get_the_tags();

    // タグがついてたら実行する
    if($tags)
    {
        // 複数タグを配列化
        foreach($tags as $tag) {
            $tagIDs[] = $tag->term_id ; 
        }

        // 引数に従ったクエリ
        $query = array(
            'tag__in' => $tagIDs,
            'post__not_in' => $post_not_in,
            'showposts'=> $show_post,
            'caller_get_posts'=>1,
            'orderby' => $order_by
        );
        query_posts($query) ;

        $i = 0 ;
        if ( have_posts() ) : while ( have_posts() ) : the_post();
            $post_not_in[] = get_the_ID();
            $posts[$i]['ID'] = get_the_ID();
            $posts[$i]['title'] = the_title(NULL,NULL,false);
            $posts[$i]['title_atr'] = the_title_attribute( 'echo=0' );
            $posts[$i]['permalink'] = get_permalink();
            if( has_post_thumbnail( $my_query->ID ) ) {
                $posts[$i]['thumbnail'] = get_the_post_thumbnail( $my_query->ID, 'thumbnail');
            } else {
                $posts[$i]['thumbnail'] = '<img src="no_image_100x100.png" width="100" height="100" alt="no image" >' ;
            }
            ++$i;
        endwhile; endif;
        // クエリリセット
        wp_reset_query();

        // 同一タグからランダムに5記事を付加
        $query = array(
            'tag__in' => $tagIDs,
            'post__not_in' => $post_not_in,
            'showposts'=> 5,
            'caller_get_posts'=>1,
            'orderby' => 'rand'
        );
        query_posts($query) ;

        if ( have_posts() ) : while ( have_posts() ) : the_post();
            $posts[$i]['ID'] = get_the_ID();
            $posts[$i]['title'] = the_title(NULL,NULL,false);
            $posts[$i]['title_atr'] = the_title_attribute( 'echo=0' );
            $posts[$i]['permalink'] = get_permalink();
            if( has_post_thumbnail( $my_query->ID ) ) {
                $posts[$i]['thumbnail'] = get_the_post_thumbnail( $my_query->ID, 'thumbnail');
            } else {
                $posts[$i]['thumbnail'] = '<img src="no_image_100x100.png" width="100" height="100" alt="no image" >' ;
            }
            ++$i;
        endwhile; endif;
        // クエリリセット
        wp_reset_query();
    }

    // 関連記事が1件以上あったら出力する。
    if(count($posts) > 0)
    {
        // ソートするために変数にキーと値を格納する
        foreach ($posts as $key => $row)
        {
            $sort[$key] = $row[$sort_key];
        }

        // ソートする
        array_multisort( $sort, $sort_by, $posts );

        // 最後に出力する
        echo '<div class="related_post">' ;
        foreach($posts as $related_article)
        {
            echo <<<EOF
            <a href="{$related_article['permalink']}" title="{$related_article['title_atr']}">{$related_article['thumbnail']}{$related_article['title']}</a>
EOF;
        }
        echo '</div>' ;
    }
}

関数呼び出し

関連記事一覧を表示したい場所に以下のコードを追加します。

<?php get_related_article(); ?>

関連タグの最近10記事に加え、関連タグからランダムに5記事を追加表示しますよ。

CSS定義

オマケとして、使ってるCSSはこんな感じ。見た目の話しなので、ここら辺は各ブログで要調整です。

.related_post{max-width:600px;}
.related_post a{width:106px;height:180px;float:left;overflow:hidden;font-size:12px;line-height:normal;border-right:1px solid #ddd;padding: 6px;margin-bottom:10px;color:#555;}
.related_post img{margin:0;border:1px solid #ddd;padding:2px;width:100px;height:100px;}

書いた感想など

2回もクエリーを回してるのがダサいなーと思うんだけど、ランダム表示時に表示済みの記事を除外しようと頑張ってたらこうなってしまった。

戻り値として表示した記事の記事IDを返し、且つ関数の引数に非表示記事IDを持てば良いような気もするけど、今回はこれぐらいで勘弁しておく。

謝辞

コードの作成では「WordPressでカテゴリとタグを基に関連記事を表示する – UKLab」を参考にさせて頂きました。

貴重な情報ありがとうございました。

TwitterやRSSでも最新情報をお届けしています。フォローよろしくお願いします。

follow us in feedly