【AFFINGER6】人気上位の記事を表示する方法【WordPress Popular Posts】

自分のブログで人気のある記事をランキング形式で表示したいけど、どうしたらできるかな？？

今回の記事はこんな疑問を解決していきます。ブログやサイトにとっては、人気記事を表示することはとでも大切です。

なぜかというと、訪れてくれたユーザーが

このサイトの上位に読まれている記事にはどういうものがあるのかな？？

こんな感じで、ユーザーに運営しているそのブログやサイトがどのようなコンテンツを発信しているかを理解してもらうのに、とてもわかりやすいからです。

他にも、人気記事が設置されていると、記事への誘導ができ、PV数の向上にもつながりますので、ぜひ活用してみましょう！

本記事の内容

WordPressプラグイン「WordPress Popular Posts」の設定

人気記事のコンテンツをCSSコードにてカスタマイズ

＼当ブログ使用テーマ／

誰でも簡単オシャレなデザイン！
インフォトップ月間総合第１位！
SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

AFFINGER6で人気記事を表示した完成例

まずは、プラグイン「WordPress Popular Posts」を使って作成した人気記事のコンテンツの完成図を確認してみましょう。

実際に作成した人気記事一覧

こんな感じのデザインになります。

順位・アイキャッチ画像・タイトル・抜粋が確認でき、ユーザーにとってもわかりやすいコンテンツが自動でランキング順に紹介ができます。

プラグイン（WordPress Popular Posts）のインストール

CSS

それでは、設定を始めていきましょう。設定手順は以下のとおりです。

最初に「WordPress Popular Posts」をプラグイン画面からインストールします。

step
1プラグインの追加

ワードプレス管理画面から「プラグイン」→「新規追加」を選択しましょう。

step
2プラグインの検索

右上の検索バーから「WordPress Popular Posts」で検索をする。

step
3インストール作業

「今すぐインストール」→「有効化」をクリックしてプラグインを導入しましょう。

以上の作業で、「WordPress Popular Posts」の導入完了です。

後は簡単な設定を行ないましょう！

WordPress Popular Postsの設定手順

WordPress Popular Postsのインストールと有効化ができたら、基本設定をしていきます。設定項目は以下のとおりです。

設定項目

WordPress Popular Postsをウィジェットに追加する
WordPress Popular Postsを基本設定を行う
WordPress Popular PostsをHTMLコードの編集をする

それでは、早速いきましょう。

WordPress Popular Postsをウィジェットに追加する

それでは、人気記事を「WordPress Popular Posts」を使って、表示させていきましょう。

今回はサイトのトップページのサイドバーに表示させていきます。

他のエリアに表示させたい場合には、手本的な手順は同じのもになるので参考にして下さい。

step
1ウィジェットの管理画面へ移動

WordPress管理画面から「外観」→「ウィジェット」を選択して、移動しましょう。

step
2サイドバーに追加

「WordPress Popular Posts」のインストールができていたら、左側のウィジェット一覧の項目に表示されているはずです。

そちらを、ドラックして、サイドバーの項目に追加しましょう。

WordPress Popular Postsの基本設定を行う

それでは、次に追加した「WordPress Popular Posts」の基本設定を行なっていきます。

「▼」をクリックすると以下の設定画面が表示されます。

ここでは、設定項目を確認してましょう。以下を参考にしてみて下さい。

タイトル	人気記事一覧の見出しタイトルを設定
最大表示数	人気記事の表示件数の設定。5,6件程度がオススメです
ソート順	「コメント」「総閲覧数」「1日の平均閲覧数から選択。
フィルター	ランキングの期間の設定。
投稿タイプ	ランキングにする投稿タイプを設定。
除外する投稿ID	ランキングから除外したい投稿を設定できます
タクソノミー	タクソノミーを指定。

それ以外の設定項目においても、表示に関するカスタマイズが行えます。

そちらに関しては、プレビュー画面で確認しながら、お好みの設定でOKです。

AFFINGER6にフィットするHTMLコードの設定

最後は「HTMLマークアップ設定」の項目を設定していきましょう。

「HTMLマークアップ設定」の項目にチェックを入れて、以下の項目を編集していきます。

もし、コードの入力欄が表示されていない場合には、一度チェックをつけて「保存」し、再読み込みして下さい。

以下の５つのコードを入力

 タイトルの前
<h4 class="menu_underh2">

 タイトルの後
</h4>

 投稿の前
<div class="kanren">

 投稿の後
</div>

 投稿の HTML マークアップ:
<dl class="clearfix number">
<dt >{thumb}{title}</dt>
<dd>
<div class="smanone2"><p>{summary}</p></div>
</dd>
</dl>

コピペしたら、プレビュー画面でどのような感じになっているか、確かめてみましょう。

AFFINGER6のデザインに合ったカードデザインで人気記事一覧が表示できていると思います。

まとめ：AFFINGER6で人気記事を表示してみよう

今回はAFFINGER6のデザインにあった、人気上位の記事をサイドバーなどに表示する方法の紹介でした。

まとめ

AFFINGER6の機能だけでは人気上位の記事を表示できない
人気記事の表示にはプラグイン「WordPress Popular Posts」を使用する
ショートコードでカスタマイズ可能

人気記事を表示することで、ユーザビリティも向上し、サイト内での他の記事への誘導も効果的です。

また、追加CSSを使って、デザインや動きカスタマイズして、お好みのデザイン・レイアウトを作ってみましょう！

参考トップページのカスタマイズに関する記事かこちら

参考アップデートやインストール・プラグインに関する記事はこちら

参考投稿記事のカスタマイズも関する記事はこちら

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら