A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

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

      2016/07/22

費用:0円 時間:10分

 

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

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

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

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

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;
}

 

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

IMG_2621

 

 

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

 

 

 - サイト作成, プログラミング , ,

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事