賢威6まではプラグインをインストールしないと
人気の投稿記事ランキングを表示させることができませんでした。
ですが賢威7はデフォルトで人気の投稿記事ランキングを
表示させる機能が備わっています。
ウィジェットでサイドバーに表示させる、
この人気の投稿記事ランキングをカスタマイズしてみました。
もくじ
賢威7の人気記事/PV数ランキングをこうカスタマイズしたい!
賢威7には「PV数ランキング表示」という機能が
デフォルトでついているのでこちらを使ってみたのですが、
こんな感じでデザイン・レイアウトがビミョーT0T
※クール版・「シンプルなリスト」です
記事タイトルがの文字サイズがとにかく大きい。
1位・2位のランキング表示も大きいしダサい。
記事本文の表示も消したい。
このようにカスタマイズしてみたので、その方法をお伝えします。
賢威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】「最近の投稿」サムネイル画像と文字サイズを変更する方法
いかがでしたでしょうか?
過去の人気記事ランキングは、
サイト内リンクでもアクセスを集めやすい
ウィジェットなので、
ぜひ訪問者の目に止まりやすく、カッコいいデザインにカスタマイズしてみてください。