【WordPress Popular Posts】を使って賢威のサイドバーに人気記事ランキングを設置する

記事のランキングを表示させたい

ブログのサイドバーと言えば「人気記事ランキング」。アクセス数のランキングや、はてなブックマーク数のランキングなど様々ですが、ほとんどのブログで見かける機能だと思います。今回はその「人気記事ランキング」をカンタンに設置できる「WordPress Popular Posts」プラグインの紹介です。 ※バージョン 3.3.2 の解説となっています

今回の記事の目的

「WordPress Popular Posts」をランキングを設置
「WordPress Popular Posts」の機能をおさらい
賢威に適用する場合のカスタマイズ

人気記事ランキングもプラグインを利用すればカンタンに設置することができます。 WordPressでサイトやブログを運用するメリットはプラグインを使っていろいろなことが実現できることですよね。 WordPress Popular Postsプラグインを使って、サイドバーにサムネイル付きのアクセスランキングエリアを設置してみましょう。

人気の記事を掲載することで、ユーザーが見るべき記事を示すことができ、回遊率の向上や意図した記事へのアクセスを促すことが期待できます。ブログ自体も華やかになるので、まだ導入していない方はぜひ挑戦してみてください。

まずはプラグインを有効化

はじめに「WordPress Popular Posts」プラグインをインストールするところからはじめましょう。プラグインの有効化については、Advanced Custom Fieldsの記事で解説していますので、分からない方は参考にしてみてください。

Advanced Custom Fieldsでカスタムフィールドを簡単に設定する

今回はウィジェットを利用していきます

WordPress Popular Postsを使ったランキング表示はいろいろな設置方法があり、ウィジェットを使ったり直接「php」を書いて表示させることもできます。今回はカンタンに設置できるカスタマイズの紹介にしたいと思いますので、「ウィジェット」機能を使って設置を進めていきたいと思います。ちなみに、いさろぐのスマホ表示は「php」での出力を利用していますので、例としてコードを書いておきます。

●phpで書く場合

<?php if (function_exists('wpp_get_mostpopular')) {
$palas = 'limit=3&
 range=all&
 stats_views=0&
 order_by=views&
 thumbnail_width=70&
 thumbnail_height=70&
 post_start="<li>"&
 post_end="</li>"&
 wpp_start="<ul>"&
 wpp_end="</ul>"&
 stats_comments=0';
wpp_get_mostpopular($palas);
} ?>

プラグインを有効化した後、上記のコードを任意の場所に貼り付けるとランキングが設置できます。この例では、3件のランキングで70pxの正方形のサムネイルをリストタグを使って表示させています。

ウィジェットに追加しよう

それでは、実際にウィジェットを利用して「WordPress Popular Posts」を設定していきます。 WordPressの左メニューから「外観」>「ウィジェット」を選択してウィジェットの管理画面に移動します。

「利用できるウィジェット」のエリアに「WordPress Popular Posts」があるのが分かります。こちらをドラッグ＆ドロップで「サイドバー」の一番上に移動させてみましょう。

移動させた後は一度そのまま「保存」を押して様子をみてみましょう。どのようにブログに表示されるのかを見てみます。

Sorry. No data so far.

すると、「データがありません」、というエラーが表示されます。これはまだ設置段階でアクセス数がないためですので、一度ご自身の記事にアクセスしてから反映を見てみましょう。

ウィジェットに追加しただけでランキングが表示されました。これだけでは寂しいですので、続いてサムネイルを入れたり、アクセス数を表示したり、詳細な設定項目についてみていきましょう。

WordPress Popular Postsの設定項目

それでは順番に設定項目を埋めながらみてきましょう。

Title

サイドバーに表示される見出し部分になります。ここでは「人気記事ランキング」と入力してみます。

Show up to post

次にランキングの表示数。ここでは「5件」としておきます。

Sort posts by

Total views ・・・合計アクセス数
Comments ・・・コメント数
Avg. daily views ・・・1日の平均アクセス数

ここでは、表示のルールを決めていきます。用途にあわせて選択してきますが、ここではアクセスランキングということで「Total views」を選択しました。

ここまでが基本設定という感じです。このページをランキングに入れたくない、などの詳細なフィルタや、サムネイルの設定は以降で設定してきます。

Filters

Time Range
計測期間を設定します。全期間で問題ない場合は「All-time」を設定しておきます。「Display only posts published within the selected Time Range」にチェックを入れると設定した期間に公開した記事が集計されます。
Post type(s)
表示される記事のタイプを選択します。 post ・・・投稿ページのみ page ・・・固定ページのみ post,page ・・・投稿ページと固定ページ
Post(s) ID(s) to exclude
除外する記事のIDを入力します。
Category(ies) ID(s)
特定のカテゴリーのみ表示する場合、カテゴリーのIDを入力します。
Author(s) ID(s)
特定の著者のみを表示する場合、AuthorIDを入力します。

