まとめサイトみたいに記事前に人気記事を表示する方法【WordPress】

費用：0円　時間：10分

２ちゃんのまとめサイト。

爆発的な閲覧数を誇るコンテンツということで、閲覧数を伸ばしたいならぜひとも参考にしたいサイトです。（パクりサイトだから、俺は嫌いだけどね…）

そこで、２ちゃんまとめサイトの閲覧数が多い理由を考えたのですが、記事の内容だけではなく、記事を見ている最中でも他の記事が気になってクリックしてしまうレイアウトにあると思います。

２ちゃんなどのまとめサイトはサイドバーや記事前に数多くの記事を紹介しています。

WordPressユーザーでも、サイドバーなどに人気記事は表示されていることだろうと思います。

しかし、まとめサイトのように記事前には人気記事を設置していない方も多いですよね！

なので、Wordpressで記事前に人気記事を表示する方法を紹介したいと思います。

sponsored link

記事前に人気記事を設置する方法

軽く内容説明

まず前提として今回の設置方法は、プラグインのWordPress popular postsを利用します。

そして、記事前に人気記事を設置するということで、サムネイルがあると煩わしいと思います。

ということでサムネイルなしの、記事名と順位と閲覧数だけを表示しているWordpress popular postsを設置したいと思います。

また、すべてのデバイスで人気記事を記事前に表示するのはおススメしません。

なぜなら、Wordpress popular postsはサイドバーにも表示可能で、ウィジェットとして設置している場合、PCでは2つが競合してしまうからです。

なので、スマホのみ表示ということで進めていきます。

header.phpを編集

WordPressの管理画面＞＞外観＞＞テーマの編集より、header.phpを編集しましょう。

以下のコードを設置したい箇所にコピペしましょう。

<?php if(is_mobile()) { ?><div class="popular-box">
<?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular("header=人気記事&limit=5&header_start=<h4>&header_end=</h4>"); ?>
</li>
</div>
<?php } else { ?>
<?php } ?>

ちなみに、

header=の部分は人気記事ウィジェットのタイトルとなります。

limit=の部分は表示される記事数となります。

header_start=の部分はウィジェットタイトルの開始タグの設定ができます。

header_end=の部分はウィジェットタイトルの終了タグの設定ができます。

各々編集してください。

そのほかにも設定はいろいろ可能です。

詳細については、Wordpress管理画面＞＞設定＞＞WordPress Popular Posts　にて、

parametersタブを開くと確認できますよ。

style.cssを編集

次に人気記事の部分がきれいに表示されるように編集しましょう。

編集する際、サイドバーで既にWordpress popular postsのコーディングをしているならそれを転用するといいですね。

俺の場合、サイドバーのものを転用して、プラスして、ボーダーラインと下マージンを設定しました。

.popular-box .wpp-list li{
 padding-bottom: 5px;
 border-bottom: 1px dotted #ccc;
}
.popular-box{
 margin-bottom:20px;
}

これで、以下のように人気記事が表示されるようになります。

みなさんも、記事の前に人気記事を表示してみましょう！