【SANGOカスタマイズ】週間人気記事ランキングをスマートに表示する【WordpressPopularPost】

SANGOのランキング表示で月間・週間表示をしたいと思ったことはありませんか？

この記事は、SANGOで週間・月間集計の人気記事ランキングを使う方法を解説しています。

マサオカ

非公認SANGOエバンジェリストのマサオカです

SANGOには「人気記事ランキングを表示する機能」が付いていますが、累計での表示しかできません。

週間や月間などで集計すると重くなる可能性があるため、累計のみ設定可能としています。月間、週間などで集計したい場合には「WP Popular Posts」などのプラグインをご利用くださいませ。
SANGOカスタマイズガイド「人気記事の集計期間は？」より

SONGO公式サイトでも、このプラグインを利用するように勧められています。

「WordpressPopularPosts」を使えば、週間・月間で集計した記事ランキング表示や、表示項目の調整ができるようになります。

素晴らしいプラグインですね。

では、「WordpressPopularPost」を使って週間ランキングを表示してみましょう。

ヨメ

…なんかずれてる！！順位のマークもない！

このように、WordpressPopularPostsそのままの状態ではSANGOデザインに「ベストマッチ！」しません。

マサオカ

SANGOは洗練されたマテリアルデザインが売りの1つ。このまま使うのはもったいないですね。

これまで数多のSANGerが週間ランキングを諦めてきたことでしょう。

そこでマサオカがSANGO用のデザインセットを完成させました！！（ただの思いつき）

ちゃんとマウスオーバーすると動いたりします。

WordPressプラグイン「WordpressPopularPost」のデザインをSANGO風デザインに変更してしまいましょう。

ヨメ

完成イメージはこのような形になります。

SANGOにWordpressPopularPostsを追加 — WordPressPopularPosts

ベストマッチ！

この記事のもくじ

カスタマイズの順序

WordPressPopularPostsのプラグインをインストールしておきましょう。

プラグインのインストールはWordpress管理画面からおこなえます。

プラグインのインストールフロー

「プラグイン」→「新規追加」→「プラグインの検索」→「インストール」→「有効化」

手順

WPPのCSSを無効にする
タイトルにアイコンをつける
画像のサイズを調整する（160×160に）
SANGO風デザインにする（HTMLマークアップ）
ランキング順位の数字を入れる（style.cssにコピペ）
ビューの文字を英語表記にする（functions.phpにコピペ）

１．WordpressPopularPostのCSSを無効にする

これをやっておかないと、WPPがデフォルトで用意したCSSが読み込まれて表示が崩れていきます。

カスタマイズが難航しますので必ず「無効」にしてください。

設定→WordPressPopularPost→ツール→その他

マサオカ

これに気付くのに１時間くらいかかったよ！（白目）

２．タイトルにアイコンをつける

ウィジェットタイトルの横に、アイコンを入れます。SANGOに馴染ませるためにFontAwesomeのWebアイコンを利用します。

自分の好きなアイコンを選んで設定が可能です。

「　今週の人気記事」のような感じで作っていきます。

まず、ウィジェットタイトルを決めるためにタイトル欄に名前を入れましょう。

アイコンの設定に、上のタイトル欄は利用しません。

以下のHTMLマークアップ設定欄を利用します。

チェックボックス「カスタムHTMLマークアップを使う」にチェックを入れてください。

その下に表示される「タイトルの前/後」が入力箇所です。

タイトルの前/後にそれぞれ以下のコードをコピペしてください。

タイトルの前

<h4 class="widgettitle dfont"><i class="fa fa-map-marker"></i>

タイトルの後

</h4>

ヨメ

ｈ４って「見出しタグ」じゃないの？こんなところに使っていいのかな？

良く気づいたね！これはコンテンツの外だから問題ないよ！

マサオカ

参考見出しの使い方を身に付けて構成力を鍛えよう

ココでは、SANGOの純正ランキングの構造にあわせてH4タグを利用しています。

コンテンツの外に位置していますので見出しSEO的な問題はありません。ご安心ください。

アイコンを変えてみよう

