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

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

 

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

 

やることは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」はショートコードで好きな場所にランキングを表示することができます。

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

この[ｗｐｐ 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は１つのカテゴリーに限らず複数のカテゴリーを指定できます。その場合カテゴリー番号を「,（コンマ）」で区切ります。ですからcat=2,4,5のように複数のカテゴリー混在の中でのランキングを表示することもできます。

また cat="" のように何も指定しなければ全てのカテゴリを指定できます。つまりブログ内の全記事のランキングとなりますね。



スポンサーリンク


3. CSSでデザインを調整

上で紹介した私のショートコードではデフォルトの状態だと下のような見栄えです。↓

 

これをcssに手を加えて少し見栄えを良くしてみます。下のコードを【外観】→【テーマの編集】→【rwd.css】の一番下に貼りつけます。

 

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

 

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

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

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

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

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

 

 

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

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

 

 

スポンサーリンク