【賢威7】人気記事/PV数ランキングのカスタマイズ-表示順やサイズ変更

賢威6まではプラグインをインストールしないと
人気の投稿記事ランキングを表示させることができませんでした。

ですが賢威7はデフォルトで人気の投稿記事ランキングを
表示させる機能が備わっています。

ウィジェットでサイドバーに表示させる、
この人気の投稿記事ランキングをカスタマイズしてみました。

1 賢威7の人気記事/PV数ランキングをこうカスタマイズしたい！
2 賢威7のPV数ランキング(人気記事)のカスタマイズ

賢威7の人気記事/PV数ランキングをこうカスタマイズしたい！

賢威7には「PV数ランキング表示」という機能が
デフォルトでついているのでこちらを使ってみたのですが、
こんな感じでデザイン・レイアウトがビミョーT0T

※クール版・「シンプルなリスト」です

記事タイトルがの文字サイズがとにかく大きい。
1位・２位のランキング表示も大きいしダサい。
記事本文の表示も消したい。

このようにカスタマイズしてみたので、その方法をお伝えします。

賢威7のPV数ランキング(人気記事)のカスタマイズ

表示される要素の順序を変更する

デフォルトのPV数・人気記事ランキングでは
①順位画像の表示
②記事タイトル
③サムネイル
④記事本文の引用
という順序で要素が表示されています。

これを
①順位画像の表示
②サムネイル
③記事タイトル
に変更し、④記事本文の引用は削除します。

※phpファイル編集は失敗するとサイトが真っ白になってしまうので、
必ず元ファイルのバックアップをとっておくようにしてください。

function.phpファイルの2541行目に
ページのPV数を表示するウィジェット
というエリアがあります。

//---------------------------------------------------------------------------
//	ページのPV数を表示するウィジェット
//---------------------------------------------------------------------------
$ranking_style_list = array(
"1" => array("label" => "王冠アイコンのリスト", "ol_class" => "ranking-list01", "li_class" => ""),
"2" => array("label" => "メダルアイコンのリスト", "ol_class" => "ranking-list02", "li_class" => ""),
"3" => array("label" => "シンプルなリスト", "ol_class" => "ranking-list03", "li_class" => ""),
"4" => array("label" => "画像＋ランキング番号のリスト", "ol_class" => "ranking-list03", "li_class" => " on-image"),
"5" => array("label" => "画像＋テキストのリスト", "ol_class" => "ranking-list04", "li_class" => " on-image"),
"6" => array("label" => "背景画像＋テキストのリスト", "ol_class" => "ranking-list05", "li_class" => " on-image")
			);

ここがウィジェットでPV数・人気記事ランキングを
表示させるための記述です。

今回はシンプルなリストを選択した時の
表示のされ方を編集するので、上記で定義されている通りcase「3」の箇所を編集していきます。

元の記述↓

case "3":
if ($no <= 0) echo "<ol class=\"ranking-list ".$ranking_style_list[$style]['ol_class']."\">\n";

						echo "<li class=\"rank".sprintf("%02d", ($no+1)).$ranking_style_list[$style]['li_class']."\">\n";
						echo "<h4 class=\"rank-title\"><a href=\"".get_permalink($val['ID'])."\">".$val['post_title']."</a>";
						if ($show_pv) echo "<span class=\"num-pv\"> (".number_format($val['pv'])."pv)</span>";
						echo "</h4>\n";
						if (get_the_post_thumbnail($val['ID']) != "") echo "<div class=\"rank-thumb\"><a href=\"".get_permalink($val['ID'])."\">".get_the_post_thumbnail($val['ID'], 'ss_thumb')."</a></div>\n";
						echo "<p class=\"rank-desc\">".esc_html(strip_tags($content))."</p>\n";
						echo "</li>\n";
						break;

修正後の記述↓

case "3":
if ($no <= 0) echo "<ol class=\"ranking-list ".$ranking_style_list[$style]['ol_class']."\">\n";

						echo "<li class=\"rank".sprintf("%02d", ($no+1)).$ranking_style_list[$style]['li_class']."\">\n";
						if (get_the_post_thumbnail($val['ID']) != "") echo "<div class=\"rank-thumb\"><a href=\"".get_permalink($val['ID'])."\">".get_the_post_thumbnail($val['ID'], 'ss_thumb')."</a></div>\n";
						echo "<h4 class=\"rank-title\"><a href=\"".get_permalink($val['ID'])."\">".$val['post_title']."</a>";
						if ($show_pv) echo "<span class=\"num-pv\"> (".number_format($val['pv'])."pv)</span>";
						echo "</h4>\n";
						
						echo "</li>\n";
						break;

記事タイトルの文字サイズをカスタマイズする

続いてデフォルトではかなり大きめの
記事タイトルの文字サイズを小さくします。

子テーマのbase.cssファイルに下記を追記します。

.sub-conts .ranking-list03 > li .rank-title{
	font-size: 0.9em;
}

0.9emの箇所はお好みに合わせて好きな数値に変更してください。

ランキング表示のデザインをカスタマイズする

つづいて1・2・3…のランキング表示のデザインを変更していきます。

こんな感じで、サイトのテーマカラーに合わせた
デザインに変更して、サイズも小さくします。

このランキング表示の部分は画像を読み込んでいるので、
自分の好みのデザインの画像ファイルを用意します。

自分の好きなカラーやサイズで1/2/3を明記した
四角や丸のデザインをPPTなんかでササッと作ってしまいます。

私はこんな感じのものをPowerPointで作りました。
20px角の正方形です。

画像として保存したらWord Pressにアップロードします。

そして子テーマのbase.cssに下記を追記します。

/*ランキング用のシンプルなリスト*/
.sub-conts .ranking-list03 .rank01 .rank-title{ background: url(ここにアップロードした画像のURLを入れる) left top no-repeat; }
.sub-conts .ranking-list03 .rank02 .rank-title{ background: url(ここにアップロードした画像のURLを入れる) left top no-repeat; }
.sub-conts .ranking-list03 .rank03 .rank-title{ background: url(ここにアップロードした画像のURLを入れる) left top no-repeat; }
.sub-conts .ranking-list03 .rank04 .rank-title{ background: url(ここにアップロードした画像のURLを入れる) left top no-repeat; }
.sub-conts .ranking-list03 .rank05 .rank-title{ background: url(ここにアップロードした画像のURLを入れる) left top no-repeat; }

background: urlに続くカッコの中に、アップロードした画像のURLを入力します。

URLはhttp://pj-freedom/…となっていると思いますが、
http:を除いたURL、つまり//pj-freedom/…
といったように入力してください。

ちなみに上記のソースは5位までなので、
10位分の表示を変更したい方は.rank05の部分を
.rank06 .rank07と変更して追記していってください。