音楽やDTM、動画やWEBサイトお役立ち情報を中心にお届けしたいと思っております。

「WordPress Popular Posts」の記事にランキングの順位を表示する方法

2020/05/09
 
この記事を書いている人 - WRITER -

「WordPress Popular Posts」で任意の記事を順位付きでランキング表示する方法

 

手軽に人気記事ランキングを作成できるプラグインとして有名な「WordPress Popular Posts」
デフォルトでも十分使えるのですが、使い込んでくるとここをああしたらと、色々とカスタマイズしたくなります。

そんなカスタマイズの中で、今回ご紹介するのが、このランキング記事自体を自分の好きな記事をピックアップするというものです。

「WordPress Popular Posts」でランキングを作成する必要性や効果

ブログを続けていると、「PVを稼ぐ記事」や「読んでほしい記事」が出てきます。

訪問者へオススメの記事を見てもらったり、自他ともにブログの成果が多く出ている記事を知れます。

あと、SEO的にはここに表示される記事が最初に目に留まりブログの概要を簡単に知ることが出来る窓口ともなりえます。

例えば、アフリエイト記事が多かったら、「このブログはアフリエイトに強い」んだなということで認識いてもらえます。そう考えると、結構重要ですよね。
ということで、任意記事ランキングをちょっとしたカスタマイズをご紹介します。

デフォルトからのカスタマイズ要素

カスタマイズしたいよくある内容

  • サムネイル間が詰まり過ぎているので、少し余白をつけたい
  • タイトル「人気記事ランキングTOP5」の文字の大きさを大きくしたい
  • 1位から5位までの順位表示をつける

順位付きランキングとサムネイル調整

カスタマイズの方法はCSSに追記するだけなので、とっても簡単です。
下記をCSSの一番下に追記してください。

テーマ編集⇒スタイルCSS(一番下)

これでランキング表示と窮屈なサムネイル解消ができたかと思います。

順位付けのカラーを変更したい場合は下記の部分の色を変更しましょう。

また、サムネイルの間隔を変更したい場合は下記をの数字を変更しましょう。

※記述した順に「上、右、下、左」の余白になります。

タイトル文字の大きさを調整したい場合

これで基本的な見え方は問題ないのですが、タイトル文字の大きさ「人気記事ランキングTOP5」が少し小さい場合は下記を調整しまししょう。

先ほどのCSSへ下記を追記するだけです。

「font-size」をお好きな数字に変更ください。

また、タイトル周りの余白が気になる人は「margin」の数字を調整ください。
こちらも、記述した順に「上、右、下、左」の余白になります。

金銀銅の色つける方法

ul.wpp-list li:nth-child(1):before{/*ランキング1*/
background-color: #FBCC54;/*背景色*/
}
ul.wpp-list li:nth-child(2):before{/*ランキング2*/
background-color: #B7BFC1;/*背景色*/
}
ul.wpp-list li:nth-child(3):before{/*ランキング3*/
background-color: #D47B16;/*背景色*/
}

気持ち文のデザインがスッキリする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;/*ホバー時のタイトル色*/
}

任意の記事ランキングのカスタマイズ実装方法(CSS)

見え方のカスタマイズが完了したところで、いよいよ任意の記事をランキングしていきます。
「タグ」と「WordPress Popular Posts」のウィジェット設定を施します。

「タグ」の設定

やることは簡単。
これ用のタグを作成して、表示したい特定の記事にこのタグを追加するだけです。

私は「人気記事TOP5」という名前にしましたが、なんでもOKです。
記事下やサイドバーにタグ表示を設定している人は、実際の見え方を意識した名前にしましょう。

「WordPress Popular Posts」ウィジェットの設定

続いてウィジェットの設定を変更していきます。
変更した箇所はこちら。

  • 計測期間を「過去24時間」
  • タクソノミーのタグ設定
  • 閲覧数を非表示

タクソノミーのタグに先ほど設定したランキング用のタグの数字を設定します。
確認方法はタグ設定の編集画面のURLで確認できます。

計測期間の設定に関しては、長い期間にしてしまうとランキングが固定されて面白くないので、24時間としましたが、お好みでどうぞ。

閲覧数の非表示に関しては、任意のランキングになるため、表示していると「ランキングの順番違うじゃん!」ということになってしまいます。

カスタマイズは以上です!

上手くいきましたでしょうか。
誰かのお役に立てれば幸いです。

この記事を書いている人 - WRITER -

- Comments -

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

Copyright© 売るべきものはこれだ!! , 2018 All Rights Reserved.