タグ別アーカイブ: wordpress popular posts

人気記事を好きな場所に表示する「wordpress popular posts」

人気記事

人気記事

WordPressに限らず、様々なブログやサイトで見かける人気記事一覧。サイドメニューに付いていたり、本文の後ろについていたり。そのブログ・サイトの他の記事を読むきっかけになりますよね。

新しい読者に過去の記事を読んでもらうこともできるので是非とも付けたい機能です。同内容・テーマで書かれているブログ・サイトならなおさら過去記事も読んで欲しいところ。人気記事をピックアップすることで過去記事が目に触れる機会を増やすことはページ閲覧数もアップするし、とっても有意義な施術となります。

というわけで、ワードプレスに人気記事一覧を表示させる方法をご紹介します。希望の表示方法は以下の通りです。

・サムネイル画像とページタイトルを表示、サムネイル画像はページの一番最初の画像を使用

・ページビュー数の多い順から表示

・表示箇所は本文の後ろ

色々調べてみると、超便利なプラグインがありました。

wordpress popular posts

良本として評価の高いソシムの「WordPress デザインブック」にも使用・設置方法が掲載されていました。

「wordpress popular posts」の特徴を簡単にご紹介します。

・ウィジェットを使って簡単にサイドメニューに表示させることができる

・ウィジェットを使って設定も簡単

・日本語に対応しているのでわかりやすい

・人気順位の決定方法をビュー数、訪問数など希望に合わせ選ぶことができ、集計期間も日、週、月、全期間など自由に選ぶことができる

・CSSをカスタマイズできるので、サイトに合わせたデザインに変更できる。

今回は、サイドメニューではなく、本文後に表示させたかったので、ウィジェットを使わず使用することにしました。なのでウィジェットの設定方法は割愛させていただきます。テンプレートタグを使用すれば、任意の場所に表示させることが可能となります。

1.まずはプラグインをインストールです。プラグイン新規検索で「wordpress popular posts」を探し、インストール、有効化までを行います。

2.管理画面から取得するサムネイル画像の設定を行います。

今回、表示させるサムネイル画像は記事の一番最初の画像を取得するつもりなので、設定画面から行います。

設定→「wordpress popular posts」→「ツール」

options-general2

3.テンプレートタグの設定

次はテンプレートタグの設定です。詳しくはプラグイン配布ページに書いてありますが、こちらのページが超わかりやすく説明されているのでオススメです。参考にさせていただきました。ありがとうございます!

http://www.imamura.biz/blog/cms/wordpress/4603

テンプレートタグはwpp_get_mostpopular();

<?php
if ( function_exists( 'wpp_get_mostpopular' ) ) wpp_get_mostpopular();
?>

このコードを任意の場所に挿入するだけで、とりあえずは人気ページへのリンクが表示されます。

4.パラメータの設定

「wordpress popular posts」の細かい設定を行うためには、パラメータを設定する必要があります。パラメータの詳細は、設定画面の「よくある質問」部分に掲載されています。

設定→wordpress popular posts→よくある質問

options-general

パラメータを設定したコードは以下の通りです。

<!--▼ 人気記事 ▼-->
<?php if (function_exists('wpp_get_mostpopular')) {
$palas = 'limit=10&
 range=all&
 order_by=views&
 thumbnail_width=120&
 thumbnail_height=120&
 post_start="<li>"&
 post_end="</li>"&
 wpp_start="<ul>"&
 wpp_end="</ul>"&
 stats_comments=0';
wpp_get_mostpopular($palas);
} ?>
<!--▲ 人気記事 ▲-->

$palasという任意の変数にパラメータを設定しています。

limit→表示させる記事数

range(daily weekly monthly all)→集計期間。日、週、月、全部から選びます。

order_by(views comments avg)→人気測定方法。ページビュー数、コメント数、一日の平均閲覧数から選びます。

thumbnail_width→サムネイル画像の横幅。

thumbnail_height→サムネイルの縦幅。

wpp_start→リスト全体の開始タグ(<ul>など)

wpp_end→リスト全体の終了タグ(</ul>など)

post_start→リストの開始タグ(<li>など)

post_end→リストの終了タグ(</li>など)

stats_comments→コメント数の表示有無(0:非表示 1:表示)

5.任意の場所にコードを設置

上記コードを任意の場所に設置すると、ページが表示された際に以下のようなコードが生成されます。

<!--▼ 人気記事 ▼-->
<!-- WordPress Popular Posts Plugin v2.3.6 [SC] [all] [views] [custom] -->
<ul>
<li><a href="URL" title="ページタイトル" target="_self"><img src="ページ先頭画像" alt="" border="0" width="120" height="120" class="wpp-thumbnail wpp_cached_thumb wpp_first_image" /></a> <a href="URL" title="ページタイトル">ページタイトル</a>
</li>
<li><a href="URL" title="ページタイトル" target="_self"><img src="ページ先頭画像" alt="" border="0" width="120" height="120" class="wpp-thumbnail wpp_cached_thumb wpp_first_image" /></a> <a href="URL" title="ページタイトル">ページタイトル</a>
</li>
<li><a href="URL" title="ページタイトル" target="_self"><img src="ページ先頭画像" alt="" border="0" width="120" height="120" class="wpp-thumbnail wpp_cached_thumb wpp_first_image" /></a> <a href="URL" title="ページタイトル">ページタイトル</a>
</li>

以下表示指定数分続く

</ul>
<!-- End WordPress Popular Posts Plugin v2.3.6 -->
</div>
<!--▲ 人気記事 ▲-->

6.CSSでカスタマイズ

ID、クラス指定で自由にカスタマイズして終了です。

ウィジェットを使った方が楽ですけど、自由に表示させたいという人はお試しください。