マナブログコピーのサイドバーに新着記事を表示する方法【WordPress】

今回の記事では、マナブさん（@manabubannai）が販売しているWordPressテーマ manablog_copy（マナブログコピー）のサイドバーに、新着記事を表示する方法について書いていきたいと思います。

1 カスタマイズ後
2 sidebar.php を編集
- 2.1 よく読まれている記事のコードブロックの下にコードを追加
3 style.cssを編集
4 さいごに

カスタマイズ後

まずはカスタマイズ後の画像から。

よく読まれている記事と同じスタイルで、サイドバーに新着記事を表示させています。

※ 今回はPHPファイルを編集するので、バックアップをとった上で進めて下さい。

sidebar.php を編集

今回は表示する内容をカスタマイズするので、PHPファイルを編集します。

新着記事についても、よく読まれている記事のコードと似たようなものになるので、よく読まれている記事をベースにコードを追加していきましょう。

よく読まれている記事のコードブロックの下にコードを追加

ここでは、よく読まれている記事とアーカイブの間に表示させていきます。

よく読まれている記事は <div class="col-xs-12 popular text-center"> というタグで囲まれているので、その閉じタグ（</div>）の後ろに、以下のコードを追加します。

※ マナブログコピーのバージョンによって行数などが違うかもしれませんが、ver3では57行目に以下のコードを追加しました。

    <div class="col-xs-12 popular recent text-center">
        <h4>新着記事</h4>
        <hr>
        <?php
        query_posts('posts_per_page=5&order=DESC');
        while(have_posts()) : the_post();
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
        if ( !empty($thumb['0']) ) {
            $url = $thumb['0'];
        } else {
            $url = get_template_directory_uri() . "/images/no-image.png";
        }
        ?>

        <!-- サムネイルの表示 -->
        <div itemscope itemtype='http://schema.org/ImageObject' class="thumbnail">
            <a style="background-image:url(<?=$url?>);" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url" class="thumbnail-img"></a>
        </div>

        <!-- タイトル表示 -->
        <h5 class="title" itemprop="name headline">
            <a href="<?php the_permalink(); ?>" title="<?php printf(the_title_attribute('echo=0') ); ?>" itemprop="url"><?php the_title(); ?></a>
        </h5>
        <?php endwhile; ?>

    </div>

※ コード追加後、周辺のコードも含めると以下のようになります。

    <div class="col-xs-12 popular text-center">
        <h4>よく読まれている記事</h4>
        <hr>
        <?php
        setPostViews(get_the_ID());
        query_posts('meta_key=post_views_count&orderby=meta_value_num&posts_per_page=5&order=DESC');
        while(have_posts()) : the_post();
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
        if ( !empty($thumb['0']) ) {
            $url = $thumb['0'];
        } else {
            $url = get_template_directory_uri() . "/images/no-image.png";
        }
        ?>

        <!-- サムネイルの表示 -->
        <div itemscope itemtype='http://schema.org/ImageObject' class="thumbnail">
            <a style="background-image:url(<?=$url?>);" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url" class="thumbnail-img"></a>
        </div>

        <!-- タイトル表示 -->
        <h5 class="title" itemprop="name headline">
            <a href="<?php the_permalink(); ?>" title="<?php printf(the_title_attribute('echo=0') ); ?>" itemprop="url"><?php the_title(); ?></a>
        </h5>
        <?php endwhile; ?>

    </div>

    <div class="col-xs-12 popular recent text-center">
        <h4>新着記事</h4>
        <hr>
        <?php
        query_posts('posts_per_page=5&order=DESC');
        while(have_posts()) : the_post();
        $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
        if ( !empty($thumb['0']) ) {
            $url = $thumb['0'];
        } else {
            $url = get_template_directory_uri() . "/images/no-image.png";
        }
        ?>

        <!-- サムネイルの表示 -->
        <div itemscope itemtype='http://schema.org/ImageObject' class="thumbnail">
            <a style="background-image:url(<?=$url?>);" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" itemprop="url" class="thumbnail-img"></a>
        </div>

        <!-- タイトル表示 -->
        <h5 class="title" itemprop="name headline">
            <a href="<?php the_permalink(); ?>" title="<?php printf(the_title_attribute('echo=0') ); ?>" itemprop="url"><?php the_title(); ?></a>
        </h5>
        <?php endwhile; ?>

    </div>

    <div class="col-xs-12 archive">
        <h4>Archive</h4>
        <hr>
        <ul class="list-unstyled">
            <?php
            $args = array(
                'show_post_count' => true
            );
            wp_get_archives( $args ); ?>
        </ul>
    </div>

これで新着記事が表示されていると思います。

style.cssを編集

今の状態だと、よく読まれている記事と余白がない状態になるので、余白を追加していきましょう。

style.css ファイルに以下のコードを追加します。

.recent {
    margin-top: 40px;
}

これで余白が追加されました。

さいごに

今回は、よく読まれている記事とアーカイブウィジェットの間に記事を表示させましたが、違う場所に表示する場合でも追加するコードは同じです。

sidebar.php ファイルはPHPファイルなので、編集時には十分注意して、お好みに合わせて表示する位置などお試しください。それでは今回はこのあたりで。閲覧ありがとうございました。