WordPress Popular Posts を週間・月間・全期間 PHPで吐き出す方法

PHP

前回WordPress Popular Posts を使って各記事にページビューを表示!という記事を書きました。

その延長で、サイドバーに「週間」「月間」「全期間」のアクセスランキングを追加しました。

もともと管理画面→ウィジェットにPopular Postsのウィジェットはありますが、各期間をサイドバーに表示するととても長くなってしまいます。

これでは見づらいサイトになってしまいますのでjQueryのタブを使ってスマートに作ろうと思いました。

このサイト上でもサイドバーにランキングを作成しましたので、参考に触って頂ければと思います。 スクリーンショット 2016-01-08 18.26.22
制作途中、中々Popular PostsのPHPでの吐き出し方がネットにあまりなかったので、記したいと思います。

タブ用のファイルを用意

タブはこのサイトを参考に作成しました
jQueryを使ったタブメニューの実装サンプルまとめ

サイドバーでPHPを使用できるようにするPHP Code Widgetをインストール

Popular PostsをPHPで書く必要がありますので、サイドバーでPHPを使用できるようにするPHP Code Widgetをインストールします。
PHP Code Widget

PHP Code Widgetに下記を記入


       <div id="ui-tab">
            <ul>
                <li><a href="#fragment2-1"><span>週間</span></a></li>
                <li><a href="#fragment2-2"><span>月間</span></a></li>
                <li><a href="#fragment2-3"><span>全期間</span></a></li>
            </ul>
            
            <div id="fragment2-1" class="tab_content">
            	<h2>週間ランキング</h2>
                <ul class="index_category">
					<?php
					 $wpp = array (
					 'limit' => '5', 
					 'range' => 'weekly',
					 'order_by' => 'views',
					 'post_type' => 'post',
					 'stats_comments' => '0', 
					 'stats_views' => '0', 
					 'title_length' => '20', 
					 'thumbnail_width' => '70',
					 'thumbnail_height' => '70',
					 'stats_category' => '0', 
					 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
					 'wpp_end=' => '</ul></div>',
					 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}{views} 閲覧</span><div class="clear"> </div></li>',
					); ?>
					<?php wpp_get_mostpopular($wpp); ?>
				</ul>
            </div>
            
            <div id="fragment2-2" class="tab_content">
            <h2>月間ランキング</h2>
                <ul class="index_category">
					<?php
					 $wpp = array (
					 'limit' => '5', 
					 'range' => 'all',
					 'order_by' => 'monthly',
					 'post_type' => 'post',
					 'stats_comments' => '0', 
					 'stats_views' => '0', 
					 'title_length' => '20', 
					 'thumbnail_width' => '70',
					 'thumbnail_height' => '70',
					 'stats_category' => '0', 
					 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
					 'wpp_end=' => '</ul></div>',
					 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}{views} 閲覧</span><div class="clear"> </div></li>',
					); ?>
					<?php wpp_get_mostpopular($wpp); ?>
				</ul>
            </div>
            
            <div id="fragment2-3" class="tab_content">
            <h2>全期間ランキング</h2>
                <ul class="index_category">
					<?php
					 $wpp = array (
					 'limit' => '5', 
					 'range' => 'all',
					 'order_by' => 'views',
					 'post_type' => 'post',
					 'stats_comments' => '0', 
					 'stats_views' => '0', 
					 'title_length' => '20', 
					 'thumbnail_width' => '70',
					 'thumbnail_height' => '70',
					 'stats_category' => '0', 
					 'wpp_start' => '<div id="popular-post"><ul class="wpp-list">',
					 'wpp_end=' => '</ul></div>',
					 'post_html' => '<li>{thumb} {title} <span class="post-stats">{stats}{views} 閲覧 </span><div class="clear"> </div></li>',
					); ?>
					<?php wpp_get_mostpopular($wpp); ?>
				</ul>
            </div>
        
        </div>
        

以上で実装完了

これで終わりです。
PHP内のrangeで習得する期間を設定します。
細かい設定は以下の参考サイトを御覧ください。

次回はPHPを使わずにランキングの順位の数字をCSSで表示する方法を紹介します。

nissin_note___Study_is_Not_Study

参考にしたサイト

WordPress Popular Posts の人気記事一覧とは別に今見てるカテゴリの人気記事一覧も設置する方法

コメント

タイトルとURLをコピーしました