もくじ
【賢威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と変更して追記していってください。
サムネイルの画像サイズを変更する
最後に、デフォルトだと正方形に近い形の サムネイル画像を好みのサイズ・縦横比に変更する方法です。 私はこんな感じで16:9に近い縦横比に設定しています。
こちらについては以下の過去記事を参照してください。
【賢威7】「最近の投稿」サムネイル画像と文字サイズを変更する方法
いかがでしたでしょうか？
過去の人気記事ランキングは、
サイト内リンクでもアクセスを集めやすい
ウィジェットなので、
ぜひ訪問者の目に止まりやすく、カッコいいデザインにカスタマイズしてみてください。
]]>