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

2013.3.26WordPress

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

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;}