パソコン・ウェブ制作

WordPress Popular Postsを導入しました

投稿日:2014年10月4日 更新日:

WordPress Popular Posts

閲覧数をランキング表示してくれるWordpressのプラグイン「WordPress Popular Posts」を導入しました。

普通にランキング表示するだけであれば、難しくはないのですが、Stinger5のNew Postとスタイルをあわせたり、カテゴリ別ランキング表示させるのに手間取りました。

Stinger5とスタイルを合わせる

これについては、色々なサイトで方法を紹介しています。
いろんな方法を試しながら、結局落ち着いたのはキャリコさんの記事でした。

【リンク】WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法キャリコ

この方法で設定をしていくと、ランキング順位表示もされるので一石二鳥ですよ。
※作業開始前に必ずバックアップを取ってください。
※素人のカスタマイズですので同じように設定しても動作しない場合があります。あらかじめご了承ください。

ちなみに私の設定はこちらです。
ウィジェット

<div id="popular-post"><div>
</div></div>
<script type="text/javascript">
$(function(){
    $('#popular-post dl dt').each(function(i){
        $(this).attr('class','number' + (i+1));/*←➀*/
    });
});
</script>
<dl>
 <dt>{thumb}</dt>
 <dd> {title} <br />{stats}</dd>
<div class="clear"></div>
</dl>

ここで指定した「popular-post」は下記のように記述しました。

#popular-post a { /*Stinger5のNew Postにあわせます */
    font-weight : bold ;
    text-decoration : none ;
    color : #333333 ; /*お好みのカラーで */
}
#popular-post a:hover {
    color: #b22222 ; /*お好みのカラーで */
}

#popular-post dl {
    min-height: 100px;
    padding : 10px 0 10px 0 ;
    border-bottom : 1px dotted #cccccc ;
}
#popular-post dl:last-child {
border-bottom: none; /*一番最後の点線を消します */
}

#popular-post img {
    margin-right : 10px ;
}

#mybox #popular-post dl dt {
    position : relative ;
}

#popular-post {
    counter-reset : wpp-ranking ;
}
#popular-post dl dt:before { /*ランキング表示の設定です */
    position : absolute ;
    top : -5px ;
    left : -5px ;
    color : #ffffff ;
    counter-increment : wpp-ranking ;
    text-align : center ;
    z-index : 9999 ;
    float : left ;
    line-height : 30px ;
    width : 30px ;
    height : 30px ;
    border-radius : 2px ;
}

#popular-post dl dt.number1:before, /*表示させる順位に応じて増減させてください */
#popular-post dl dt.number2:before,
#popular-post dl dt.number3:before,
#popular-post dl dt.number4:before,
#popular-post dl dt.number5:before {
    content : counter(wpp-ranking, decimal) ;
    background-color : #333333 ;
}

設定は以上です。

カテゴリ別ランキングも設定

全体のランキングだけではなく、カテゴリ別のランキングも設定することができます。
こちらは別途プラグインのインストールが必要です。
PHPをウィジェットに追加するためのプラグインで、私は「PHP Code Widget」をインストールしました。

これをインストールすると、ウィジェットに「PHP code」が追加されます。
PHP code
これをサイドバーにドラッグして設定をします。
PHP code

記述したコードはこちらです。
<?php if (is_single() || is_category()) :?>
<?php
/* 現在のカテゴリ-の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID; /* カテゴリID */
?>
<script type="text/javascript">
$(function(){
    $('#popular-post ul li').each(function(i){
        $(this).attr('class','number' + (i+1));/*←➀*/
    });
});
</script>
<h4 class="menu_underh2">このカテゴリの人気エントリー</h4>
<div id="popular-post">
<?php if (function_exists('wpp_get_mostpopular')) {
$args = '
limit=5&
range=weekly&
order_by=views&
thumbnail_width=100&
thumbnail_height=100&
cat="'.$now_id.'"&
wpp_start=""&
wpp_end=""&
post_start="<ul>"&
post_end="</ul>"&
stats_comments=0&
stats_views=0';
wpp_get_mostpopular($args);
} ?>
<?php endif; ?>
</div>
<div class="clear"></div>

