広告 WordPress

【STINGER PLUS+】新着記事と同じデザインの人気記事をサイドバーに設置してみた

「せっかくうちのブログ記事を読みに来てくれたのなら、ぜひ他の記事も読んでほしいなっ♪」

ブログの回遊率を上げるために、記事内で関連記事への誘導を行ったりしていますが、ブログ内の人気記事を表示しておくことも大事だと思います。

WordPressでは「WordPress Popular Posts」というプラグインを使えば、簡単に人気記事を表示させることができます。しかし、そのままだとデザインが今一つな印象…。

そこで、プラグイン「WordPress Popular Posts」の設定を行い、サイドバーに新着記事（NEW ENTRY）と同じデザインの人気記事を設置してみました。

新着記事と人気記事のデザインを揃えることで、統一感が出ますよね。

参考サイト

STINGER風のデザインにするにあたって、こちらの記事を参考にさせていただきました。ありがとうございます。

【WordPress Popular Posts】の設定方法と人気記事を「STINGER PLUS+」と同じスタイル（順位付き）で表示する方法 - Kanamii

設定等を参考にしつつ、別の方法で人気記事を表示させたいと思います。

「WordPress Popular Posts」と「PHP Code Widget」をインストール

「WordPress Popular Posts」は人気記事を表示させるプラグイン、「PHP Code Widget」はウィジェットでPHPコードを扱うためのプラグインです。

今回はこの2つのプラグインを使います。

「WordPress Popular Posts」のインストール手順

まず、WordPress Popular Postsをインストールします。

WordPress管理画面で「プラグイン」⇒「新規追加」をクリック。

検索欄に「WordPress Popular Posts」と入力し、プラグインを検索。

「今すぐインストール」⇒「有効化」を行います。

「PHP Code Widget」のインストール手順

つづいて、PHP Code Widgetのインストール。

「プラグイン」⇒「新規追加」をクリック。

検索欄に「PHP Code Widget」と入力し、プラグインを検索。

「今すぐインストール」⇒「有効化」を行います。

ウィジェットをサイドバーに設置

プラグインの有効化が終わったら、サイドバーに人気記事を設置していきます。

「外観」⇒「ウィジェット」をクリック。

「PHP Code Widget」をインストールしたことで、「PHP コード」というウィジェットが追加されています。

この「PHP コード」ウィジェットを人気記事を設置したい場所にドラッグ＆ドロップで追加します。

人気記事を表示させるコードを記述

設置した「PHP コード」の中に、人気記事を表示させるコードを書いていきます。

<h4 class="menu_underh2">Popular Posts</h4>
<div class="kanren">
    <?php if (function_exists('wpp_get_mostpopular')) {
        $args = array (
            'limit' => '5', // 表示する記事数
            'range' => 'weekly', // 集計期間（daily、weekly、monthly、all）
            'order_by' => 'views', // 並び順（comments、views、avg）
            'post_type' => 'post', // 投稿タイプ（post、page、your-custom-post-type）
            'thumbnail_width' => '100', // サムネイル画像の横幅
            'thumbnail_height' => '100', // サムネイル画像の高さ
            'excerpt_length' => '40', // 抜粋文字数
            'post_html' => '<dl class="clearfix"><dt>{thumb}</dt><dd><h5>{title}</h5><div class="smanone2"><p>{summary}</p></div></dd></dl>',
        );
    wpp_get_mostpopular($args);
    } ?>
</div>

上記のコードを記述してください。

1行目の“Popular Posts”の部分が見出しになるので、お好みで変更してください。

5～12行目は「WordPress Popular Posts」のパラメータを用いて、表示される人気記事の設定をしています。記事数や集計期間など各自で変更してみてください。

※利用できるパラメータは他にもあり、WordPress管理画面で「設定」⇒「WordPress Popular Posts」⇒「Parameters」タブで確認できます。

1、２行目のクラス名と13行目のHTMLは新着記事と同様のものを使用しています。

記述できたら、忘れずに「保存」してください。

これで、サイドバーに新着記事と同じデザインの人気記事が表示されるようになりました。

まとめ

人気記事を表示しておけば、気になる記事があったら、ついでに読んでもらえるかもしれません。

なので、設置しておいて損はないでしょう。

「WordPress Popular Posts」ウィジェットを使って設定を行った方が簡単ですが、当ブログではこの記事の方法で設置しています。

現時点ではブログ全体の人気記事を表示していますが、今後カテゴリや記事数が増えたときにはカテゴリ毎の人気記事が表示されるようにしたいと考えています。

そのとき、PHPの記述が必要になるので、あらかじめ「PHP Code Widget」を使った方法で実施しているわけです。

カテゴリ毎の人気記事表示もいつか記事にできたらと思います…。

-WordPress