当ブログのように記事下に人気記事ランキングをプラグインなしで出力するカスタマイズ方法です。

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-

\本を出版しました/

Seiji Aihara / 相原 征爾

Seiji Aihara / 相原 征爾

『独立は最強の解決法』という理念のもと、長期的な視野と絶妙なバランス感覚で人生を楽しむことをサポートする、ひとりビジネス専門税理士。ひとり社長。

得意な仕事はクラウド会計の導入・ペーパーレス化・経理業務効率化・各種シミュレーション・独立支援など。
遠方・オンライン・スポット対応可能です。
簿記がわからなくても、一から経理ができるようにお伝えします。
Windows・Mac両対応。

音楽、映画、インターネット、カレー、クラフトビールが大好き。

詳しいプロフィールはこちら
税理士事務所のHP・サービス一覧はこちら

著書 『知識・経験ゼロでも独立して人生を楽しむ方法』