ワードプレス

[ワードプレス入門-14]ちょっと豊かに楽しく! 読者のためでなく自分のためにも記事をランキングするプラグインPopular Posts

インストールするとブログがちょっと豊かになる、楽しくなる、読者だけでなく管理人にとっても参考になるプラグイン、それが「WordPress Popular Posts」です。

ブログの人気記事を順位をつけて表示できます。
また、表示期間を自由に設定してその統計情報を得ることができます。

欠点は、サイトの表示速度を遅くする原因となる、ということで私の場合、一時このプラグインを無効化しましたが、今はこの機能を重視して復活させています。

なるべく速度を落とさない設定にもしました。

このプラグインをさらにカスタマイズする方法も掲載します。

では始めましょう。

「WordPress Popular Posts」をインストールする

1.「今すぐインストール」をクリック

「プラグイン」→「新規追加」で、キーワード欄にPopularと入れて検索すると、「WordPress Popular Posts」が表示されますので、「今すぐインストール」をクリックします。

2.「有効化」をクリック

「有効化」します。

3.「設定」をクリック

「設定」をクリックします。

4.「ツール」をクリック

「ツール」をクリックします。最初はまだ統計情報はありませんが、時間が経過すると現れます。「24h(24時間)」「7d(7日間)」「30d(30日間)」「Custom(期間を指定)」をクリックすることで、統計表示期間を変えることができます。

5.サムネイル画像がない場合の画像を設定

ここで設定しておけば、サムネイルがない場合は、その画像が使用されます。設定しない場合は、下の「No Thumbnail」が表示されます。

このブログの場合

6.「閲覧を記録する対象者」を「訪問者のみ」に変更

「閲覧を記録する対象者」を「全員」から「訪問者のみ」に変更して「適用」ボタンをクリックします。「全員」の場合、管理者が閲覧したときもアクセス数にカウントされてしまいますので、それを除外するため「訪問者のみ」を選びます。他の設定は、表示速度をできるだけ落とさないようにした設定です。

7.「その他」の「リンクの開き方」を設定する

「現在のウィンドウ」は、人気記事をクリックすると、今のブラウザ画面に表示されます。
「新しいタブまたはウィンドウ」は、人気記事をクリックすると、別の新しいウィンドウで記事が表示されます。
「プラグインのスタイルシートを使う」はデフォルトのままでOKです。

ウィジェットで設定する

8.「外観」→「ウィジェット」

WPダッシュボードの「外観」から「ウィジェット」をクリックします。

9.Sidebarに「WordPress Popular Post」をドラッグ

赤枠の「WordPress Popular Post」を「Blog Right Sidebar」の中にドラッグ&ドロップします。

「WordPress Popular Post」がSidebarの中に加わりました。

10.「投稿設定」「統計タグの設定」

「投稿設定」「統計タグの設定」「HTMLマークアップ設定」などを自分流に設定し、「保存」ボタンをクリックします。わからない人は画像と同じ設定にしてみてください。

11.「タイトルを短縮」「アイキャッチ画像を表示」の設定

「投稿設定」で「タイトルを短縮」「アイキャッチ画像を表示」とすると、次の画面が表示されます。ここではタイトル25文字、アイキャッチ画像は縦75px横75pxの正方形を設定しました。好みで設定しましょう。設定が終了したら、「保存」、「完了」をクリックします。

以上で、Popular Postsの設定は終わりです。

さらにカスタマイズしたい!

CSSが使える人は子テーマで記述してください。

有料テーマの「JIN」だと、「追加CSS」という項目があり、簡単にCSSを記述できます。

アイキャッチ画像に丸みをつけたい!

CSSを次のように記述します。
5pxの数字を増やせばさらに丸みが増します。

ul.wpp-list li img {
border-radius: 5px 5px 5px 5px ;
}

アイキャッチ画像にシャドウ(影)をつけたい!

CSSを次のように記述します。
「box-shadow: 」の数字を増やせばさらに影が大きくなります。

ul.wpp-list li img {
box-shadow: 2px 2px 4px gray;
margin-bottom:0.5em;
}

区切り線をつけたい!

CSSを次のように記述します。
1pxの数字を増やせばさらに線が太くなります。

ul.wpp-list li{
list-style:none;
position:relative;
border-bottom:1px solid #ddd;
padding-bottom:0.5em;
}

順位を四角の中の白抜き数字で表示させる!

CSSを次のように記述します。「background:」の後で背景色を設定。
「font-size:」で数字の大きさを変えます。

ul.wpp-list {
counter-reset: wpp-ranking;
}
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
}
ul.wpp-list li {
position: relative;
list-style-type: none;
}
ul.wpp-list li::before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
background: #ff7fa1;
color: #fff;
font-size: 11px;
line-height: 1;
padding: 4px 8px;
position: absolute;
left: 0;
top: 0;
z-ind
}

以上のすべてを適用すると、↓こんなふうになります。

以上です。お疲れさまでした。