当ブログのように記事下に人気記事ランキングをプラグインなしで出力するカスタマイズ方法です。
PC・タブレットでは3列、スマホでは2列になります。（cssで調整すれば他の列数にすることも可能です。）
目次
functions.phpにコードを追加
まずは下準備として記事の閲覧数を取得して投稿画面に表示する関数をfunctions.phpに追加します。
（functions.phpをいじるときは、必ずバックアップを取ってから行うか、ローカル環境でカスタマイズを行ってください。記述ミスがあると画面が真っ白になり、ログインできなくなることがあります。）
こちらは下記のサイトのコードを参照してください。
記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する | Plusers
single.phpに出力するコードを追加
記事ページに人気記事ランキングを出力するために、single.phpの人気記事を表示させたい部分に以下のコードを追加します。
<!-- 人気記事 -->
<aside class="popular">
<h4>Popular<em>人気記事</em></h4>
<ul>
<?php get_the_ID();//記事のPV情報を取得する
$args = array('meta_key'=> 'post_views_count',//投稿数をカウントするカスタムフィールド名
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => '6',
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>
<li>
<a href="<?php the_permalink(); ?>">
<div class="img-box">
<!--順位-->
<span class="rank-count r-count<?php echo $loopcounter; ?>">
<?php echo $loopcounter; ?>
</span>
<!--サムネイル画像の追加-->
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>
</div>
<div class="popular-text">
<div class="popular-title">
<?php the_title(); ?>
</div>
<!-- 更新日 -->
<div>
<time class="update-date">
<?php the_modified_date(); ?>
</time>
</div>
<!--カテゴリ-->
<div class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?>
</div>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</aside>h4の中のemは当ブログのようにサブタイトルを表示するための記述です。
不要であれば削除してください。
「’posts_per_page’ => ‘6’」の部分の「6」を変えると表示させる記事数を変えることができます。（ただし、2と3の倍数以外の個数にしてしまうとcssで調整が必要です。）
cssで見た目を整える
当ブログの人気記事ランキングのcssはこちら。
/* 人気記事 */
.img-box .rank-count {
position: absolute;
top: 0;
left: 0;
padding: 1px 8px;
color: #fff;
background: #606060;
opacity: .9;
font-size: .85rem;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
font-style: italic;
}
.img-box .r-count1, .img-box .r-count2, .img-box .r-count3 {
background: #9a9a9a;
opacity: .9;
}
.popular {
margin: 100px 0 5px 0;
padding: 0 0 10px 0;
}
.popular h4 em {
display: block;
font-size: .75rem;
font-style: normal;
font-weight: 300;
}
.popular h4:before {
position: absolute;
bottom: 0;
left: 0;
right: 0;
content: ".";
font-size: 0;
display: block;
margin: auto;
width: 50px;
height: 1px;
background-color: #000;
transform: rotate(0deg);
}
.popular ul {
font-size: 0;
margin: 10px 0;
padding: 0;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.popular li {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 33.33%;
list-style: none;
vertical-align: top;
height: auto;
padding: 25px;
position: relative;
}
.popular li a {
display: block;
text-decoration: none;
color: #000;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.popular li a:hover {
color: #000070;
background-color: transparent;
cursor: pointer;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .2);
-moz-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.popular .img-box {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
margin-bottom: 2rem;
box-sizing: border-box;
}
.popular img {
display: block;
width: 100%;
height: 125px;
object-fit: cover;
max-width: 100%;
max-height: 100%;
min-height: 100%;
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
margin: 0;
}
.popular img:hover {
opacity: .85;
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
margin: 0;
background-color: transparent;
display: block;
padding: 0 !important;
max-width: 100%;
max-height: 100%;
height: 125px;
width: 100%;
object-fit: cover;
}
.popular-title {
margin-bottom: 1rem;
letter-spacing: .05em;
}
@media screen and (max-width: 599px) {
.popular img {
height: 28vw;
object-fit: cover;
}
.popular-img:hover {
height: 28vw;
min-height: 28vw;
}
.popular .img-box {
height: 28vw;
min-height: 28vw;
}
}
.popular .popular-text {
font-size: .9rem;
font-weight: 400;
color: #454545;
text-align: left;
margin: 0;
line-height: 1.75;
}
.popular-text .update-date {
font-size: .7rem;
font-family: 'Open Sans',"Helvetica Neue", sans-serif;
font-style: italic;
}
.popular-text .cat-data {
font-size: .6rem;
font-style: italic;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
letter-spacing: .02em;
}
@media (max-width: 599px) {
.popular li {
width: 50%;
padding: 10px 5px;
}
}1〜3、4〜6位をそれぞれ同じ色にしていますが、「.img-box .r-count（数字）」の部分をそれぞれ指定すれば別々の色にすることも可能です。
人気記事のタイトル、日付とカテゴリーはGoogle Fontsを使用しています。
ホバー時に記事がカード状に浮き上がり、画像が少し大きくなるエフェクトをつけています。
フォントや余白はお好みで調整してください。
サービスメニュー
Postscript執筆後記
昨日はとあるコンサルティング。色々と考えさせられました。
Something New一日一新
ビストロ ガフ作 -39-
＼本を出版しました／
＼セルフマガジン無料送付／
