このブログはワードプレスを使って書いています。で、賢威7というテーマを使っています。

デフォルトではトップページは最新記事がドン、ドン、ドンと縦に並んでいるだけ。なんか味気ない。もうちょっと手を加えて、訪れてくれた方が見やすい表示ができないかな~と思い、今回は「カテゴリ別にランキングを表示する」ということにチャレンジしてみました。

 

こんな感じになります。↓

 

やることは3つです。

  1. 「WordPress Popular Posts」をインストール&有効化
  2. ショートコードで表示位置と内容を指定
  3. CSSでデザインを調整


スポンサーリンク

1. 「WordPress Popular Posts」をインストール&有効化

お決まりですけど、まずはメニューのプラグイン画面で「WordPress Popular Posts」を検索してインストールして、有効化します。

一応流れだけ説明しておくと、

  1. ワードプレスの画面左メニューの【プラグイン】
  2. 【新規追加】
  3. 【プラグインの検索...】の窓に「WordPress Popular Posts」と検索
  4. 【インストール】
  5. 【有効化】

これだけでOK!

設定画面で詳細をいじることができますが、特にいじる必要はありません。

2. ショートコードで表示位置と内容を指定

「WordPress Popular Posts」はショートコードで好きな場所にランキングを表示することができます。

私の場合は下のようなショートコードを書いています。

この[wpp header=・・・・・]のショートコードを記事編集画面に書き込むと、ブログの画面でランキングが表示されるわけです。

ショートコードの中身(パラメーター)をいじることでタイトルやタイトルの大きさ、集計期間、並び順、ランキングの表示件数や画像(サムネイル)の有無と大きさなどなど、いろいろなことを自分好みに設定することができます。下にパラメーターとその説明一覧を載せておきます。

パラメーター説明初期値
headerタイトルなし
header_startタイトルの開始タグ<h2>
header_endタイトルの終了タグ</h2>
limit表示件数
range集計期間/daily、weekly、monthly、alldaily
freshness??(設定しても変化なし?)/1(true),0(false)0
order_by並び順/comments、views、avgviews
post_typeWordPressに設定されている投稿タイプpost、page
pidポストIDなし
catカテゴリーIDなし
author著者IDなし
title_length記事タイトルの長さ25
title_by_words1を設定すると、記事タイトルの長さで表示する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】の一番下に貼りつけます。

 

すると、下のように少し見やすくなります。

 

ちなみにランキングの順位番号の部分の色を変えたければ、先ほどのcssコードの最後の方に書いてある、

background: rgba(〇〇〇,●●●, △△△, 0.9);

の部分の、〇〇〇,●●●, △△△の数字を変えてあげれば色が変わります。

この数値はネットで調べればすぐにわかります。お好みの色を指定してあげましょう。私は下のサイトさんを利用しました。

>> https://www.peko-step.com/tool/tfcolor.html

 

 

ってなわけで、お好きなカテゴリーのランキングをお好きな場所に表示する方法でした。

このショートコードを投稿ページ、固定ページ、トップページのどこにでも貼ってあげることでお好きな場所にカテゴリーランキングを表示できますよ。

 

 

スポンサーリンク