新着・人気記事の切替表示ができるプラグイン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

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

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

っていう感じです。

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

あとがき!

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

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

  • このエントリーをはてなブックマークに追加

こんな記事も書きました!

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

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

「TablePress」はテーブルが簡単に作成できるプラグインです。 HTMLで自作してもいい...

記事を読む

wpnavi

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

今日はアメブロの記事をWordPressに移行する方法を書きます。 移行についての前置き ...

記事を読む

PS-Auto-Sitemap

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

サイトマップについての前置き サイトマップとは、サイト内にあるページを一覧表示させて サイトに来...

記事を読む

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

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

カテゴリーベースについての前置き WordPressでは、カテゴリーページにアクセスすると この...

記事を読む

BackWPup

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

プラグインをインストールする前に はじめに、WordPressにインストールしておくべきプラグイン...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower