今回の記事では、マナブさん（@manabubannai）が販売しているWordPressテーマ manablog_copy（マナブログコピー） のサイドバーに、新着記事を表示する方法について書いていきたいと思います。
カスタマイズ後
まずはカスタマイズ後の画像から。
よく読まれている記事と同じスタイルで、サイドバーに新着記事を表示させています。
※ 今回は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><?phpquery_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><?phpsetPostViews(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><?phpquery_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ファイルなので、編集時には十分注意して、お好みに合わせて表示する位置などお試しください。それでは今回はこのあたりで。閲覧ありがとうございました。