Posts settings

Shorten title
タイトルを短縮する。タイトルが長くなりすぎてしまうと見栄えがよくないため、短縮して揃えたい時にチェックをいれます。
Display post excerpt
概要文を表示。
Display post thumbnail
サムネイルを表示。

サムネイルを表示する場合は、こちらの項目をチェックしておきます。チェックをして「一度保存する」とさらに項目が表示されるので、内容をみていきましょう。

サムネイルの設定

「Use predefined size」からあらかじめ設定されているサイズを選択できますが、ここでは「Set size manually」で自分で任意のサムネイルのサイズを入力してみます。この解説では、「80×80」のサムネイルを入れてみました。

サムネイルは各記事の「アイキャッチ画像」が利用され、アイキャッチ画像の設定がない場合は「No Thumbnail」画像がデフォルトで設定される仕様になっています。

いさろぐの「人気の記事」エリアのサムネイルは「80×80」に設定してあります。

Stats Tag settings

「Stats Tag settings」では、タイトルや概要文以外に表示させるデータを選択できます。ランキングの場合は「Display views」にだけチェックを入れておけばいいかと思います。

Display comment count
コメント数を表示
Display views
アクセス数を表示
Display author
投稿者の名前を表示
Display date
投稿日を表示
Display category
カテゴリを表示

HTML Markup settings

「HTML Markup settings」では出力されるHTMLタグのカスタマイズが可能です。任意のクラス名を入れたい時や、リストタグでなく「div」タグなどでマークアップしたい、など詳細なカスタマイズが必要な場合はこの項目で調整をすると便利です。

賢威の「CSS」を調整しておこう

ここまでの流れでランキングは設定できたと思いますが、賢威のサイドバーにそのまま利用すると、リストアイコンが表示されてしまいます。

サムネイル表示の場合は必要ないと思いますので、CSSを調整してリストアイコンを削除しておきましょう。ランキング用のCSSを「design.css」に追記する形で対応します。

●「design.css」に追記

.sub-column .widget-conts ul.wpp-list li{
	padding: 3px 10px 3px 0px;
	background: none;
}

「ul.wpp-list」はWordPress Popular Postsプラグインで出力されるクラス。「padding」で左余白を調整し、「background」で設定されているリストアイコンを「none」にしておきます。

さらに細かい調整をする場合は、「design.css」に追記する形で対応できますので、好みにあったカスタマイズに挑戦してみてください。ブラウザ「Chrome」の「デベロッパーツール」などを利用すると、どんなクラス名が設定されているか確認できますので、カスタマイズに便利です。

賢威7の場合もCSSで調整

●「base.css」に追記

ul.wpp-list {
	margin-left: 0px;
}

賢威7では「ul」に左マージンが取られているため、余白の調整をするだけでバランスが良くなります。「base.css」で細かい調整も可能ですので、ご自身のサイトにあわせてカスタマイズをしてみてください！

最後に抑えておきたいポイント

人気記事ランキングの設定がある程度完了したところで、最後に設定しておきたいポイントを紹介します。実は今のままでは「自分のアクセスも計測される」ため、ご自身で何度もページを閲覧すると「Views」数が増えてしまいます。そこで、WordPressの左メニュー「設定」>「WordPress Popular Posts」に進み、タブの中から「Tools」を選択します。

ここはプラグイン自体の設定をおこなうエリアとなり、サムネイルのデフォルト画像を任意に設定したり、キャッシュやリンクターゲットの設定がおこなえます。こちらの設定画面で以下のような項目にて、「Visitors Only」を選択し「Apply」をクリックして保存をします。

この設定でアクセスをカウントするユーザーを「訪問者のみ」とし、自分のアクセスのカウントを防止することが可能になります。ここでいう「自分のアクセス」は「WordPressにログインしているかどうか」を判断しているため、ログアウトした状態ではカウントされるのでお気を付けください！

まとめ

いかがでしたか？今回紹介した「WordPress Popular Posts」プラグインはいさろぐのサイドバーにある「人気の記事」でも利用しています。やはり設置がカンタンでカスタマイズも容易なため、ブログ運営には欠かせないプラグインだと思います。

冒頭でもお伝えしましたが、人気の記事を掲載することで、ユーザーが見るべき記事を示すことができ、回遊率の向上や意図した記事へのアクセスを促すことが期待できると考えています。「これが人気だよ」と伝えることによって、ユーザーは「探す」という作業が不要になるため、閲覧、回遊のハードルが下がるのではないかと考えているからです。カテゴリ別のランキングをいくつか掲載するのも効果的かもしれません。運営するサイト、ブログにあったランキングを設定してみてください。

「WordPress Popular Posts」はより詳細なカスタマイズも可能なプラグインですので、次回は難易度の高いカスタマイズに挑戦し、実際に自分でうまくできれば記事にして紹介したいと思います！ぜひ楽しみにしていてください。