WordPress: サムネイル付き新着記事一覧を表示する

WordPress

WordPressの個別記事画面でサムネイル付き新着記事一覧を表示する関数を作ったので公開します

関数のソースコード

まず以下のコードをfunctions.phpに追加してください。

function get_latest_article( $show_post='5' ) {
    global $post;

    // パラメータチェック
    if(!is_numeric($show_post))
    {
        $show_post = '5';
    }

    $query = array(
        'post__not_in' => array($post->ID), 
        'showposts' => $show_post
    );
    query_posts($query) ;

    if( have_posts() ) : while ( have_posts() ) : the_post();
        $url = get_permalink();
        $title = the_title(NULL,NULL,false);
        $title_atr = the_title_attribute( 'echo=0' );
        if( has_post_thumbnail( $query->ID ) ) {
            $img = get_the_post_thumbnail( $query->ID, 'thumbnail');
        } else {
            $img = '<img src="no_image.jpg" width="150" height="150" alt="no image" >';
        };

        echo <<<EOF
        <div class="related_post">
            <a href="{$url}" title="{$title_atr}">{$img}{$title}</a>
        </div>
EOF;
    endwhile; endif;

    wp_reset_query();
}

記事にサムネイル画像が指定されていない場合、代替え画像としてno_image.jpgを表示しようとします。上記コードの “no_image.jpg"を含む行を適切に調整してください。

ウチで使ってる画像はこんな感じ。ご自分のブログにアップロードしなおしてから利用してください。
no_image_200x200.jpg

もしデザインテーマがサムネイルをサポートしてない場合は、functions.php に以下の行を追加してください。

add_theme_support( 'post-thumbnails' );

サムネイル付き新着記事一覧を表示する

新着記事一覧を表示したい場所に以下のコードを追加し、関数を呼び出します。初期値では最新5つを表示します。

<?php get_latest_article(); ?>

引数を指定すると表示する新着記事の個数を制御できます。

<?php get_latest_article( 4 ); ?>

当ブログ下部で実際にサムネイル付きの新着表示を行っています。参考例としてください。

CSS定義

オマケとして、うちのブログで使ってるCSSはこんな感じ。

.related_post{max-width:670px;}
.related_post a{width:152px;height:240px;float:left;overflow:hidden;font-size:14px;line-height:normal;border-right:1px solid #ddd;padding: 6px;margin-bottom:12px;color:#555;}
.related_post img{margin:0;padding:2px;width:150px;height:150px;}

見た目の話しなので、ご自分のブログにあう形に調整してください。

そんな感じで！