このブログはワードプレスを使って書いています。で、賢威7というテーマを使っています。
デフォルトではトップページは最新記事がドン、ドン、ドンと縦に並んでいるだけ。なんか味気ない。もうちょっと手を加えて、訪れてくれた方が見やすい表示ができないかな~と思い、今回は「カテゴリ別にランキングを表示する」ということにチャレンジしてみました。
こんな感じになります。↓
![]() |
やることは3つです。
- 「WordPress Popular Posts」をインストール&有効化
- ショートコードで表示位置と内容を指定
- CSSでデザインを調整
スポンサーリンク
1. 「WordPress Popular Posts」をインストール&有効化
お決まりですけど、まずはメニューのプラグイン画面で「WordPress Popular Posts」を検索してインストールして、有効化します。
一応流れだけ説明しておくと、
|
これだけでOK!
設定画面で詳細をいじることができますが、特にいじる必要はありません。
2. ショートコードで表示位置と内容を指定
「WordPress Popular Posts」はショートコードで好きな場所にランキングを表示することができます。
私の場合は下のようなショートコードを書いています。
1 | [wpp header="主夫なる日々" header_start="<h5>" header_end="</h5>" range="weekly" order_by="views" limit=5 thumbnail_width=75 thumbnail_height=75 stats_comments=0 stats_views=1 cat=2] |
この[wpp header=・・・・・]のショートコードを記事編集画面に書き込むと、ブログの画面でランキングが表示されるわけです。
ショートコードの中身(パラメーター)をいじることでタイトルやタイトルの大きさ、集計期間、並び順、ランキングの表示件数や画像(サムネイル)の有無と大きさなどなど、いろいろなことを自分好みに設定することができます。下にパラメーターとその説明一覧を載せておきます。
パラメーター | 説明 | 初期値 |
---|---|---|
header | タイトル | なし |
header_start | タイトルの開始タグ | <h2> |
header_end | タイトルの終了タグ | </h2> |
limit | 表示件数 | |
range | 集計期間/daily、weekly、monthly、all | daily |
freshness | ??(設定しても変化なし?)/1(true),0(false) | 0 |
order_by | 並び順/comments、views、avg | views |
post_type | WordPressに設定されている投稿タイプ | post、page |
pid | ポストID | なし |
cat | カテゴリーID | なし |
author | 著者ID | なし |
title_length | 記事タイトルの長さ | 25 |
title_by_words | 1を設定すると、記事タイトルの長さで表示する | 0 |
excerpt_length | 抜粋の長さ | 0 |
excerpt_format | 抜粋のフォーマットを設定することができるようなる | 0 |
excerpt_by_words | 抜粋の文字数 | 0 |
thumbnail_width | サムネイルの高さ | 0 |
thumbnail_height | サムネイルの横幅 | 0 |
rating | プラグイン「WP-PostRatings」をインストールして有効にしておくと、訪問者の重み付けが表示されるらしい | 0 |
stats_comments | コメント数を表示する/1 (true), 0 (false) | 0 |
stats_views | ビュー数を表示する/1 (true), 0 (false) | 0 |
stats_author | 投稿者を表示する/1 (true), 0 (false) | 0 |
stats_date | 投稿日を表示する/1 (true), 0 (false) | 0 |
stats_date_format | 日付のフォーマットを設定する | 0 |
stats_category | カテゴリーを表示する | 0 |
wpp_start | リスト表示の開始タグ | <ul> |
wpp_end | リスト表示の終了タグ | </ul> |
post_html | 表示フォーマット {thumb} {thumb_img} {title} {summary} {stats} {rating} {score} {url} {text_title} {author} {category} {views} {comments} {date} | <li>{thumb} {title} {stats}</li> |
ちなみに上で紹介した私のショートコードのパラメータは下のようになっています。
header="主夫なる日々" header_start="<h5>" header_end="</h5>" range="weekly" order_by="views" limit=5 thumbnail_width=75 thumbnail_height=75 stats_comments=0 stats_views=1 cat=2 |
これを[]の中にスペースで区切りながら並べてあげるだけです。
どのカテゴリーのランキングにするのかを決める重要なパラメーターが一番下の「cat」です。この番号はカテゴリー編集画面で確認できます。
ランキングを作成したいカテゴリー名にマウスを合わせると、画面下に文字列が現れます。その中の「…tag_ID=2…」という部分の数字を書いてあげます。(ここでは「主夫なる日々」というカテゴリー番号が2ということ)
パラメータ「cat」をいじるといろいろできる
catは1つのカテゴリーに限らず複数のカテゴリーを指定できます。その場合カテゴリー番号を「,(コンマ)」で区切ります。ですからcat=2,4,5のように複数のカテゴリー混在の中でのランキングを表示することもできます。
また cat="" のように何も指定しなければ全てのカテゴリを指定できます。つまりブログ内の全記事のランキングとなりますね。
スポンサーリンク
3. CSSでデザインを調整
上で紹介した私のショートコードではデフォルトの状態だと下のような見栄えです。↓
![]() |
これをcssに手を加えて少し見栄えを良くしてみます。下のコードを【外観】→【テーマの編集】→【rwd.css】の一番下に貼りつけます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | /******************************* * アクセスランキング ********************************/ /* 記事内で使うアクセス数ランキング */ .wpp-list { padding: 0; } .wpp-list li { border: solid 1px #ddd; border-radius: 0 5px 5px 5px; margin-bottom: 10px; padding: 5px; } .wpp-no-thumbnail .wpp-list li { padding-left: 32px; } .wpp-list .wpp-comments, .wpp-list .wpp-views { color: #DC4E55; position: absolute; line-height: 1; right: 8px; bottom: 8px; font-size: 14px; font-weight: bold; background: rgba(255, 255, 255, 0.9); padding: 2px; border-radius: 2px; } .wpp-list .wpp-post-title { line-height: 1.5; font-size: 15px; } .wpp-list a { color: #333; text-decoration: none; font-weight: bold; } .wpp-list a:hover { color: #b22222; } /* カウンターの初期化 */ .wpp-list { counter-reset: wpp-ranking; } /* カウンターの値を表示 */ .wpp-list li:before { content: counter(wpp-ranking, decimal); counter-increment: wpp-ranking; } /* デザイン調整 */ .wpp-list li { position: relative; list-style-type: none; padding-top: 5px; padding-left: 5px; } .wpp-list li:before { content: counter(wpp-ranking, decimal); counter-increment: wpp-ranking; background: rgba(94, 185, 77, 0.9); color: #fff; font-size: 14px; line-height: 1; padding: 4px 8px; position: absolute; left: 0; top: 0; z-index: 1; } /* 順位部分の色 */ .wpp-list li:nth-child(1):before { background: rgba(255, 88, 196, 0.9); } .wpp-list li:nth-child(2):before { background: rgba(210, 204, 227, 0.9); } .wpp-list li:nth-child(3):before { background: rgba(245, 171, 31, 0.9); } .wpp-list li:nth-child(4):before { background: rgba(88, 234, 245, 0.9); } |
すると、下のように少し見やすくなります。
![]() |
ちなみにランキングの順位番号の部分の色を変えたければ、先ほどのcssコードの最後の方に書いてある、
background: rgba(〇〇〇,●●●, △△△, 0.9);
の部分の、〇〇〇,●●●, △△△の数字を変えてあげれば色が変わります。
この数値はネットで調べればすぐにわかります。お好みの色を指定してあげましょう。私は下のサイトさんを利用しました。
>> https://www.peko-step.com/tool/tfcolor.html
ってなわけで、お好きなカテゴリーのランキングをお好きな場所に表示する方法でした。
このショートコードを投稿ページ、固定ページ、トップページのどこにでも貼ってあげることでお好きな場所にカテゴリーランキングを表示できますよ。