AFFINGER5で人気記事を表示する方法【WordPress Popular Posts】

「AFFINGER5（アフィンガー5）で人気記事一覧を表示したい！」

ですが残念なことに、AFFINGER5（アフィンガー5）には人気記事一覧の設置機能が用意されていません。

AFFINGER5（アフィンガー5）の標準機能にない時は、WordPressプラグインで対応しましましょう。

今回はWordPressプラグインの「WordPress Popular Posts」を使って人気記事一覧を表示する方法をご紹介します！

AFFINGER5で作成する人気記事一覧の完成図

今回はこのようなウィジェットを表示させるように設定していきたいと思います。

WordPress Popular Postsのインストール方法

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

WordPress管理画面から「プラグイン」→「新規追加」に移動しましょう。

検索バーから「WordPress Popular Posts」を調べると、赤い背景に白い炎が書かれたプラグインが表示されます。

「今すぐインストール」→「有効化」をクリックしてプラグインを使える状態にしましょう。

WordPress Popular Postsの設定方法

WordPress Popular Postsをウィジェットに配置

基本設定をするには、ウィジェット画面から人気記事一覧を追加する作業が必要です。

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

人気記事一覧を表示させたい場所のウィジェットを選びます。

WordPress Popular Postsをインストールすると、ウィジェット一覧に「WordPress Popular Posts」という項目が追加されているはずです。それを選択します。

設置場所はどこでも構いませんが、個人的には「サイドバートップ」をオススメします。

WordPress Popular Postsの基本設定

追加したWordPress Popular Postsの「▼」を開くと設定画面が表示されます。

いろいろ設定項目がありますが基本的にはデフォルトの設定でよいです。以下の設定だけ変更するようにします。

• 抜粋を表示するかどうか
  →表示する
• 抜粋の文字数
  →55文字
• アイキャッチ画像のサイズ
  →300×300
• 日付フォーマット
  →WordPress日付書式

一番下に「HTMLマークアップ設定」という項目があります。

ここではオリジナルのコードを書くことで見た目を整えることができます。

HTMLマークアップ設定

それぞれのコードは以下のとおりです。

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

 タイトルの後
</h4>

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

 投稿の後
</div>

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

適宜コピーペーストして貼り付けましょう。これで完成です。