そのままコピーで使えると思います。
その後、こちらもStinger5のNew Postとスタイルを合わせるため、「.wpp-list」を下記のように編集しました。

	.wpp-list li {
		font-size: 16px &nbsp;!important; /*私の場合これを入れないと文字が小さくなってしまいました */
		font-weight: bold;
		min-height: 100px;
		padding: 10px 0 10px 0;
		border-bottom: 1px dotted #cccccc;
	}
	.wpp-list li:last-child {
		border-bottom: none; /*一番最後の点線を消します */
	}
	.wpp-list li a {
		color: #333; /*お好みのカラーで */
		text-decoration: none;
	}
	.wpp-list li a:hover {
		color: #C03;
		text-decoration: none;
	}

 

残る課題

見た目をStinger5に合わせて、全体ランキングとカテゴリ別ランキングが出るようになったのですが、1つ課題が残っています。
カテゴリ別ランキングの方に順位を表示させることに手間取っています。
後で調整してみようと思っています。

課題解決しました!(10/4 23:30)
カテゴリ別の方は「li」で順番に表示されているのですが、そこに対して「popular-post」の設定が効くように新たなスタイルを記述しました。

#popular-post ul li {
	position : relative ;
}
#popular-post ul li:before {
	position : absolute ;
	top : 5px ; /*環境によって修正が必要だと思います */
	left : -5px ; /*環境によって修正が必要だと思います */
	color : #ffffff ;
	counter-increment : wpp-ranking ;
	text-align : center ;
	z-index : 9999 ;
	float : left ;
	line-height : 30px ;
	width : 30px ;
	height : 30px ;
	border-radius : 2px ;
	font-weight:100;
}
#popular-post ul li.number1:before,
#popular-post ul li.number2:before,
#popular-post ul li.number3:before,
#popular-post ul li.number4:before,
#popular-post ul li.number5:before {
	content : counter(wpp-ranking, decimal) ;
	background-color : #333333 ;
}

さらにJSの記述を忘れていたので、ウィジェットの「PHP code」に追記しました。
上に記載されている「PHP code」のソースを修正しておきました。

-パソコン・ウェブ制作
-,

執筆者:


  1. キャリコ より:

    記事の紹介ありがとうございます♪

    カテゴリ別ランキングって「このカテゴリの人気エントリー」の部分ですかね?もしそうだとしたら今回のランキング付けが出来てるので簡単だと思いますよ!

    それにしてもPHPをウィジェットに追加するためのプラグインなんていうのがあったのですね…知りませんでした!これは便利そう☆

    • kon より:

      コメントありがとうございます。

      >カテゴリ別ランキングって「このカテゴリの人気エントリー」の部分ですかね?もしそうだとしたら今回のランキング付けが出来てるので簡単だと思いますよ!
      そうです。
      一度スタイルを設定したんですが、反映されなかったので再度テスト中です。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

関連記事

Hit bit HB-101

ソニーPC事業譲渡で思い出したMSXとの出会い

Hit bit HB-101 VAIOブランド譲渡のニュースで思い出したのだけど、私のパソコンルーツはソニーのMSX、HiTBiTを購入したのが始まりだったということ。 今後何回か書いていきたいと思っ …

FC2ブログからWordPressに移行しました

約4年前から、キャンプレポートに特化したブログをFC2で更新していたのですが、2014年からWordpressに切り替えてリニューアルしました。 キャンプに頻繁に行くことが出来なくなり、更新が出来なか …

transmit

MacでFTP接続するとSocket write errorになってしまう

※12月1日(月)20時時点、ノートンの設定を変更せずとも接続ができています。 FTP接続ができない 今日突然、FTP接続が出来なくなりサーバー会社に確認をしたのですが、特に設定変更はしていないし、先 …

ちょこっとリニューアル

シンプルな構成にしました ほんとうにちょこっとなんですけど、ブログリニューアルしました。 このブログはWordpressで作っていますが、テーマを新しくしてカラフルだったサイトを白ベースのシンプルな色 …

キャプチャ

WordPressのブロック要素全体をクリックできるように修正

※記述に間違いがあったので訂正しました。(2014.10.8) 今日は天気があまり良くないので、朝一で外出した後は家でじっとしていたので、ちょこちょことサイトの修正をしました。 ※作業開始前に必ずバッ …

follow us in feedly
にほんブログ村に参加しています
にほんブログ村 アウトドアブログ ファミリーキャンプへ