ブログを運営していると、表示させたいのが記事の人気ランキングですね。WordPress Popular Post 」ですが、カスタマイズが難しいようですね。WP-PostViews 」なら、表示回数のデータの利用が簡単なので、本プラグインを利用し人気記事を画像付きで表示することにします。
WP-PostViewsプラグインのインストール
管理画面の「プラグイン 」ー「新規追加 」から、検索インストールします。有効化 」してください。
WP-PostViewsプラグインの設定
有効化したら管理画面の「設定」ー「PostViews 」を選択して、基本設定をします。
プラグインで提供されるウィジェットを使ってみる
管理画面の「ウィジェット」で、WP-PostViewsで記事観覧回数の統計を取得して、人気記事や最新記事を表示する「表示数」というウィジェットが追加されています。このウィジェットを利用して、サイドバーに「人気記事」を表示させてみました。
テンプレートで用意されている変数を利用すると、サムネイル付きの表示にすることも可能です。
カスタムフィールドに保存されています表示数データを利用する
プラグインの設定で、テンプレートをカスタマイズしてサムネイル付きの人気記事を表示させることもできるのですが、結構ややこしい気がします。WP-PostViews 」プラグインが保存しているデータを利用して、ウィジェットを作って表示させるほうが自由度が高いので挑戦してみましょう。WP-PostViews 」プラグインは、ビューデータをカスタムフィールドの「「views 」に保存していますので、このデータを利用して人気記事を表示数順に並べて表示させます。
サイドバーに人気記事をサムネイル付きで表示させる例
テーマによってクラスの指定が異なると思いますが、カスタムフィールド「view s」の値の大きい方から5記事表示させています。
1<div class="sidebar-wrapper">
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(); ?>
9 <?php if ( has_post_thumbnail() ) : ?>
11 <a href="'.get_permalink().'" class="link"> <?php the_post_thumbnail(); ?></a>
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>
18<?php endwhile; endif; ?>
上記のCSS指定例です。
1.rank-post {margin-top: 10px; padding: 0 10px ; overflow: hidden;}
2.rank-post .p-post {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999;}
3.rank-post h5{display: block; padding: 0 0 5px ; font-size: 1em; line-height: 1.0em; font-weight: 500; text-align: left;}
4.rank-post .p-post:last-child {margin-bottom: 0; border-bottom: none;}
5.rank-post .p-post a {color: #444; text-decoration: none;}
6.rank-post .p-post a:hover {text-decoration: underline;}
7.rank-post .p-post p {font-size: 0.7em; line-height: 1.2em; color: 666; text-align: justify; text-justify: inter-ideograph;}
8.rank-post .p-post .img-set{float: left; margin-right: 8px; max-width: 120px; border: 1px solid #CCC;display: block; overflow: hidden;}
上記設定の表示は、次の用になります。
ウィジェットにして利用する
折角ですから、ウィジェットにしてテーマに組み込むことにしましょう。ウィジェット化するに当たり、記事に番号を追加してみました。 まだ、不備な点がありますが、変更して利用してみて下さい。
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);
7 function widget( $args, $instance ) {
9 $number = $instance['number'];
10 $title = apply_filters('widget_title', empty($instance['title']) ? ' ' : $instance['title'], $instance, $this->id_base);
12 if ($title){echo $before_title . $title . $after_title;}
13 echo '<div class="rank-post">';
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">';
25 echo '<div class="num2">'. $cnt .'</div>';
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>';
40 function update( $new_instance, $old_instance ) {
41 $instance['title'] = strip_tags($new_instance['title']);
42 $instance['number'] = (int) $new_instance['number'];
44 if (!$instance['title']) {
46 $instance['title'] = strip_tags($old_instance['title']);
47 $this->m_error = '<span style="color:#ff0000;">タイトルが空白です。元の値に戻します。</span>';
51 function form( $instance ) {
52 $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
53 $title = strip_tags($instance['title']);
54 $number = $instance['number'];
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>';
62add_action('widgets_init',create_function('', 'return register_widget("WP_Widget_View");'));
追加したCSSになります。
1.rank-post {margin-top: 10px; padding: 0 10px ; overflow: hidden;}
2.rank-post .p-post {position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #999;}
3.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;}
4.rank-post .p-post:last-child {margin-bottom: 0; border-bottom: none;}
5.rank-post .p-post a {color: #444; text-decoration: none;}
6.rank-post .p-post a:hover {text-decoration: underline;}
7.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;}
8.rank-post .p-post .img-set{float: left; margin-right: 8px; max-width: 120px; border: 1px solid #CCC;display: block; overflow: hidden;}
9.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;}
10.rank-post .eday {float: right; color: #999; font-size: 9px;}
上記は、サンプルサイトに設定した例です。色指定は異なりますが、下図の様に表示されます。
