ワードプレス(WP)で表示中の記事と同カテゴリの人気記事を表示

pp2現在見ているページと同じカテゴリーの人気記事をサイドバーなどに表示するショートコードです。読者の興味により近い記事を推薦できるので直帰率の減少が見込めます。

人気記事の表示にはWPプラグイン”Popular Posts”を利用するので導入が必須となります。

スポンサーリンク

 

ショートコードの流れ

“Popular Posts”はオプションでカテゴリIDを複数指定できるので、

  • 表示中のページが属しているカテゴリーを全て取得
  • 取得したカテゴリーを指定して”Popular Posts”で表示

という流れになります。

通常”Popular Posts”は管理画面のウィジェットにて表示すると思いますが、実はショートコードからも呼び出せます。

 

ショートコード

以下のコードをテーマフォルダ内の functions.php に追加します。

functions.php
/*
Popular Posts が必要
現在表示中の記事と同カテゴリの人気記事を表示
[get_category_popular_posts range="weekly"]
*/
function sc_get_category_popular_posts($atts) {
    extract(shortcode_atts(array(
        'limit' => '', // 表示数
        'header' => '', // タイトル
        'range' => '', // daily, weekly等
        'thumbnail_width' => '',
        'thumbnail_height' => '',
    ), $atts));

    // 現在のカテゴリを全て取得
    $cats = null;
    if( is_category() ) {
        $cats[] = get_category( get_query_var('cat') );
    } else if ( is_single() ) {
        $cats = get_the_category();
    }

    // カテゴリーID抽出
    if ( $cats ){
        foreach ($cats as $val) {
            $catIDs[] = $val->cat_ID;
        }
        $cats = implode(',',$catIDs);
    }

    // Popular Posts 呼び出し
    $q = array(
        'order_by=views',
        'stats_date=1',
        'stats_date_format=Y/m/d',
        'do_pattern=1',
        'pattern_form=\'{image}<div class="wpp-post-title">{stats}{title}</div>\'',
    );
    if ( $limit ) $q[] = "limit={$limit}";
    if ( $cats ) $q[] = "cat={$cats}";
    if ( $header ) $q[] = "header='{$header}'";
    if ( $range ) $q[] = "range='{$range}'";
    if ( $thumbnail_width ) $q[] = "thumbnail_width='{$thumbnail_width}'";
    if ( $thumbnail_height ) $q[] = "thumbnail_height='{$thumbnail_height}'";
    get_mostpopular( implode(' ',$q) );
}
add_shortcode('get_category_popular_posts', 'sc_get_category_popular_posts');
使用例
[get_category_popular_posts range="weekly" header="人気記事"]

“Popular Posts”が用意しているショートコードget_mostpopularは、 管理画面で変更できるオプションなら全て指定可能です。

このショートコードではget_mostpopularにそのまま渡す引数を先頭で設定しています。好みにあわせて変更してください。

オプションのデフォルト値は wordpress-popular-posts.php 内に記述してあり、Version2.3.2 では以下のようでした。デフォルト値を変更したい場合はショートコード内の配列$qで指定してください。

WordPress Popular Posts Version: 2.3.2 デフォルト値
limit10
rangedaily
order_bycomments
post_typepost,page
title_length0
excerpt_length0
excerpt_format0
thumbnail_width0
thumbnail_height0
thumbnail_selectionwppgenerated
ratingfalse
stats_commentstrue
stats_viewsfalse
stats_authorfalse
stats_datefalse
stats_date_formatF j, Y
wpp_start<ul>
wpp_end</ul>
post_start<li>
post_end</li>
header_start<h2>
header_end</h2>
do_patternfalse
pattern_form{image} {title}: {summary} {stats}

 

このショートコードをウィジェットで利用する

例えばテキストウィジェットの中でショートコードを利用したい場合は、functions.phpに以下の1行を追加すれば可能になります。

add_filter('widget_text', 'do_shortcode');

 

一番上の記事を拡大する

category当ブログのように1番先頭のli要素を拡大したい場合、CSSで指定するのが楽です。先頭のli要素のみを指定するには、CSSセレクタの疑似クラスを使用します。

li:first-child

もし2番めのli要素を指定したい場合は

li:nth-of-type(2)

となります。

アイキャッチをCSSで拡大すると画像がボケてしまうので、当サイトでは全ての画像を拡大時の大きさにあわせています。

 

 

スポンサーリンク