1. TOP
  2. wordpressテーマカスタマイズ
  3. プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加

プラグインなしで画像付きの人気記事をWordPressのウィジェットに追加

WordPrssにはデフォルトのウィジェットがいくつか用意されていますが、『人気記事』を出力するためのウィジェットは用意されていません。ユーザーにより多くの記事を読んでもらうためにも、『人気記事』をウィジェットに追加して簡単に出力できるようにしておきましょう。

人気記事の出力方法さえわかれば、ウィジェットで出力するだけでなく、WordPressの各テンプレートでも出力できるようになりますよ!

今回は、プラグインを使わずにウィジェットに『人気記事』を出力する方法についてご紹介します。

※人気記事を出力するためには、カスタムフィールドに記事の閲覧数をカウントするための値を保存しておく必要があります。投稿数をカスタムフィールドに追加するプラグインを有効化するか、link:『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』を参照し、カスタムフィールドに記事の閲覧数をカウントするための設定を予め行なってください

ループを使って人気記事一覧を出力する要素を作成する

ウィジェットを作成する前準備として、まずは、人気記事を出力するための要素を作成します。今から作成する要素は、後ほどfunctions.phpに入れ込むので一時的なファイルを作成し記述してください。

追加するソースコードは、下記の通りです。

一時ファイルに記述

<aside class="sidekiji">
<ul>
<?php get_the_ID();//記事のPV情報を取得する
$args = array('meta_key'=> 'post_views_count',//投稿数をカウントするカスタムフィールド名
'orderby' => 'meta_value_num',
'order' => 'DESC',
'posts_per_page' => $number
);
$my_query = new WP_Query( $args );?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>
<li>
<a href="<?php the_permalink(); ?>">
<!--順位-->
<span class="rank-count r-count<?php echo $loopcounter; ?>">
<?php echo $loopcounter; ?>
</span>
<!--サムネイル画像の追加-->
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>
<div class="sidekiji-text">
<?php the_title(); ?>
<br>
<!--カテゴリ-->
<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?></span>
</div>
</a>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
</aside>

上記のソースコードで、人気記事の一覧を出力することができます。人気記事は、サブループの『WP_Query』で出力します。また、ループの条件を指定する前に『get_the_ID();』で記事の情報を取得しましょう。一つ一つの要素については下記の通りです。

人気記事を出力するために必要なサブループの配列

meta_key

カスタムフィールドの参照先を指定することができます。今回は、記事のView数を参照したいので『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』でカスタムフィールドに設定した『post_views_count』を参照するようにしています。

プラグインなどでカウントしている場合は、設定されているカスタムフィールド名を入力してください。

orderby

取得した記事を並びかえる際に参照する値を指定します。今回は、カスタムフィールドの値『数字』で並び変えるので『meta_value_num』を指定してします。

order

並び替える条件を指定します。今回は、人気記事をランキング形式で出力するので降順に並び替える『DESC』を値として入力してください。なお、昇順で並び替えたい場合は『ASC』を入力してください。

posts_per_page

出力したい記事の数を指定します。通常のサブループでは、数字で指定しますがウィジェットを追加する際に指定した値を入力したいので『$number』と記述しています。この変数『$number』についてはウィジェット化する際に設定します。

上記の4つの条件を指定して人気記事を呼び出します。指定した条件を繋げると『post_views_countの値で記事を参照しカスタムフィールドの値が多い順にウィジェットで指定した記事数出力する』となります。

上記のサブループの値を使用することで、ウィジェットに限らずWordPressテーマ内の好きな場所に人気記事を出力することができます。
※サブループを使用する際は必ず最後に『<?php wp_reset_postdata(); ?>』の記述を行いループをリセットしてください。

ループ内の要素を追加する

ループの記述が終わったら、『ランキングの順番』『サムネイル画像』『タイトル』『所属カテゴリ』を出力するコードをループ内に記述しましょう。

ランキングの順位

<span class="rank-count r-count<?php echo $loopcounter; ?>">
<?php echo $loopcounter; ?>
</span>

ランキングの順位は、ループの回数をカウントして順番として出力します。

class名を『class=”r-count<?php echo $loopcounter; ?>”』としておくことで、ランキングの順位ごとに『r-count1』『r-count2』という感じでclass名が変更され、順位ごとにカラーを変更することができるようになります。ランキングの順位ごとにカラーを設定したい場合は、記述しておきましょう。

※上記のソースコードだけでは、ランキングは表示されません。必ずサブループの記述の中に『$loopcounter++;』という変数を追加してください。

<?php while ( $my_query->have_posts() ) : $my_query->the_post(); $loopcounter++; ?>

サムネイル画像

サムネイル画像は、『<?php the_post_thumbnail(‘thumbnail’); ?>』の部分で出力していますが、サムネイルを設定していない場合は出力されません。サムネイルの設定がない場合を考えて、条件分岐を追加しておいても良いでしょう。

<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php endif; ?>
<!--上記のソースを下記のソースに置き換える-->
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail('medium'); ?>
<?php else: ?>
<img src="サムネイル画像がない時に表示したい画像へのパス(URL)" alt="no-img"/>
<?php endif; ?>

タイトル

<?php the_title(); ?>

所属カテゴリ

<span class="cat-data">
<?php if( has_category() ): ?>
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
<?php endif; ?></span>

