【WordPress】「リンク先エントリのページビュー数をリンクの横に表示する」にさらに人気順位を追加表示する

公開日: : 最終更新日:2015/12/17 カスタマイズ

ブログ内リンクに、リンク先記事のページビューと人気記事ランキングの順位を表示する機能を実装しました。その対応手順を記事として取り上げます。WordPressを利用されているサイトのデザインを見ていて、内部リンク先の横にページビューを表示されているブログがあり、自分のブログでも採用したいと思いました。そして、Wordpress Popular postsを利用しているので、順位も表示されているとリンク先を見たいという好奇心がさらに増えないかなと。

リンク右横にPageView数を表示する方法は「【WordPress】リンク先エントリのページビュー数をリンクの横に表示する」を参考にしました。ページビュー数を表示するところまでは、こちらのサイトをご覧になってください。

お疲れ様でした。次のようにリンク横にページビュー数が表示されるようになりましたでしょうか。

【WordPress】「リンク先エントリのページビュー数をリンクの横に表示する」にさらに人気順位を追加表示する

では、いよいよ本題の順位を付加表示する処理に移ります。最終表示結果は以下のようになり、

【WordPress】「リンク先エントリのページビュー数をリンクの横に表示する」にさらに人気順位を追加表示する

WordPress Popular postsの順位が表示されます(○○位の部分が追加されました)。

php,javascriptなどのソースを変更する際の注意点
必ずバックアップを取るや本番環境でいきなり試さずローカル環境でデバッグを行ってから本番環境に対応するようにしましょう。
後で後悔しないようにこのような保険をかけておくことが大事です

注意点も読まれましたか?それでは、ブログ内リンクに、リンク先記事のページビューを表示する機能にさらに人気ランキングを表示する機能を実装する方法に移ります。

スポンサーリンク

リンクに人気ランキングを付加する手順

以下の手順で人気ランキング順位を表示します。(WordPress Popular Postsを利用する場合の手順となります。そのほかでも応用は可能かもしれません。)

まずは、WordPressのfunction.phpにWordPress Popular Postsを利用して人気ランキングの情報を保持しておく処理を追加します

次に、リンク右横にページビューが表示されている状態であれば、function.phpに「add_views_to_intra_link_handler」が用意されていると思います。そのadd_views_to_intra_linkの処理に、属性としてページビューを追加したように、エントリへリンクしている「aタグ」の中に、新たに属性として人気ランキング順位を埋め込むフィルタを仕込みます

そして最後に、用意した人気ランキング順位のデータを利用し、JavaScriptで「何(取得した順位の値)位」を追加作成します。

これでページビューの横にその内部リンク先の順位が表示されるようになります。10位まで取得する場合はそれ以下は圏外のような表記も可能です

スポンサーリンク

人気ランキング順位を取得するために指定した数のページビューを取得する関数を準備する

何はともあれ、WordPress Popular Postsプラグインのインストールを済ませてください

WordPress Popular Postsプラグインのインストール方法、利用方法はネット上でたくさん説明がありますので、とりあえず省きます。

WordPress Popular Postsプラグインに用意されている人気記事を集計して出力する関数「wpp_get_mostpopular」を利用したコードが以下になります。


	function get_popular_ranking_string($content)
	{
	    global $popular_ranking_matchs;

	    // とりあえず10位以内
	    // 10記事,すべての期間,view数順,記事のみ,viewを表示する
		$args = '
	      limit=10&
	      range="all"&
	      order_by="views"&
	      post_type="post"&
	      stats_views=1';

	    // 変数に渡すおまじない。
	    ob_start();
	    wpp_get_mostpopular($args);
	    $popular_ranking_string = ob_get_clean();

	    // viewの値だけ取得する
	    preg_match_all("/([0-9]+)\s+view/", $popular_ranking_string, $popular_ranking_matchs);

	    return $content;
	}
	add_filter('the_content', 'get_popular_ranking_string', 99 ); // add_views_to_intra_linkより先にコールしたい
	

処理の内、いくつかの説明です。

ob_start()から$popular_ranking_string = ob_get_clean();

wpp_get_mostpopularは通常使用だとそのまま出力されてしまいますが、ob_start関数で出力のバッファリングをONにし、ob_get_clean関数で現在のバッファの内容を変数に受け取れるようになります。

preg_match_all(…)

