サムネイル画像付き「人気記事ランキング」を作る方法(WordPress)

画像つき人気記事ランキングと特定カテゴリ内人気記事ランキング

WordPressで画像サムネ付き人気記事ランキング」を作る方法を紹介します。

●人気記事ランキングは、総合記事の閲覧数ランキング

のことです。

サムネとはサムネイル画像の略で、そのページの画像を自動で拾ってきて小さいアイコン画像のように表示させることです。

人気記事ランキングを作るプラグインには有名なものにPopular PostsWP-PostViewsがありますが、
Popular Postsの方は脆弱性が見つかって第三者が任意のPHPコードをTimThumbキャッシュディレクトリにアップロードでき、そのコードを実行されてしまうようになりました。

これは編集すれば直るのですが、手間が掛かるのでWP-PostViewsにします。

サムネイル画像付き人気記事ランキングの作り方・方法



1、PM Thumbnail Picture Menuというプラグインをインストールします。

これはサムネイル画像を使ったナビゲーションメニューリンクを生成するプラグインです。

管理画面のプラグイン→新規追加

キーワードに「PM Thumbnail Picture Menu」 と入力し、検索

「いますぐインストール」をクリック

「プラグインを有効化」をクリック



2、WP-PostViewsをインストールします。

これは記事ランキングを簡単に作成できるプラグインです。普通は文字でしかランキングは表示されません。

管理画面のプラグイン→新規追加

キーワードに「WP-PostViews」 と入力し、検索

「いますぐインストール」をクリック

「プラグインを有効化」をクリック



3、管理画面[プラグイン]>[インストール済みプラグイン]から「WP-PostViews」の「編集」の画面を開く

wp-postviews.phpの次の箇所にハイライトしてある箇所を追加
(wp-postviews.php内に全部で同じ記述が6ヶ所あるので全て変更

$post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars);
$thumbnail = get_the_post_thumbnail($post->ID,"thumbnail",true);
$temp = stripslashes($views_options['most_viewed_template']);
$temp = str_replace("%VIEW_COUNT%", number_format_i18n($post_views), $temp);
$temp = str_replace("%POST_TITLE%", $post_title, $temp);
$temp = str_replace("%POST_EXCERPT%", $post_excerpt, $temp);
$temp = str_replace("%POST_CONTENT%", $post->post_content, $temp);
$temp = str_replace("%POST_URL%", get_permalink($post), $temp);
$temp = str_replace("%THUMBNAIL%", $thumbnail, $temp);
$output .= $temp;

編集したら「ファイルの更新」をクリック。

次に管理画面の設定→PostViewsのオプション画面のMost Viewed Templateの空白に以下のコードを書いて保存します。

<li><a href="%POST_URL%">%POST_TITLE%<span class="thumb_img">%THUMBNAIL%</span></a><br>%VIEW_COUNT% view</li>

(タイトルとサムネ画像との間に改行を入れたくなければ
は除きます。お好みで)


これで通常は文字列のみだったWP-PostViewsにサムネイル画像が表示されるようになります。

※このサムネイル画像のサイズを変更するためにはデザインCSSのどこかに(一番下で可)

.thumb_img{
	width:100px;
	height:100px;
	}
.thumb_img img{
	width:100px;
	height:100px;
	}

とpxで幅(width)と高さ(height)を指定すれば、自由に大きさも変えられます。(上の例は100pxです)



4、管理画面[外観]>ウェジェットの「利用できるウェジェット」に「Views」が出来ているので、右にある表示させたいお好みのサイドバーにクリックしたまま移動(ドロップ)する。

20130507-31928



5、人気記事ランキングの設定。右にドロップした「Views」の▼(下三角マーク)をクリックすると設定画面が出ます。

20130507-32019

Title:タイトル

【Statistics Type】:ランク付けのルール
Most Viewed:表示回数が多い
Most Viewed By Category:表示回数の多いカテゴリー
Least Viewed:表示回数が少ない
Least Viewed By Catetory:表示回数の少ないカテゴリー

【Include Views From】:表示ルール
Posts & Pages:投稿と固定ページ
Posts Only:投稿のみ
Pages Only:固定ページのみ

No. Of Records To Show:表示する件数

Maximum Post Title Length (Characters):タイトルの長さ

Category IDs:表示したいカテゴリのIDを記入

総合の人気記事ランキングの場合、【Statistics Type】はMost Viewed。

Include Views From(表示されるページ)は固定ページと投稿ページ両方入れたかったのでPosts & Pagesにしました(これはお好みで)。

Category IDsは「0」。

「保存」します。

これでサムネイル画像付き「人気記事ランキング」の完成です。


続き的なもの↓

サムネイル画像付き「特定カテゴリ内のみの人気記事ランキング」を作る方法(WordPress)
http://libpsy.com/thumbnail-category-popularity-index/1161

特定ページでのみウェジェットおよびサイドバーを表示・非表示にさせる方法(WordPress)
http://libpsy.com/page-sidebar-widget-display-hide/1162

投稿ページ内でウェジェットを表示させる方法(ページ内に人気記事ランキングなどを表示:WordPress)
http://libpsy.com/single-post-page-in-widget/1134




参考にさせて頂いたサイト

wordpressでサムネイル付き人気記事ランキングを作る

WP-PostViewsを使い記事の閲覧数や人気記事ランキングを設置する方法

スポンサーリンク

記事を書いた人



時田憲一(ときたけんいち)こと時ニール(tokeyneale)です(・ω・)ノ
とある国立大学の教育学部/心理発達科学。心理学者・認定カウンセラー。動機付け理論・自己愛・対人関係が主な研究領域。数理統計データサイエンティスト。
ねこ好き・本好き・禅好き・PC好き。

時田憲一がこっそり教えるメルマガ(トキマガ)

【無料】心理カウンセラー時田がこっそり教える自由になれる話
は必須項目です
    メールアドレス

      
※迷惑メールアドレスに届いている場合もございます。ご確認ください。

※ご入力頂きましたメールアドレスは、私(時田憲一)の独自メルマガ(ステップメール/自動メルマガ)に仮登録(代理登録)及び
私の「心理カウンセラーがこっそり教えるビジネス心理学」に約一週間後に仮登録(代理登録)されます。 (まぐまぐからの発行メールマガジンID:0001615461)メルマガがご不要な場合は
http://www.mag2.com/m/0001615461.html
及びメールの解除アドレスによりいつでも解除することが可能です。

なお、まぐまぐ公式メルマガには登録されませんので、ご安心下さい。

関連記事

2 Responses to “サムネイル画像付き「人気記事ランキング」を作る方法(WordPress)”

  1. […] サムネイル画像付き「人気記事ランキング」を作る方法(WordPress http://libpsy.com/thumbnail-popularity-index/540/ […]

  2. […] せるプラグインは色々あります。僕が、今回この「WP-PostViews」を選んだのは「リバータリアン心理学 研究所」さんの記事でめっちゃ分かりやすく解説してあったからです。今回は本当 […]

コメントを残す

サブコンテンツ

人気記事ランキング

このページの先頭へ