カテゴリは『if( has_category()』で条件分岐して、カテゴリの設定がある場合に『 $postcat=get_the_category(); echo $postcat[0]->name;』でカテゴリの名前を呼び出すようにしましょう。

人気記事の一覧を出力するための要素は以上です。好みに合わせて要素を省いたり、追加したりして調整してください。続いて、上記の要素をウィジェットにするための設定をしていきましょう。

ウィジェットを追加するための関数を作成する

人気記事を出力するための要素を作成したら、ウィジェットとして呼び出すための関数をfunctions.phpに定義していきます。複数の関数を使用するため、記述ミスに注意しましょう。
functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。

functions.phpに記述

/* 人気記事一覧ウィジェット */
class Popular_Posts extends WP_Widget {
/*コンストラクタ*/
function __construct() {
parent::__construct(
'popular_posts',
'人気記事',
array( 'description' => 'PV数の多い順で記事を表示' )
);
}
/*ウィジェット追加画面でのカスタマイズ欄の追加*/
function form($instance) {
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('タイトル:'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
value="<?php echo esc_attr( $instance['title'] ); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('記事表示件数:'); ?></label>
<input type="text" id="<?php echo $this->get_field_id('limit'); ?>"
name="<?php echo $this->get_field_name('number'); ?>"
value="<?php echo esc_attr( $instance['number'] ); ?>" size="3">
</p>
<?php
}
/*カスタマイズ欄の入力内容が変更された場合の処理*/
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['number'] = is_numeric($new_instance['number']) ? $new_instance['number'] : 5;
return $instance;
}
/*ウィジェットのに出力される要素の設定*/
function widget($args, $instance) {
extract($args);
echo $before_widget;
if(!empty($instance['title'])) {
$title = apply_filters('widget_title', $instance['title'] );
}
if ($title) {
echo $before_title . $title . $after_title;
} else {
echo '<h4>人気記事</h4>';
}
$number = !empty($instance['number']) ? $instance['number'] : get_option('number');
?>
<!--ここにウィジェットとして呼び出したい要素を記述-->
<?php echo $after_widget;
}
}
register_widget('Popular_Posts');

上記の記述をfunctions.phpに追加することで、ウィジェット項目に『人気記事』が追加されます。

コード内の『<!–ここにウィジェットとして呼び出したい要素を記述–>』の部分に、先程作成した人気記事に出力するための要素をコピペして挿入してください。

独自ウィジェットを作成する際の関数は、下記の通りです。

全体の構成

class ウィジェットクラス名 extends WP_Widget {
}
/*ウィジェットを実行するための処理*/
register_widget('ウィジェットクラス名');

ウィジェットをWordPressに追加するための関数です。上記の『class ウィジェットクラス名 extends WP_Widget』の中にウィジェットを構成する全ての内容を記述します。

function __construct()

function __construct() {
parent::__construct(
'ウィジェットのID',
'ウィジェットの名前',
array( 'description' => 'ウィジェットの説明' )
);
}

自作ウィジェットの名前やidなどを定義します。IDは表示に直接影響を与えるものでなく内部的な振り分けを指定するものです。

ウィジェットの名前と説明はウィジェット管理画面に反映されます。

function form

ウィジェット管理画面上のカスタムフォームを作成します。今回作成する人気記事ウィジェットでは、タイトル(title)と記事の表示件数(number)を任意で指定できるようにしています。

function update

管理画面上の入力フォームに入力した値を保存する処理を行います。また、[number]の欄に値が入力されていない場合の処理もここで指定しています。

function widget

ウィジェットに表示させたい要素を設定します。『$before_widget』に記述した値が、ウィジェットのタイトルとして表示されます。

管理画面でタイトルが入力されてない場合のデフォルトタイトルも『else {~』で設定しておきましょう。今回は、『人気記事』がタイトルで出力されるようにしています。

functions.phpの関数がきちんと反映されていれば、管理画面上のウィジェットの項目に『人気記事』というウィジェットが新しく追加されます。設定が完了したら、ページに表示されるようにサイドバーに追加してください。

追加すると『人気記事』がサイドバーに出力されますので、要素が表示されているかを確認しましょう。

CSSで人気記事一覧のデザインを整える

人気記事の一覧が、WordPressウィジェットとして出力されているのを確認したら、CSSでデザインを整えていきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。

style.cssに記述

.sidekiji ul {
padding: 0;
list-style: none;
}
.sidekiji li {
position: relative;
margin-top: 10px;
padding: 0 5px 10px;
border-bottom: dotted 1px #ddd;
}
.sidekiji a {
display: inline-block;
text-decoration: none;
color: #333;
}
.sidekiji a:hover {
background-color: #eee;
}
.sidekiji a:after {
display: block;
clear: both;
content: '';
}
.rank-count {
position: absolute;
top: 0;
left: 5px;
padding: 1px 10px;
color: #fff;
background: rgba(66, 66, 66, .85);
}
.r-count1 {
background: rgba(189, 161, 82, .9);
}
.r-count2 {
background: rgba(152, 153, 173, .9);
}
.r-count3 {
background: rgba(156, 85, 34, .9);
}
.sidekiji img {
float: left;
width: 70px;
height: 70px;
}
.sidekiji-text {
font-size: .9em;
margin-left: 80px;
}

上記のCSSをそのまま記述すると上記の画像のように表示されます。以上で、『人気記事』のウィジェットの作成は完了です。タイトルや記事数を自由に指定して、人気記事を出力しましょう。