大阪市西区　Wild Cards ワイルドカーズ

サイドバーの最新記事一覧がテキストだけでも全然構わないんですが、デザインによっては画像が無いと寂しい場合もありますよね。

当サイトではアイキャッチ画像（↑タイトルに被っているこの画像）をそのまま最新記事及びランダム記事一覧のサムネイル画像に自動で転用しています。例によってプラグインは使っていないところがミソですね。

まだアイキャッチを利用されていない方はこちらをご覧ください。
⇒　【WordPress】アイキャッチ画像を自動で切り抜き・リサイズ

はじめに

1.functions.phpにコードを追加

// 最新記事
function new_post_list($show_num) {
    query_posts('showposts=' . $show_num . '"');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
            echo '<li><a href="';
            the_permalink();
            echo '">';
	    the_post_thumbnail(array(50,50), array('class' => 'new_post'));
            the_title();
            echo '</a></li>';
        }
    }
    wp_reset_query();
}

// ランダム記事
function random_post_list($show_num) {
    query_posts('posts_per_page=' . $show_num . '&orderby=rand');
    if(have_posts()) {
        while(have_posts()) {
            the_post();
	    echo '<li><a href="';
            the_permalink();
            echo '">';
            the_post_thumbnail(array(50,50), array('class' => 'random_post'));
            the_title();
            echo '</a></li>';
        }
    }
    wp_reset_query();
}

2.sidebar.php内の設置したい場所にコードを追加

// 最新記事
<ul>
<?php new_post_list(6); ?>
</ul>

// ランダム記事
<ul>
<?php random_post_list(6); ?>
</ul>

3.CSSで見た目をカスタマイズする

ul.blog {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

ul.blog li {
    padding: 0 10px;
    line-height: 15px;
    margin-bottom: 5px;
    font-size: 12px;
    float: left;
}

おしまい。