使えそうなアイコンを選んでおきました。「タイトルの前」の赤字の箇所を置き換えてご利用ください。

　fa-bar-chart
　fa-share-alt
　fa-line-chart
　fa-hand-o-right

コレ以外のアイコンは「fontawesome」から取ってこれます。

fontawesomeの使い方がわからない方は「Fontawesomeの使い方|サルワカ」を参照してください。

３．画像のサイズを調整する

サムネは大事です。マウスオーバーで動くので、使いましょう。

「アイキャッチ画像を表示する」にチェックを入れてください。

「規定のサイズから選ぶ」より、thumb-160を選んでください。以上です。

４．SANGO風デザインにする

この設定で、WPPのデザインの設定をすべて置き換えます。

投稿の前 / 後:
投稿の HTML マークアップ:

投稿の前 / 後:

前コード

<ul class="my-widget show_num">

後コード

</ul>

投稿のHTMLマークアップ

コード

<li><a href="{url}"> <figure class="my-widget__img">{thumb_img}</figure><div class="my-widget__text">{text_title} <span class="dfont views"> {stats}</span></div></a></li>

細かい解説

デフォルトCSSをオフにしたので、ここでデザインの設定を行いました。

解説は長くなるのでボタンに隠しました。気になる方は下のボタンを押すと表示されます。

クリックして表示

ランキングのデザインは<li></li>に囲まれたモノをCSSでデザインしています。投稿のマークアップの中身は「１投稿に入っている要素」を表しています。｛｝で囲まれている{url}や{text_title} は、WPP専用のコンテンツ呼び出しタグです。このタグを組み合わせてHTMLを書きました。

SANGOのランキングの構造とclassをここで再現しています。

（最初はCSSを上書きしようと思ったのですが、こちらのほうが簡単で管理が楽そうなのでこちらにしました。）

だからアイコンを入れるときに使った<h4 class="widgettitle dfont">は、割と重要なclassだったりします。変えないでね。

これでWPPのCSSは、SANGOの純正ランキングに使っているものと全く同じものになりました。

そんな理由で、CSSの追記もいりません。SANGOのアップデートが来ても修正なしで対応ができます。（class名がかわるとどうしようもない）

５．ランキング順位の数字を入れる

これは、スタイルCSSにコピペして終わりです。

このCSSをコピペしてください。

style.css

/*--------------------------------------
wppでランキング順位を表示する
--------------------------------------*/
/* カウンタをリセット */
.my-widget.show_num {
    counter-reset: wpp-ranking;
}
/* 一覧の表示 */
.my-widget.show_num li {
    position: relative;
}
/* 順位を表示 */
.my-widget.show_num li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
 	display: inline-block;
 	position: absolute;
 	z-index: 1;
 	top: 0;
 	left: 0;
 	width: 25px;
 	height: 25px;
	border-radius: 50%;
	text-align: center;
	line-height: 25px;
}
/* 1位 */
.my-widget.show_num li:nth-child(1):before {
	background: #FCE36b;
	color: #fff;
}
/* 2位 */
.my-widget.show_num li:nth-child(2):before {
	background: #FCE36b;
	color: #fff;
}
/* 3位 */
.my-widget.show_num li:nth-child(3):before {
	background: #FCE36b;
	color: #fff;
}
/* 4位以降の色 */
.my-widget.show_num li:nth-child(n + 4):before{
	background: #f3f3f3;
	color: #9a9a9a;
}

黄色で塗りつぶしたカラーコードを自分の好きな色に変更すれば、色んな色でアイコンを作ることもできますよ。

WordPress管理画面から以下の一番下に貼り付けて保存してください。

６．ビューの文字を英語表示にする

いい感じに仕上がってきました。

閲覧数のあとの「ビュー」がかなりセンスない感じになってしまっているため、SANGOの表記にあわせて「views」に修正します。

子テーマのfunctions.phpに以下を追記しましょう。

子テーマのfunctions.php

//WordpressPopularPostの文字を置き換え
function remove_posted_on( $output ){
   return str_replace("ビュー", " views", $output);
}
add_filter( 'wpp_post', 'remove_posted_on');

これで、完成です。ページを確認しましょう。