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

2022年4月23日

 

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

 

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

 

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

 

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

 

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

 

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

 

本記事の内容

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

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】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マークアップ設定」の項目にチェックを入れて、以下の項目を編集していきます。

 

 

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

 

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

 タイトルの前
<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を使って、デザインや動きカスタマイズして、お好みのデザイン・レイアウトを作ってみましょう!

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER, ブログ運営
-,