はじめに

[ 追記 ]
この記事の内容は、プラグイン「WordPress Popular Posts」のバージョン2.3.2時点のものです。
バージョン2.3.3から変更点があるため、この記事の内容は古い情報です。

2.3.3にバージョンアップしてからの変更点をメモしました。

投稿記事の関連記事が表示されるようにプラグインを導入しましたが、それに引き続き人気記事を表示させることに成功しました。
PHPが全く素人の私でも見よう見まねでなんとかなるものです。

関連記事の表示についてはこちらにて紹介しております。

今回導入したプラグインはこちら。

サムネイル付きで人気記事を表示させるための3つのステップ

WordPress Popular Postsをインストールして有効化した後ですが、投稿記事の下にサムネイル付きで人気記事を表示させるには大きく3つのステップがありました。

  1. プラグインWordPress Popular Postsの脆弱性を回避する
  2. 引数を設定し、プラグインを呼び出す
  3. CSSで見た目を修正する

1. プラグインWordPress Popular Postsの脆弱性を回避する

指摘されている脆弱性

WordPress Popular Postsに使われているtimthumb.phpというスクリプトの脆弱性が指摘されています。
調べてみると、timthumb.phpを最新にすればいいという情報がある一方で、最新でも脆弱性が残っているためtimthumb.phpを削除した方がいいとの情報もあります。

脆弱性の指摘で参考になった記事はこちら。

最終的にはtimthumb.phpを削除することにしました。

どこを修正すればいいのか

先ほどの2つの記事でもプラグインのファイルであるwordpress-popular-posts.phpを修正する方法が紹介されていますが、一つ上手くいかないことがありました。それは、サムネイルの縦横の幅が崩れた状態で表示されてしまうというものでした。

そのために調べた結果、ちゃんとサムネイル画像が表示されるように修正する方法も含めて紹介している記事がありました。

最終的には2番目、3番目の記事のやり方で脆弱性回避とアイキャッチ画像の表示の両方を解決しました。1078行目、1089行目、1192行目の3ヶ所を修正です。

ここまでが脆弱性の回避とサムネイルの表示の修正です。
この修正はおそらくプラグインがアップデートされるたびに直す必要がありそうです。

2. 引数を設定し、プラグインを呼び出す

次にプラグインを使うための引数を設定し、呼び出します。

プラグインの引数の設定の仕方や呼び出し方はこちらを参考にしました。

2番目の記事にあるように、現在表示されている記事のカテゴリーの人気記事とそれ以外のカテゴリーの人気記事の2つを表示させることにしました。
また、人気記事を表示させるテンプレートを別ファイルにして、single.phpでそのテンプレートを呼び出すようにしました。

人気記事を表示させるテンプレートを作る

先ほどの2つの記事を参考にし、テンプレートのファイルを作成します。私の場合は、popular_posts_template.phpというファイルを作り、子テーマのフォルダに入れました。

popular_posts_template.php

<?php if (function_exists('wpp_get_mostpopular')): ?>
<?php
/* 現在のカテゴリ-の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
$now_id = $cat_now->cat_ID; /* カテゴリID */
$now_name = $cat_now->cat_name; /* カテゴリ名 */
$now_slug = $cat_now->slug; /*スラッグ名*/
?>

<h3><a href="<?php bloginfo('url'); ?>/<?php echo $now_slug ?>/" title="'<?php echo $now_name ?>'カテゴリを見る"><?php echo $now_name ?></a>の中で人気のある記事です</h3>
<?php
$args = array(
'order_by' => 'views',
'limit' => 5,
'range' => 'weekly',
'post_type' => 'post',
'cat' => "'.$now_id.'",
'stats_comments' => 0,
'thumbnail_width' => 150,
'thumbnail_height' => 150,
'wpp_start' => "<div class='popular-post'>",
'wpp_end' => "</div>",
'post_start' => "<div class='popular-entry'>",
'post_end' => "</div>"
);
?>
<?php wpp_get_mostpopular( $args ); ?>

<h3>他のカテゴリーの中で人気のある記事です</h3>
<?php
$args = array(
'order_by' => 'views',
'limit' => 5,
'range' => 'weekly',
'post_type' => 'post',
'cat' => "-'.$now_id.'",
'stats_comments' => 0,
'thumbnail_width' => 150,
'thumbnail_height' => 150,
'wpp_start' => "<div class='popular-post'>",
'wpp_end' => "</div>",
'post_start' => "<div class='popular-entry'>",
'post_end' => "</div>"
);
?>
<?php wpp_get_mostpopular( $args ); ?>
<?php endif; ?>

「1. プラグインWordPress Popular Postsの脆弱性を回避する」のところで、標準のサムネイル画像が表示されるように修正しましたので、thumbnail_widthとthumbnail_heightは150としています。
サムネイル画像がどのくらいの大きさに設定されているかは、管理画面から「設定>メディア>サムネイルのサイズ」で確認できます。

人気記事を表示させるテンプレートを呼び出す

今度は作成したpopular_posts_template.phpを記事の中で呼び出すことになります。
single.phpファイルの中で呼び出したい場所に次の1行を追加します。

single.php

<?php get_template_part('popular_posts_template'); ?>

これで投稿記事の中に人気記事が呼び出されるようになります。

ここまでが引数の設定とプラグインの呼び出しです。

3. CSSで見た目を修正する

最後にCSSで見た目を修正します。子テーマのフォルダにあるstyle.cssに以下の内容を追記しました。
CSSは関連記事の表示で参考にさせて頂いたものを流用します。

style.css

.popular-post {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.popular-entry {
    vertical-align: top;
    float: left;
    width: 114px;
    font-size: 90%;
    min-height: 215px;
    margin: 0;
    padding-right: 20px;
}
.popular-entry img {
    padding: 2px;
    border: #ccc 1px solid;
    width: 110px;
}

サムネイル画像の大きさは150×150ですが、ここでは110×110で表示させています。
ここまでがCSSファイルの修正です。

おわりに

以上でWordPress Popular Postsの脆弱性が回避された状態で、現在表示されている記事のカテゴリーの人気記事と他のカテゴリーの人気記事が表示されます。既にこの記事の下にも表示されているようにうまくいきました。これから導入してみようと思っている方の参考になればと思います。

何分素人なので、もっとこうした方が良いんじゃない?などあるかもしれませんが、今のところこれが精一杯です(汗)。ドット(.)が文字列連結のことだと初めて知ったのは言うまでもありません(笑)。

PHPの素人でも、いろんな記事を参考にしながら少しずつカスタマイズに慣れていくとここまで出来るようになります。今回のプラグインの導入もいろんなブログ記事を参考にさせて頂きました。ありがとうございました。