【AFFINGER5】アフィンガーにWordPress Popular Postsを設定する詳細解説！

[st-kaiwa2]ブログでアフィンガーを使っています。
WordPress Popular Postsを設置したのですがデザインが大きくで気に入りません。
すっきりしたデザインにする方法を教えてください。
よろしくお願いします。
[/st-kaiwa2] [st-kaiwa1 r]こんにちは！　スズヒロです！はい、しっかりご説明します！[/st-kaiwa1]

WordPress Popular Posts（以降WWPと記載します）はブログやサイトに人気記事を表示させることができる非常に便利でそして人気のプラグインです。

あなたの読者が、あなたのどの記事を読んでくれているのかが、一目でわかる優れものです。

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”0″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]※この記事ではインストールの方法は割愛しています。
[/st-mybox]

本日の記事内容

WordPress Popular Postsとは？
WordPress Popular Postsのツールを設定する
WordPress Popular Postsをサイドバーに設置する
WordPress Popular Postsの表示を確認する
以降WWPと記載します！

記事の信頼性

スズヒロ＠hirosuzue

　WordPress有料テーマならAFFINGER

＼STINGERタグ管理プラグイン3無料特典／

きっと友達に自慢したくなります。

早速スタートしましょう。

1 WPPとは？
2 WPPのツールを設定する
3 WPPをサイドバーに設置する
4 WPPの表示を確認する
5 まとめ

WPPとは？

冒頭申し上げた通リとても便利でそして人気にプラグインです。

こんな感じに表示されます。

次の設定方法のところで詳しく解説しますが、サムネイルの大きさや抜粋文字の変更も可能です！

WPPのツールを設定する

この画面での大項目は4つになります：

アイキャッチ画像
データ
その他
キャッシュの設定

まずは管理画面で「設定」をクリック。すると「WordPress Popular Posts」があるのでそれをクリックです。

WWPの管理画面になります。そしてこの画面中央の「ツール」をクリックします！

アイキャッチ画像

ここはそのままでOKです。

1．デフォルトのアイキャッチ画像

1．を設定しておけば、記事のアイキャッチが表示されない場合には、ここの画像が代わりに表示されるというものです。

2．画像の取得元

どの画像を取得するかを選択できます。サムネイルでOKです

3．Lazy Load

3.画像の遅延ロードを行うためのJavaScriptライブラリのことです。これを利用すると煩雑な遅延ロード処理を簡単に実現できるというもの。

データ

1．閲覧を記録する対象者

「訪問者のみ」「ログイン中のユーザーのみ」「全員」の3つから選択可能です。「訪問者のみ」を選択しましょう！

2．ログ上限

データの保存期間を「無効」と「データ保存期間」の2つから選択可能です。
無効：保存期間が無期限です。これはサーバーに負担がかかります。
データ保存期間：こちらがおすすめで180日がデフォルトになります。

3．ウィジェットをAJAX化

WPPはキャッシュ系プラグインとの相性が悪いです。その場合には「有効」にしましょう！

4．データキャッシュ

キャッシュするのままでOKです。

5．キャッシュ更新間隔

キャッシュの更新期間を設定可能です。1分がデフォルトです。

6．データサンプリング

個人のブログなどは「無効」でOKです。

その他

1．リンクの開き方

現在の画面か新しい画面で開くか選択可能です。

2．プラグインのスタイルシートを使う

プラグインにデフォルトで備わっている「CSS」を使用する場合にはそのまま「有効」でOKです。

キャッシュの設定

・キャッシュを空にする

全期間データ以外のデータを削除することが出来ます。

・すべてのデータを削除

全期間のデータを削除することができます。

これでツールの設定は完了です。お疲れ様でした。

WPPをサイドバーに設置する

ここからは、管理画面にて「WPPのウィジェット」を「スクロール広告用」にドロップしたところからスタートします。

この画面の解説から行きます！

1．タイトル

人気記事など好きなタイトルを入れてください。

2．最大表示数

数値は自由です。5~7記事ぐらいがいいでしょうかね。

3．ソート順

どのデータを基準に順位をつけるのかを設定します。「総閲覧数」が一般的です。

4．時間の範囲

24時間、1週間、30日、全期間と選択可能です。わたしは「1週間」で動きを見ています。

5．投稿タイプ

デフォルトでは「post」になっています。これが投稿です。デフォルトでOKですね。

6．除外する投稿ID

このIDは、

https://suzue.org/wp-admin/post.php?post=52606&action=edit

の番号「52606」がIDになります！
投稿ページの上部アドレスに入っています！
除外したいときにはIDを入れて下さい。

次にこの画面です。

1．投稿設定

3つの選択「タイトルを短縮」「抜粋を表示」「アイキャッチ画像を表示」から「アイキャッチ画像を表示」を選択します！
これはテキストだけの記事一覧より説得力がありますから。

さらにアイキャッチ画像のサイズを既定のサイズから選ぶします。

[st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#FFD54F” bordercolor=”#FFD54F” bgcolor=”#FFFDE7″ borderwidth=”2″ borderradius=”0″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]「アイキャッチ画像を表示」を選択してから、一度保存を押してください。そうするとこの手動入力画面が表示されます！[/st-mybox]

2．統計タグの設定

ここではそのままノーチェックにしています

さあ、もう少しです！この画面に行きます。

はい、少しデザインを変更します。「カスタムHTMLマークアップを使う」にチェックを入れます！

1．タイトルの前/後

ここには以下のコードをそのまま入力してください。コピペOKです。

前：<h4 class="menu_underh2" style="text-align:left;"><span>

後：</span></h4>

2．投稿の前/後

ここにも以下のコードをそのまま入力してください。コピペOKです。

前：<div class="kanren ">

後：</div>

3．投稿のHTMLマークアップ

ここにも以下のコードをそのまま入力してください。コピペOKです。

<dl class="clearfix">
<dt >{thumb}</dt>
<dd>
<h5>{title}</h5>
<div class="smanone2"><p>{summary}</p></div>
</dd></dl>

WPPの表示を確認する

プラグインが最新の状態に更新されていない場合に表示されないことがあります。

管理画面の「プラグイン」から「インストール済みプラグイン」にいき、WPPの更新をしてみてください。

更新がない場合には、一旦プラグインを停止してから再び有効化しましょう！

まとめ

いかがでしたか？

ブログのトップページでランキングを確認できるのは大変便利です。

そして検索順位チェックツールを併用してキーワードの追加やリライトなどを行ってみてください！

[st-card myclass=”” id=51773 label=”あわせて読む” pc_height=”” name=”” bgcolor=”#ee7917″ color=”” fontawesome=”” readmore=”off”]

本日は以上になります。