新着・人気記事の切替表示ができるプラグインPopular Widget

サイドバーによく読まれている記事（人気記事）を表示させるプラグインといったら
「WordPress Popular Posts」が有名です。

というか、「Popular Widget」で検索してもまったくヒットしない！

でも「Popular Widget」は人気記事に加えて新着記事やタグなどの表示が
ページ遷移なしで切り替えできる機能がついてます。

というわけで私はこちらのプラグインを導入してみました！

なんですが、ちょこちょこ問題点も見られるので
この記事をざっと読んでみてそれでも使おうと思ったら導入してみてください。(笑)

初期設定のままだとデザインが・・・

このプラグイン、テーマのCSSが関係してなのか
インストールした時の状態だとこんな風にデザインが崩れてます～(´ｰωｰ`)

• 「Twenty Fourteen」の場合



• 「TCD010」の場合

なのでCSSをそれぞれ調整することになります。

一応参考までに私が設定したCSSもあとで載せておこうと思いますが
サイトにあったデザインが1番なのでご自身で変更できる方におすすめします。

プラグインのインストール

「Popular Widget」は管理画面から検索できます。

インストール後、有効化してください。

専用の設定画面はなく、ウィジェットにそのまんま反映されるので
「外観」→「ウィジェット」から直接設定します。

サイドバー（表示させたいウィジェットエリア）にドラッグ＆ドロップしてくださいね。

Popular Widgetの設定

大まかな表示説明

項目の意味はざっとこんな感じです。

「Title」は、ウィジェットのタイトルなので「おすすめ記事」とか
空白のままでもいいと思います。

「Custom Field」は、そのまんまでOKです。

「In the last ○ days」は、人気記事を表示する場合の
統計日数を入力してください。（バラつかせたい場合は1日とか）

では、後半の項目をそれぞれ解説していきますね。

Users　（ユーザーの除外設定）

WordPressを複数名で管理している場合以外はスルーしてください。

Display　（表示設定）

ところどころバグというか、日本語に対応していないような状況が見られました。
日本語対応プラグイン「WP Multibyte Patch」当てても関係ないみたいです。

サムネイルに関しては全部確認してみた結果です！

Calculate　（PV or UUの設定）

Taxonomy　（カテゴリー or タグの表示選択）

Post Types　（投稿 or 固定ページの表示選択）

表示させるページの種類を
「投稿ページ」「固定ページ」「その両方」から選択します。

「attachment」はほとんど使うことが無いと思うのでスルーでOKです。

Arrange / Disable / Rename　（表示する項目の選択）

サイドバーに表示させる記事の種類を選択します。
ここで選択したものがタブで表示されます。

チェックボックスにチェックを入れると非表示になります。
それぞれのタイトルをクリックすると表示名を変更できます。

最新記事、人気記事、必要に応じてタグも・・・というのが一般的ですかね！

ここまでで一応設定は完了です。
あとはデザインをどうにかしてあげればおっけー(￣▽￣;)

デザイン設定の参考

今回はプラグインのCSSを直接編集しました。

「プラグイン」→「インストール済みプラグイン」→Popular Widgetの「編集」をクリック。
「popular-widget/_css/pop-widget.css」を開きます。

念のため編集前と編集後の内容をバックアップしておいて
プラグインがアップデートされた時に備えておきましょう！

初期状態ですと元のテーマのCSSの指定が響きます。
私が使っているテーマはStinger3（しかもカスタマイズ済み）なので
あまり参考にならないかもですが、一応貼っておきます。

どこを変更したかもはや覚えていないので全部載せます。
すんごく長いです！

/**
 * Image Store - Front-end
 *
 * @file pop-widget.css
 * @package Popular Widget
 * @author Hafid Trujillo
 * @copyright 20010-2013
 * @filesource  wp-content/plugins/image-store/_css/pop-widget.css
 * @since 0.5.0
 */

ul.pop-widget-tabs{list-style:none;clear:both;width:100%;border:none;margin:0!important;padding:0!important;}
ul.pop-widget-tabs li{padding:0;float:left;display:inline;line-height:30px;font-weight:bold;list-style:none;cursor:pointer;margin-bottom:0!important;}
ul.pop-widget-tabs li a{float:left;display:block;color:#fff;background:#bbb;line-height:30px;text-decoration:none;padding:3px 8px;font-size:14px;border:none!important;-webkit-border-radius:5px 5px 0 0 / 5px 5px 0 0;-moz-border-radius:5px 5px 0 0 / 5px 5px 0 0;border-radius:5px 5px 0 0 / 5px 5px 0 0;}
ul.pop-widget-tabs.pop-widget-tabs-3 li span,ul.pop-widget-tabs.pop-widget-tabs-4 li span,ul.pop-widget-tabs.pop-widget-tabs-5 li span{display:none}
ul.pop-widget-tabs li a:hover,ul.pop-widget-tabs li a.active,ul.pop-widget-tabs li a:active,ul.pop-widget-tabs li a:focus{text-decoration:none;background:#b7e5b7;}
div.pop-inside{clear:both;padding:0;border: #ddd 1px solid;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;background-color:rgba(255,255,255, 0.5);box-shadow:#eee 0px 1px 3px;-webkit-box-shadow:#eee 0px 1px 3px;-moz-box-shadow:#eee 0px 1px 3px;}
div.pop-inside ul{border:none;padding-top:10px;display:block;list-style:none;position:relative;margin:0!important;}
div.pop-inside ul li{margin:0;list-style:none;position:relative;padding-right:10px!important;}
div.pop-inside ul li .entry-summary{clear:none;display:block;margin:0 0 5px;padding:0;font-size:.9em;}
div.pop-inside ul li .pop-title{clear:none;font-weight:bold;margin:0 0 3px;padding:0;}
div.pop-inside ul li .pop-summary{display:block;}
div.pop-inside ul li a{cursor:pointer;text-decoration:none;font-weight:normal}
div.pop-inside ul li a:hover,div.pop-inside ul li a:active,div.pop-inside ul li a:focus{text-decoration:none;}
div.pop-inside ul li p{margin:0;padding:0;}
div.pop-inside ul li img{display:block;margin:0 auto;height:auto}
div.pop-inside br.pop-cl{clear:both;content:'';display:block;}
div.pop-inside br.pop-cl:after,div.pop-inside br.pop-cl:before{content:''}
div.pop-inside ul li .pop-overlay{bottom:0;opacity:.8;display:block;padding:5px;background-color:#444;position:absolute;}
div.pop-inside ul li .pop-rating{float:left;width:12px;color:#FFF;font-size:.9em;padding:0 3px;display:block;margin-right:5px;text-align:center;line-height:120%;background-color:#666;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
div.pop-inside ul li:last-child{border-bottom:none;margin:0;}
.pop-layout-v div.pop-inside ul li .pop-overlay{opacity:1;display:inline;padding:0;background:none;position:static;}
.pop-layout-v div.pop-inside ul li img{margin:0;float:left;height:auto;max-width:65px;margin:5px 10px 5px 0;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
div.pop-inside ul.wp-tag-cloud{width:auto;height:auto;padding:5px 8px !important;}
div.pop-inside ul.wp-tag-cloud li{padding:0;width:auto;display:inline-block;word-break:break-all;word-wrap:break-word;border-bottom:none;}
div.pop-inside ul.wp-tag-cloud a:hover,div.pop-inside ul.wp-tag-cloud a:focus,div.pop-inside ul.wp-tag-cloud a:active{text-decoration:underline}

特徴といたしましては・・・

• 記事一覧の部分からタブが出てるイメージ
• タブの上だけ角丸
• 記事一覧の部分を角丸の半透明枠で囲む
  （サイトデザインを統一するためです～）
• サムネイルも角丸

っていう感じです。

CSSの書き替えする場合はこちらの記事も参考にしてみてくださいね。
WordPressでCSSの反映を確認しながら編集する方法

あとがき！

最新記事と人気記事、どっちも表示したいけどサイドバーが長くなるのは・・・
っていう場合はをタブで切り替えできるので嬉しいですよね！

細かいところに目を瞑って最低限の機能だけ使うのなら
とってもありがたいプラグインだと思います。