2020年7月1日更新

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

Thumbnail

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

カスタマイズ後

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

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

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

sidebar.php を編集

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

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

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

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

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

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

PHP
コピーする
<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>

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

PHP
コピーする
<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 ファイルに以下のコードを追加します。

CSS
コピーする
.recent {
margin-top: 40px;
}

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

さいごに

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

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

Copyrights © WebCraftLogAll Rights Reserved.