cup-of-coffee-1280537_1280

プラグイン

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

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

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

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

popular-widget

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

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

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

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

  • 「Twenty Fourteen」の場合
  • popular-widget

  • 「TCD010」の場合
  • popular-widget

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

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

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

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

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

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

popular-widget

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

Popular Widgetの設定

大まかな表示説明

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

popular-widget

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

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

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

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

 

Users (ユーザーの除外設定)

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

popular-widget

Filter by user id 記事を表示する投稿者のIDを入力
Exclude 上記IDを除外したい場合はチェックを入れる

Display (表示設定)

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

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

popular-widget

Display count 人気記事閲覧数の表示 or 非表示
Display thumbnail サムネイル画像の表示 or 非表示
Display post excerpt 記事抜粋の表示 or 非表示
※チェックを入れると全文表示されてしまいます!
Image Size thumbnail 正方形65×65pxで縮小表示
medium 元のサイズの縦横比を維持して縮小表示
large
mid_size
small_size
mediumと同じでした
Show how many posts? 表示する記事数
Title length ○ characters タイトルの文字数
※日本語だと設定が反映されません!
Excerpt length ○ Words 記事を抜粋表示する文字数
※日本語だと設定が反映されません!

Calculate (PV or UUの設定)

popular-widget

Views PV数でカウント
Visits UU(ビジター)数でカウント

Taxonomy (カテゴリー or タグの表示選択)

popular-widget

In Categories 表示する カテゴリーID or タグID を入力
Exclude 上記IDを除外したい場合はチェックを入れる
Tags taxonomy 「タグ」の表示を選択した場合、タグの代わりに
「カテゴリー」or「投稿フォーマット」からも選択できる
※投稿フォーマット機能の有無はテーマによります

Post Types (投稿 or 固定ページの表示選択)

popular-widget

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

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

Arrange / Disable / Rename (表示する項目の選択)

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

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

popular-widget

Recent Posts 最新の記事
Recent Comments 最近コメントがついた記事
Most Commented コメント数の多い記事
Most Viewed 人気の記事(よく読まれている記事)
Tags タグ(「Taxonomy」設定欄でカテゴリーの選択も可)

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

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

デザイン設定の参考

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

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

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

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

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

popular-widget

/**
 * 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の反映を確認しながら編集する方法

あとがき!

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

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

関連記事

  1. fashion-1478810_1280

    WordPress基礎講座

    最低限入れておくべきプラグイン一覧

    プラグインをインストールする前にはじめに、WordPressにイン…

  2. desktop-2530405_1280

    プラグイン

    サイトマップ作成プラグイン「PS Auto Sitemap」の設定とスタイル一覧

    サイトマップについての前置きサイトマップとは、サイト内にあるページ…

  3. list-1925752_1280

    WordPress基礎講座

    パーマリンクの「category」を非表示にするには?

    カテゴリーベースについての前置きWordPressでは、カテゴリー…

  4. laptop-2443049_1280

    プラグイン

    テーブル作成プラグイン「TablePress」の使い方と装飾方法

    「TablePress」はテーブルが簡単に作成できるプラグインです。…

  5. blog-2355684_1280

    WordPress基礎講座

    簡単!アメブロからWordPressへの移行方法

    今日はアメブロの記事をWordPressに移行する方法を書きます。…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

WPテーマ

WordPressテーマ「Chill (tcd016)」
  1. notebook-2672467_1280

    WordPress基礎講座

    WordPressの初期設定で必要なこと
  2. coffee-2446645_1280

    カスタマイズ

    ページ遷移時のフェード効果を実装するjQuery
  3. laptop-2838921_1280

    カスタマイズ

    WordPressでCSSの反映を確認しながら編集する方法
  4. cup-2218405_1280

    WordPress基礎講座

    Web系情報サイトのドメインや屋号を考える時の英単語案色々
  5. laptop-2562361_1280

    WordPress基礎講座

    WordPressのパーマリンク設定
PAGE TOP