ブログのホームに人気記事を表示させよう!プラグインがやっぱり簡単♪

こんにちは。週末ブロガー☆りっちゃんです(@weekendgirl2017)

今回はブログのホームに『人気記事』を表示させる方法についてです☺
ネットでいくつかのサイトを参考に、人気記事の表示をすることに成功したので良ければ参考にしてください☆

スポンサーリンク


人気記事を表示させるプラグインのダウンロード

今回私が使用したのは『WordPress Popular Posts』です.
人気記事を表示させるプラグインも色々あると思いますが、調べたところこれが使い勝手良さそうでした!

①プラグインの新規追加をクリックします

②プラグインの検索のところで『WordPress Popular Posts』と入力しましょう

③右上に『今すぐインストール』と出ますので、そこをクリックです

④インストールを終えたら、プラグインのページから有効化にしましょう!
停止の部分が有効化となっているはずなので、そこをクリックしてください.

これで『WordPress Popular Posts』の準備は完了です.

人気記事を表示させよう

プラグインを有効化し終えたら、さっそくホームに人気記事を表示させましょう.

①外観→ウィジェットへいきます.すると利用できるウィジェットの中にWordPress Popular Postsがあることを確認しましょう.

②WordPress Popular Postsをサイドバーへドラッグします.

③ドラッグをすると、いろいろな設定が出てきます.好みに合わせてカスタマイズしていきましょう.

④表示する人気記事の設定

私の場合で説明します.ここからは好みの設定で選んでいってください.

(1)私は1週間の人気記事を表示させたいので、タイトルは『今週の人気記事』としています.

(2)記事の表示数は『5』にしています.

(3)ソート順は以下の中から選ぶことができます.

①コメント
②総閲覧数
③1日の平均閲覧数

(4)計測期間は以下の中から選びましょう.私の場合は7日間です.

①過去24時間
②過去7日間
③過去30日間
④全期間
⑤カスタム

(5)投稿タイプは『post』のみにしておくと良いようです.

(6)投稿設定はお好みで、私のものと同様のものにしたい場合はこの画像の通りチェックを入れましょう
サイズは規定サイズのものから選ぶこともできますし、カスタムで設定することも可能です.

(7)統計タグについては、表示させたいものだけにチェックを入れましょう.
すべてにチェックを入れるとごちゃごちゃするように思えたので、私はPV数のみにしています.

(8)『HTML マークアップ設定』にはチェックを入れましょう.
投稿の前/後の左の入力ボックスのコードを以下のように編集しないときちんと表示されないそうなので、変えておきましょう.

(9)最後に保存です!
以下のような形で人気記事の表示がされるはずです!

CSSを使うといろいろカスタマイズが可能です!

CSSでカスタマイズ

CSSで人気記事表示のところをカスタマイズすることができます.
私は少しだけカスタマイズしました.(ネットで調べて組み合わせてみました)

CSS使用前

CSS使用後

今回使用したCSSのコードは以下の通りです.
とりあえずこのコードを貼れば私のサイトと同様のデザインを作ることができます☺

/*– 人気記事デザイン –*/
ul.wpp-list li {
border-bottom: 1px dashed #79c06e;/*記事間の点線と色*/
position: relative;/*相対位置*/
}

ul.wpp-list li img {/*アイキャッチ画像*/
margin: 10px 10px 10px 0px;/*画像の余白*/
padding: 3px;/*画像の位置*/
}

ul.wpp-list li a.wpp-post-title {/*記事タイトル*/
display: block;/*ブロック形式で表示*/
font-size: 15px;/*文字サイズ*/
color: #333;/*文字色*/
padding: 12px;/*タイトル位置*/
text-decoration: none;/*タイトルの下線なし*/
}

ul.wpp-list li a.wpp-post-title:hover {
color: #4169e1;/*ホバー時のタイトル色*/
}

ul#popular-posts.wpp-list {
counter-reset: pupular-ranking;
}

ul#popular-posts.wpp-list li {
position: relative;
}

ul#popular-posts.wpp-list li:before {
background: none repeat scroll 0 0 #666;
color: #fff;
content: counter(pupular-ranking, decimal);
counter-increment: pupular-ranking;
font-size: 100%;
left: 0;
top: 0;
line-height: 1;
padding: 4px 7px;
position: absolute;
z-index: 1;
opacity: .9;
border-radius: 0;
font-family: Arial;
}

(複数サイトより引用)

主な変更点

【数字でのランキング表示】
【仕切りの点線
【文字】

CSSに詳しい人ならもっとアレンジを加えることができるかもしれません☺

まとめ

人気記事を表示させる方法を調べてみると、いろいろなやり方が出てきました.
今回はいろんな方のサイトを参考にして、設定することができましたのでその方法を紹介いたしました.

私はCSSの知識が限りなく0に近い状態なので、そういう人たちの参考になっていれば幸いです^^
私も少しずつCSSのお勉強がんばります♪

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です