カテゴリ毎の人気記事を表示するように出来ます。
WordPress Popular Postsと一緒に使うプラグイン。
WordPress Popular Postsの足りない、を補う
WordPress Popular Postsは非常に便利なプラグイン。
まだお使いでは無い方は是非オススメ。
自分のブログの人気記事を自動で読込み、
サイドバーに表示してくれます。
詳しくは、私のブログでも紹介しています。
ご覧ください。
WordPress Popular Postsを設定、人気記事をサイドバーに表示する。
さらに便利な使い方もあります。
WordPress Popular Postsの記事別アクセス数を管理画面で表示。
非常に便利なWordPress Popular Postsですが、
1つ物足りないのは、
「投稿を見ている時に、
カテゴリ別に自動で記事を抽出して表示できないこと」
ですね。
例えば、WordPressカスタマイズの投稿を見ている人は、
同じくWordPress関連の投稿を見たいと思われます。
そのような投稿リンクがサイドバーのWordPress Popular Postsに
自動で表示されていたら良いですよね。
実はこれは、通常の機能にはついていません。
でも、これが可能になりました。
WPP Plus Widget
というプラグインで。
WordPress Popular Postsの機能を補填するような感じです。
非常に有り難い、オススメです。
WordPress Popular Postsと一緒に使います。
WordPress Popular Postsはアンインストールしないようご注意を。
ちなみに、トップページでは投稿全体のランキングを表示。
個別投稿ページでは、各種カテゴリのランキングを表示させます。
WPP Plus Widgetプラグインを使ってみよう
こちらはWordPressの公式プラグインではありません。
なので、作者のWEBサイトからダウンロードして(無料)、
WordPressプラグイン管理画面にてアップロードして下さい。
ご利用は自己責任でお願いします。
今のところ私のブログでは何の問題もなく快適に使えています。
ダウンロードはこちら。
WPP Plus Widget
http://8wired.jp/wpp-plus-widget
WPP Plus Widgetという名前通り、
プラグインであるのですが、使う際はウィジェットとして使います。
WordPressのウィジェット管理画面で設定ができるようになります。
WPP Plus Widgetの設定方法・アップロード
まず、全てのデータ・ファイルをバックアップしておきましょう。
終わったら、以下をどうぞ。
WPP Plus Widgetをダウンロードします。
ダウンロードしたら、Zipファイルのまま、
WordPressにアップロードします。
WordPress管理画面→
プラグイン→
新規追加→
プラグインのアップロード
これでWordPress内にインストールされます。
WPP Plus Widgetの初期設定をする
では設定をしていきましょう。
表示は日本語だしとても簡単でした。
本当に便利ですね。
WordPress管理画面→
外観→
ウィジェット→
WPP Plus Widgeをサイドバーウィジェットにドロップ→
ここで設定していきます。
WPP Plus Widgeウィジェット入力画面の設定
タイトル：人気記事 など
深さ：1 【親カテゴリ、子カテゴリも表示する意味】
参照
WordPress Popular Postsでカテゴリ別の人気記事を表示する
http://8wired.jp/blog/1706
パラメータ：
limit=5 【記事数】
range=weekly 【ランキング期間】
order_by=views 【何のランキングか、ここではview数】
thumbnail_width=100 【サムネイル幅】
thumbnail_height=100 【サムネイル高さ】
excerpt_length=50 【抜粋文の文字数】
stats_comments=0 【コメントを表示するか、0は非表示の意味】
post_type=post 【表示する内容、ここでは投稿のみ】
参照
WordPress Popular Postsでランキングページを作成する
http://hacknote.jp/archives/5498/
表示記事を除外する にチェックをつけた
フォーマットの設定：
記事一覧の前後→
前<div id="popular-post"><ul>
または
<div><ul>など、テーマに合わせます。
後</ul></div>
記事フォーマット→
デフォルト
<li>{thumb} {title} {stats}</li>
{stats}は抜粋やコメント数、カテゴリ名、view数を表示させます。
先ほどパラメータの欄に入力していれば、表示されます。
view数だけ表示させたい場合は、
{views} にしても構いません。
参照
ブログの人気記事を表示させる WordPress Popular Posts の設定方法まとめ
http://mizyupon-rpg.com/posts/1023.html
→保存をクリック
でＯＫです。
各々好きなものに置き換えてくださいね。
あとは、CSSを指定してキレイな表示にさせると良いでしょう。
テーマStinger5、Stinger7の場合は、
新着記事一覧のCSSと合わせてもいいかも。
または、あえてCSSを全然別物にして目立たせても良いですね。
下記に良い感じのCSSコードがあるので、参考にどうぞ。
追加：人気記事のランキング順位を表示させる
ここからはお好みで、オプションです。
サイドバーに表示されたカテゴリ毎の人気記事に、
「1」「2」…と順位をつけます。
サムネイル画像のあたりに表示させます。
参照
今表示している記事のカテゴリの人気記事を簡単に表示できるプラグイン【WPP Plus Widget】
http://shufulife.com/ninki-kiji/
追記：CSSだけでも出来るようです→
人気記事にCSSだけでランキングを表示する方法
http://8wired.jp/blog/9150
Stinger5またはStinger7の場合は、
使用しているテーマの親ディレクトリへ。
base.js
を開き、以下のコードを追加します。
base.jsはPCのメモ帳で開きましょう。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
/*---------------------------
人気記事ナンバリング
------------------------------*/
$(function(){
$('#popular-post ul li').each(function(i){
$(this).attr('class','number' + (i+1));
});
});
以上です。
保存して閉じます。
次に、WordPress管理画面へ。
設定→
WordPress Popular Posts
【プラグイン名を要確認、WordPress Popular Postsです】→
Tools→
Use plugin's stylesheet を、Disabledにする→
Apply をクリック
以上です。
さらに続きまして。
WordPress外観→
テーマの編集へ。
以下をCSSに追加。
Stinger5、Stinger7の場合は
全てのデバイスを指すCSS記入箇所に追加して下さい。
.wpp-list li {
float: none;
clear: left;
}
.wpp-thumbnail {
display: inline;
float: left;
margin: 0 10px 0 0;
border: none;
}
#popular-post a {
font-size: 14px;
text-decoration : none;
}
#popular-post li {
padding : 20px 10px;
border-bottom: #d2d7e6 1px solid;
line-height: 1.5;
overflow: hidden;
text-align: left;
}
#popular-post li:hover { background-color: rgba(238,238,238,0.3) }
#popular-post ul li { position : relative }
#popular-post li:last-child { border-bottom: none }
#popular-post { counter-reset : wpp-ranking }
#popular-post ul li::before {
position : absolute;
top : 15px;
left : 5px;
color : #ffffff;
counter-increment : wpp-ranking;
text-align : center;
z-index : 9999;
float : left;
line-height : 25px;
width : 25px;
height : 25px;
border-radius : 2px;
}
#popular-post ul li.number1::before,
#popular-post ul li.number2::before,
#popular-post ul li.number3::before,
#popular-post ul li.number4::before,
#popular-post ul li.number5::before {
content : counter(wpp-ranking, decimal);
background-color : #f09696;
}
/* 人気記事views数 */
.wpp-views {
color: #fff;
background: #FA5882;
margin-bottom: 5px;
margin-right: 5px;
padding: 2px 3px;
border-radius: 2px;
}
以上です。
あとは細かい調整をして、キレイな表示にしましょう。
お疲れ様でした。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク
・ツイート
Tweet
・Google+1
・夜中にも出現します(-_-)zzz
Follow @rabbitshimako
・メルマガは３時のおやつ時
フィード登録