第一引数で取得したい箇所の文字列を指定し、preg_matchのall関数を使用しているので()で括ることで、括られた箇所をすべて$popular_ranking_matchsに取得します。今回の場合は、$popular_ranking_matchs[0] はパターン全体にマッチした文字列の配列、$popular_ranking_matchs[1] は括弧で指定したページビューの値が配列で入ります。

add_filter(‘the_content’, ‘get_popular_ranking_string’, 99 );

add_views_to_intra_linkより先にコールしたいので、add_views_to_intra_link(100と設定されているので)より小さい値(99)を設定してコールされる優先順位を早くしています。

・PR


by A8.net

本文中のaタグに人気ランキング順位を埋め込む

引き続き、ブログテンプレートのfunction.phpで、add_views_to_intra_link_handlerが既にあると思いますが、aタグの属性という形で、ページビューと同じように人気ランキング順位を埋め込みます

get_popular_ranking_stringのファンクションで取得した$popular_ranking_matchsを使用して、指定した順位内に該当すれば「<a href=”(エントリURL)” data-wpp-views=”(リンク先のページビュー)” 」の後ろに「data-wpp-rank=”(リンク先の人気ランキング順位)”」を付加します。

以下がadd_views_to_intra_link_handlerの処理を変更したコードになります。


	function add_views_to_intra_link_handler ( $matches ) {
		// 追記
	    global $popular_ranking_matchs;

	    // $postidのviews数を取得
	    $url = $matches[1];
	    $postid = url_to_postid ( $url );
	    $post_views = wpp_get_views ( $postid );

		// ここから追記および変更
	    // 指定した順位内に記事が該当すれば順位も表示してみる
	    $str ='';
        $flag = 0;
        $rank = 0;
        foreach($popular_ranking_matchs[1] as $i)
        {
            $rank++;
            if( $i == $post_views )
            {	// 取得した記事のページビュー数が取得したランキングのページビュー数と一致した。
                $flag = 1;
                break;
            }
        }
        if($flag)
        {	// 指定した順位以内に存在する記事ならランキングデータを付加する。
            $str = ' ' . 'data-wpp-rank="' . $rank . '"';
        }
	    return $matches[0] . ' ' . 'data-wpp-views="' . $post_views . '"'. $str;
	}
	

以下、簡単な説明。

foreach(…)

人気記事のページビューの配列が設定されているpopular_ranking_matchsを使用foreachでループして取得した記事がランキングに入っているかチェックします。該当すれば、data-wpp-viewsという属性に順位を設定し、付け加えます。

JavaScriptで「何(取得した順位の値)位」を付加表示する

JavaScript側でページビューを表示する対応を行ったと思いますので、その箇所を人気ランキングの順位も表示できるように対応します。


	        var pv_a = $("<a />");
	        pv_a.addClass("wpp-views");
	        pv_a.attr("href", $(this).attr("href"));
			// 以下から追加、変更
			var rank = $(this).attr("data-wpp-rank");
	        if( rank === undefined )
	        {    // 未定義の場合はランク圏外
	            pv_a.html(formatted_views + '<span class="views">PV</span> <span class="views">ランク圏外なのです!</span>');
	        }
	        else {
	            pv_a.html(formatted_views + '<span class="views">PV</span> '+rank+ '<span class="views">位</span>');
	        }
	        pv_a.insertAfter($(this));
	

aタグにdata-wpp-rank属性が存在しているかどうか判定し、あれば順位表示を付加、なければundefinedなので表示しないもしくは例のように圏外メッセージを表示させることができます。

SPONSORED LINK
PR

おすすめの商品を紹介しています。

ETS TOEIC 公式実践書 LC+RC 1000 最新傾向 (教材+解説集)【韓国版】

・わからない英単語一覧 調べて更新英単語・熟語の意味を書き出していく。英単語帳代わりにして暗記し

レビューを読む

ハッカーズTOEFLテストスピーキングHackers TOEFL Actual Test Speaking

最終的にはspeakingもwritingもテンプレートを使わない解答ができるといいのかもしれま

レビューを読む

BUFFALO 高速モデル NAS(ネットワークHDD) 【iPhone5対応(WebAccess i)】 2TB LS-V2.0TLJ

父親が視聴している液晶ハイビジョンテレビL32-XP05のハードディスクがそろそろ悲鳴をあげているた

レビューを読む



当ブログの人気エントリ一覧。おすすめです

 
PAGE TOP ↑