日間/週間/月間で人気記事が表示できるWordPressプラグイン「WordPress Popular Posts」

Pretty Awesome 3D Metal Wordpress Logo By: bobbigmac

日間/週間/月間で人気記事が簡単に表示できる人気のプラグイン「Wordpress Popular Posts」をご紹介します。

「Wordpress Popular Posts」は設定が簡単なのでインストールすれば10分ほどですぐ使える便利なプラグインです。

WordPress Popular Posts の設定方法
  1. WordPress Popular Posts の使い方
  2. WordPress Popular Posts をCSSでカスタマイズする

WordPress Popular Posts の使い方

1.「プラグイン」>「新規追加」から「Wordpress Popular Posts」を検索してインストールし、有効化します。
Wordpress Popular Posts

2.「設定」>「Wordpress Popular Posts」から日間/週間/月間での閲覧数やコメント数のランキングが確認できます。
Wordpress Popular Posts
3.実際に利用するときは「外観」>「ウィジェット」から「Wordpress Popular Posts」をサイドバーに追加します。
Wordpress Popular Posts

4.サイドバーに追加した「Wordpress Popular Posts」を展開しての設定を行います。

Wordpress Popular Posts

Title
ウィジェットのタイトル
Show uo to
表示する件数
Time Range
集計期間
Sort posts by
集計内容(閲覧数、コメント数など)
Shoten title
表示する記事のタイトルの文字数
チェック無しならタイトル全文を表示する
Dispaly post excerpt
概要の表示
チェックしなければ概要は表示されない
Wordpress Popular Posts

Post type(s)
集計を行う投稿タイプ
Category(ies) ID(s)
集計を行うカテゴリーID
Author(s) ID(s)
集計を行う著者ID

(※空にすると全てのIDを集計対象とします)

Wordpress Popular Posts

Display post thumbnail
チェックを付けるとサムネイルを表示する
Wordpress Popular Posts

Use custom HTML Markup
カスタムタグを埋め込む
Before / after title
ウィジェットのタイトルにタグを挿入する
Before / after Popular Posts
記事全体のタグを挿入する
Before / after each post
個別記事のタグを挿入する

WordPress Popular Posts をCSSでカスタマイズする

「WordPress Popular Posts」をカスタムタグを埋め込まずに使用するとこのような構造になります。

HTML
<li class="widget popular-posts">
	<ul>
		<li>
			<a href="記事のリンク">
			<img src="サムネイル" />
			記事のタイトル
			</a>
		</li>
		<li>
			・・・
		</li>
	</ul>
</li>

デフォルトでは、個別の記事に対してクラスは指定されないため、記事全体の「popular-posts」クラスに対してCSSを設定します。

CSS
/* 記事を囲うulタグ */
.popular-posts ul{
	margin-bottom: 15px;
}

/* 個別記事ごとのliタグ */
.popular-posts li{
	list-style-type:none;
	list-style-image:none;
	clear: both;
	margin: 0;
	padding: 0;
}

/* サムネイル */
.popular-posts img{
	margin: 0 10px 20px 0px;
	padding:0px;
	float: left;
}

/* タイトル */
.popular-posts a{
	word-break: break-all;
}

基本的なCSSはこんな感じになります。後はサムネイルに「box-shadow」をつけるなどお好みでCSSを修正してみてください。

divider

Trackback URL

http://webnonotes.com/wordpress/wordpress-popular-posts/trackback/

No Comments Yet

コメントを残す

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

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