WP-PostViewsプラグインで人気記事を画像付きで表示する

ブログを運営していると、表示させたいのが記事の人気ランキングですね。
WordPressですから、もちろん人気記事を表示させるプラグインはあります。もっともポピュラーなプラグインは「WordPress Popular Post」ですが、カスタマイズが難しいようですね。
しかし、記事の表示数をカスタムフィールドに格納してくれるプラグイン「WP-PostViews」なら、表示回数のデータの利用が簡単なので、本プラグインを利用し人気記事を画像付きで表示することにします。

WP-PostViewsプラグインのインストール

管理画面の「プラグイン」ー「新規追加」から、検索インストールします。

インストールが済んだら、そのまま「有効化」してください。

WP-PostViewsプラグインの設定

有効化したら管理画面の「設定」ー「PostViews」を選択して、基本設定をします。

プラグインで提供されるウィジェットを使ってみる

管理画面の「ウィジェット」で、WP-PostViewsで記事観覧回数の統計を取得して、人気記事や最新記事を表示する「表示数」というウィジェットが追加されています。このウィジェットを利用して、サイドバーに「人気記事」を表示させてみました。

テンプレートで用意されている変数を利用すると、サムネイル付きの表示にすることも可能です。

カスタムフィールドに保存されています表示数データを利用する

プラグインの設定で、テンプレートをカスタマイズしてサムネイル付きの人気記事を表示させることもできるのですが、結構ややこしい気がします。
また、体裁は別途CSSを用意する必要があります。
それなら、「WP-PostViews」プラグインが保存しているデータを利用して、ウィジェットを作って表示させるほうが自由度が高いので挑戦してみましょう。
「WP-PostViews」プラグインは、ビューデータをカスタムフィールドの「「views」に保存していますので、このデータを利用して人気記事を表示数順に並べて表示させます。

サイドバーに人気記事をサムネイル付きで表示させる例

テーマによってクラスの指定が異なると思いますが、カスタムフィールド「views」の値の大きい方から5記事表示させています。

1<div class="sidebar-wrapper">
2<h4>人気記事</h4>            
3<div class="rank-post">        
4<?php $arg = array('meta_key' =>'views','orderby' => 'meta_value_num', 'order' => 'DESC','posts_per_page' => 5 ); 
5        $the_query = new WP_Query( $arg );
6        if ( $the_query->have_posts() ) :
7        while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
8<div class="p-post">
9  <?php if ( has_post_thumbnail() ) : ?>
10    <div class="img-set">
11      <a href="'.get_permalink().'" class="link">    <?php the_post_thumbnail(); ?></a>
12    </div>
13  <?php endif; ?>
14  <h5><a href="'.get_permalink().'"><?php the_title(); ?></a></h5>
15  <p><?php echo wp_html_excerpt(get_the_excerpt(), 50, '･･･'); ?></p>
16  <div class="clr"></div>
17</div>
18<?php endwhile; endif; ?>
19</div>    
20</div>

上記のCSS指定例です。

rank-post {margin-top: 10px; padding: 0 10px ; overflow: hidden;}
rank-post .p-post {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999;}
rank-post  h5{display: block; padding: 0 0 5px ; font-size: 1em; line-height: 1.0em; font-weight: 500; text-align: left;}
rank-post .p-post:last-child {margin-bottom: 0; border-bottom: none;}
rank-post .p-post a {color: #444; text-decoration: none;}
rank-post .p-post a:hover {text-decoration: underline;}
rank-post .p-post p {font-size: 0.7em; line-height: 1.2em; color: 666; text-align: justify; text-justify: inter-ideograph;}
rank-post .p-post .img-set{float: left; margin-right: 8px; max-width: 120px; border: 1px solid #CCC;display: block; overflow: hidden;}

上記設定の表示は、次の用になります。

ウィジェットにして利用する

折角ですから、ウィジェットにしてテーマに組み込むことにしましょう。
ウィジェット化するに当たり、記事に番号を追加してみました。まだ、不備な点がありますが、変更して利用してみて下さい。

1/* 人気の記事 */
2class WP_Widget_View extends WP_Widget {
3    function __construct() {
4        $widget_ops = array('classname' => 'Widget_View', 'description' => 'サイドバーにページビュー順に表示できます。表示にはWP-PostViewsプラグインが必要です。(3カラムフッターでも可)');
5        parent::__construct('View', 'サイドバー用：人気記事', $widget_ops);
6    }
7    function widget( $args, $instance ) {
8    extract($args);
9        $number = $instance['number'];
10        $title = apply_filters('widget_title', empty($instance['title']) ? '&nbsp;' : $instance['title'], $instance, $this->id_base);
11        echo $before_widget;
12        if ($title){echo $before_title . $title . $after_title;}
13        echo '<div class="rank-post">';
14        $cnt = 1;
15        $arg = array('meta_key' =>'views','orderby' => 'meta_value_num', 'order' => 'DESC','posts_per_page' => $number ); 
16        $the_query = new WP_Query( $arg );
17        if ( $the_query->have_posts() ) :
18        while ( $the_query->have_posts() ) : $the_query->the_post();
19        if( get_post_meta(get_the_id(), 'views', true)){
20        echo '<div class="p-post">';
21        if ( has_post_thumbnail() ) {
22            echo '<div class="img-set">';
23            echo '<a href="'.get_permalink().'" class="link">';
24            the_post_thumbnail();
25            echo '<div class="num2">'. $cnt .'</div>';   
26            echo '</a></div>';
27        }
28        echo '<h5><a href="'.get_permalink().'">'.the_title('', '', false).'</a></h5>';  
29        echo '<p>' . wp_html_excerpt(get_the_excerpt(), 50, '･･･'). '</p>';
30        echo '<div class="clr"></div>';
31        echo '</div>';
32        $cnt++;
33        }
34        endwhile;
35        endif;
36        echo '</div>';
37    echo $after_widget;
38    wp_reset_postdata();
39    }
40    function update( $new_instance, $old_instance ) {
41        $instance['title'] = strip_tags($new_instance['title']);
42        $instance['number'] = (int) $new_instance['number'];
43        // エラーチェック
44        if (!$instance['title']) {
45            // タイトルが空白の場合、元の値に戻してエラー表示
46            $instance['title'] = strip_tags($old_instance['title']);
47            $this->m_error = '<span style="color:#ff0000;">タイトルが空白です。元の値に戻します。</span>';
48        }
49        return $instance;
50    }
51    function form( $instance ) {
52        $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
53        $title = strip_tags($instance['title']);    // タイトル
54        $number = $instance['number'];                // 表示する投稿数
55        // フォームの出力
56        echo '<p><label for="'. $this->get_field_id('title') .'">タイトル:</label><br />';
57        echo '<input type="text" name="'. $this->get_field_name('title') .'" id="'. $this->get_field_id('title') .'" value="'.$title.'" style="width:100%;" /></p>';
58        echo '<p><label for="'. $this->get_field_id('number') .'">並べて表示する投稿数：</label>';
59        echo '<input type="text" name="'. $this->get_field_name('number') .'" id="'. $this->get_field_id('number') .'" value="'.$number.'" style="width:60px;" /></p>';
60    }    
61}
62add_action('widgets_init',create_function('', 'return register_widget("WP_Widget_View");'));

追加したCSSになります。

rank-post {margin-top: 10px; padding: 0 10px ; overflow: hidden;}
rank-post .p-post {position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999;}
rank-post  h5{display: block; padding: 0 0 5px ; font-size: 1em; line-height: 1.0em; font-weight: 500; text-align: left; text-align: justify; text-justify: inter-ideograph;}
rank-post .p-post:last-child {margin-bottom: 0; border-bottom: none;}
rank-post .p-post a {color: #444; text-decoration: none;}
rank-post .p-post a:hover {text-decoration: underline;}
rank-post .p-post p {font-size: 0.7em!important; line-height: 1.2em!important; color: 666; text-align: justify!important; text-justify: inter-ideograph!important;}
rank-post .p-post .img-set{float: left; margin-right: 8px; max-width: 120px; border: 1px solid #CCC;display: block; overflow: hidden;}
rank-post .p-post .num2 {position: absolute; top: 5px; left: 5px; font-size: 12px; line-height: 12px; font-weight: bold; color: #FFF; padding: 4px 6px; background-color: #369;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
rank-post .eday {float: right; color: #999; font-size: 9px;}

上記は、サンプルサイトに設定した例です。色指定は異なりますが、下図の様に表示されます。

WP-PostViewsプラグインで人気記事を画像付きで表示する

WP-PostViewsプラグインのインストール

WP-PostViewsプラグインの設定

プラグインで提供されるウィジェットを使ってみる

カスタムフィールドに保存されています表示数データを利用する

サイドバーに人気記事をサムネイル付きで表示させる例

ウィジェットにして利用する

コメントはお気軽にどうぞコメントをキャンセル

カテゴリー

人気記事

ウィジェットを投稿や固定ページで利用できるプラグ･･･

サイト表示の高速化に欠かせない画像圧縮プラグイン･･･

wp_queryでwp-pagenaviが正常に･･･

WP-PostViewsプラグインで人気記事を画･･･

テーブルを簡単に作成できるWordPressプラ･･･

WP-PostViewsプラグインで人気記事を画像付きで表示する

WP-PostViewsプラグインのインストール

WP-PostViewsプラグインの設定

プラグインで提供されるウィジェットを使ってみる

カスタムフィールドに保存されています表示数データを利用する

サイドバーに人気記事をサムネイル付きで表示させる例

ウィジェットにして利用する

関連コンテンツ

コメントはお気軽にどうぞ コメントをキャンセル

カテゴリー

人気記事

コメントはお気軽にどうぞコメントをキャンセル