Nov 28, 2013

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

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

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

はじめに

  • アイキャッチ画像を使用していることが前提です。
  • 管理画面の「ウィジェット」は使いません。ファイルを直で編集します。
  • リストアップする件数は任意で設定可能です。
  • サムネイルのサイズは任意で設定可能です。

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

    テーマファイルのディレクトリ直下にある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();
    }
    
    数字の部分が画像のサイズ指定で、当サイトでは縦横50pxに指定しています。お好きなサイズでどうぞ。

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

    WordPressのウィジェットエリアの中に挟み込むことはできませんので、前後いずれか(あるいは両方)に記述します。
    // 最新記事
    <ul>
    <?php new_post_list(6); ?>
    </ul>
    
    // ランダム記事
    <ul>
    <?php random_post_list(6); ?>
    </ul>
    
    数字の部分がリストする件数で、当サイトではそれぞれ6件表示にしています。お好きな数字をどうぞ。

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

    当サイトではulプロパティにblogというclass名を与えました。ここまでの手順を消化された方には難しくないと思います。
    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;
    }
    

    おしまい。

    これで、アイキャッチ画像が指定されてさえいればサムネイル付きの最新記事&ランダム記事が自動でサイドバーに生成されます。

    アイキャッチとサムネイルはブログデザインを大きく左右するので、是非チャレンジしてみてください!

    

    Comment

    Leave a Reply

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    サイト内検索
    • Author

    • Twitter

      Follow @jay0926 (533 followers)
    • Facebook