WordPressテーマ「STINGER3」に人気記事ランキングを表示するカスタマイズ

WordPress

2014.09.032019.01.09

前回は、ページ閲覧数の表示と、人気記事ランキングを簡単に作成できるプラグイン「WP-PostViews」を使用して、このような人気記事ランキングを作成しました。

前回の記事はこちら参照⇒WordPressプラグイン「WP-PostViews」で人気記事ランキング表示

当ブログは、検索エンジン最適化（SEO）に強いと言われているWordPressテーマ「STINGER3」を使用しているので、サイドバーに表示される「NEW ENTRY」（新着記事）と同じようにサムネイルを表示したスタイルで、人気記事ランキングを表示させたいと思います。

なお、今回のバージョンは以下です。

WordPress 3.9.2
STINGER3_ver20140327
WP-PostViews 1.67

プラグイン「WP-PostViews」の仕組み
人気記事ランキングの作成

プラグイン「WP-PostViews」の仕組み

プラグインを有効化すると、投稿と固定ページが閲覧されたら、カスタムフィールドの「views」という項目を作成し、値を加算していくようになっている。

なので、投稿もしくは固定ページの一覧を項目「views」の値の降順（閲覧数の多い順）で並べ替え、表示したい件数だけ取得し、表示してやれば人気記事ランキングの完成である。

そう考えると、意外と簡単そうだ。

ちなみに、プラグインを修正して思い通りに表示されるようにする方法もあるが、プラグインが更新された場合など、修正箇所を上書いてしまい、更新の都度修正をしないといけないことを考えると、とても手間です。

なので、表示箇所は自分で作ってしまう方が良いと思います。

人気記事ランキングの作成

続いて、本題の人気記事ランキングの作成へ。

まずは、サイドバーである「sidebar.php」ファイルの「NEW ENTRY」（新着記事）の以下の箇所をコピーする。

<!--最近のエントリ-->
    <h4 class="menu_underh2">NEW ENTRY</h4>
    <div id="topnews">
      <div>
<?php
$args = array(
    'posts_per_page' => 5,
);
$st_query = new WP_Query($args);
?>

<?php if( $st_query->have_posts() ): ?>
    <?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
<dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
    <?php the_post_thumbnail( 'thumb100' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
        <?php endif; ?>
        </a></span></dt><dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<p><?php echo mb_substr( strip_tags( stinger_noshotcode( $post->post_content ) ), 0, 35 ) . ''; ?></p>
</dd>
<p class="clear"></p>
</dl>
    <?php endwhile; ?>
<?php else: ?>
    <p>記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
        <p class="motto"> <a href="<?php echo home_url(); ?>/">→もっと見る</a></p>
      </div>
    </div>
    <!--/最近のエントリ-->

これに少し手を加える。

表示順序は、カスタムフィールドの「views」を降順（閲覧数の多い順）にする。

注意点としては、このカスタムフィールドは数値として扱わないと、思い通りの順序に並んでくれないので、「orderby」の指定は、「meta_value」ではなく、「meta_value_num」にする必要がある。

そして、表示する項目はサムネイルと記事タイトルのみで、記事本文はいらないので、カスタムフィールドの「views」の値を取得し、閲覧数として表示するようにした。

なお、この人気記事ランキングを追加する位置は、スクロール広告箇所とした。

ユーザーが記事を読んでいる際に、右側に人気記事ランキングを表示させることで、他のページへの興味も持ってもらい、ページビュー数を稼いでもらうことを狙ってみた。

<!--アドセンス-->
  <div id="ad1">
    <!--人気記事ランキング-->
    <h4 class="menu_underh2">人気記事ランキング</h4>
    <div id="topnews">
      <div>
<?php
$args = array(
    'posts_per_page' => 5,
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
    'order' => 'DESC'
);
$st_query = new WP_Query($args);
?>

<?php if( $st_query->have_posts() ): ?>
    <?php while ($st_query->have_posts()) : $st_query->the_post(); ?>
<dl><dt><span><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
        <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
    <?php the_post_thumbnail( 'thumb100' ); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
    <img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
        <?php endif; ?>
        </a></span></dt><dd><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

<p><span id="views"><?php echo get_post_meta(get_the_ID(), 'views', true); ?> views</span></p>
</dd>
<p class="clear"></p>
</dl>
    <?php endwhile; ?>
<?php else: ?>
    <p>記事はありませんでした</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
      </div>
    </div>
    <!--/人気記事ランキング-->
  </div>

で、実際の人気記事ランキングの表示は次のような感じです。

以上です。