WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】のプラグイン「WordPress Popular Posts」でリストの表示を思い通りに表示する方法

公開日:2017(平成29)年2月3日/最終更新日:

Knowledge Base Wordpress 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressでサイトを作っている中で恐らく設置率ナンバーワンを争うコンテンツであろうと思われるのが「関連記事の表示」と「人気記事の表示」ではないでしょうか??

関連記事に関しては、無料のテーマなどでも実装されていることが多く、大抵はどこに表示するかを指定すれば「タグ」や「カテゴリー」に紐づいた記事をランダムに表示してくれますね。

いきなり脱線ですが、前の文章気になりませんか?そうなんです。「関連記事」として表示しているのは実は関連なんかじゃなく、単なるランダム表示だということをご存じですか??これは関連記事を表示するためのソース(プログラムソース)を見れば一目瞭然なんですね。

WordPressでサイト作りを始めたころは「すごい機能だなーーー」と感心してましたが、使い慣れてきて、ソースコードもある程度見れば流れが分かる位になってくると、こうした「なんちゃって」みたいな動作が見えてきてしまうんですね、これが。

きちんと関連記事を表示するには

  1. 訪問してくれた方がどんなページをついでに見たか
  2. 全部の文章から単語を抽出して関連性を計算して表示するか

というのが必要で、こんなことをやっていたらすごい数のデータを常に計算してどこかへ格納しなければならないから現実的ではないんですね。時間がかかって仕方ないということです。昔yahooの要素解析を使った関連記事表示のプラグインが1つあったのですがいつのまにかなくなりましたね。

とはいえ、関連性があればついでに見てくれる可能性が広がるのでどうしてもという方は、私が使っている

というプラグインを試してみてください。ただ、解説にも書いていますが「Simplicity2」というテーマで使う方法のみがプラグイン開発者のサイトでも紹介されていますので他のテーマでどうしたら・・・というのはご自身で研究が必要だと思います。


・・・と1つ目の脱線?はこの位にして、人気記事の話に戻します。

人気の記事を表示するためには、閲覧された記事が何なのかを蓄積していく必要があります。そしてそのデータを何かの方法で順位付けして表示する必要がありますね。

この2つをやってくれるのが今回紹介する「WordPress Popular Posts」です。

プラグインの基本的なことは「WordPress Popular Posts」で紹介していますから参照ください(恐らくこのページを見ている方はすでに「WordPress Popular Posts」プラグインを使っているでしょうから見る必要もないかもしれません。

まあ、設定で気を付けるのは自分のアクセスを除外すること(visitor onlyにすること)と、カスタム投稿タイプを使っているなら必要な投稿タイプを含めること位ですね。

それでちゃんとしたデータは蓄積されていきますから、あとはいよいよどうやって順位を表示するかということになるわけです。

とはいえ、閲覧いただいているこのページは「これをコピペすれば簡単に設置できる」というものではなく、タグの仕組みやパラメーターなどを全部解読して、最終的には自分の思うような一覧を表示するためのものですから、簡単にコードのコピペで済ませたいという方には向いていません。

しかも、コードと実際にどう表示されるかなども全部表示していますからかなり長い文章になりますから、「WordPress Popular Posts」で表示できることを全部知りたい、自分で設定してみたいという方以外はつまらないページかもしれませんのであしからず。

前置きがとんでもなく長くなってしまい申し訳ありません。それでは順を追って私の分かる限りで紹介していきますのでよろしくお願いします。

「WordPress Popular Posts」で人気記事一覧を表示する方法は2通り

大きく分けると「テンプレートタグ」を使って表示する方法と「ショートコード」を使って表示する方法があります。

ここで再び脱線して「テンプレートタグ」と「ショートコード」とは何ぞや?どう使うの?何が違うの?というのをちょこっと解説しようと思います

テンプレートタグって何?どうやって使うの?

「テンプレートタグ」とは、phpというWordPressのテーマなどで使う言語を使ってコードを書いてデータを引っ張り出す方法で、通常の投稿や固定ページ内ではそのまま記述して表現することはできません。

このテンプレートタグを投稿や固定ページの本文で使えるようにするには「EXEC PHP」などのプラグインを使用すればOKなのですが、セキュリティの関係から直接コードを使わずにショートコードを使うことが推奨されている(私自身は特に気にしてない)ようですので、ショートコードのあるものはショートコードで使うのが一般的ですね。

ショートコードって何?どうやって使うの?

ショートコードという言葉はよく聞くと思いますし、いくつかプラグインを使ったことのある方なら[  ]で囲まれたコードを投稿などに書くんでしょ!!と分かるはずです。

でもこれが何をしているかというのを知ってて使っている方って意外に少ないかもしれませんね。このショートコードというのは、前述したようにセキュリティの関係から投稿や固定ページ本文へ直接テンプレートタグを使わなくてもいいように、ショートコードに記述されている内容からプラグインのプログラムを引っ張り出して動かすためのコードなんです。

要するに
ショートコードが入っていると表示するときには

  1. このショートコードに該当するプログラムをプラグインのプログラムの中から引っ張り出す
  2. プラグインのプログラムを動かして表示する

という風にワンクッションおいて動作しているんですね。

ですから、どちらも結局phpという言語でデータの中からいろいろな条件に合ったものを表示するという動作自体に変わりはありません。


脱線が長くなってしまいましたね。要するに今回紹介するWordPress Popular Postsでも「テンプレートタグ」と「ショートコード」のどちらを使っても同じ結果が得られるということになるのです。

デザインするためのCSSも前後に<div id=〇〇><</div>で囲めばIDセレクタになりますから、外部のCSSを読み込んで表現するということもできますので、本当に何も変わらないです(・・・とここでCSSについて脱線したいところですが本当に長くなってしまうのでやめます)。

ただ個人的にはテンプレートタグを使った方が何かマニアック・・・ということで、今回はテンプレートタグの方を先に紹介します。

テンプレートタグを使って表示する方法

デフォルトで表示した場合の人気記事リスト

何も設定せずにテンプレートタグでそのまま表示すると

  1. 表示する件数は10件
  2. 表示する期間は直近24時間
  3. アクセスされる度に計算しなおして表示する
  4. 表示数順に並べて表示する
  5. 含める投稿タイプは「投稿」と「固定ページ」
  6. 指定する投稿IDはなし(全部表示)
  7. カテゴリーの指定はなし(全カテゴリーから表示)
  8. 投稿したユーザーの指定はなし(全てのユーザーから表示)
  9. タイトルの長さは先頭から25文字分を表示
  10. タイトルは文字数で計算する(単語の数ではない)
  11. 抜粋の長さは指定しない(抜粋に入力されているすべての文を表示、文字の装飾はなし)
  12. 抜粋は文字数で計算する(単語の数ではない)
  13. サムネイル画像のサイズは指定しない
  14. コメント数は表示しない
  15. アクセス数(PV数)は表示しない
  16. 投稿したユーザーは表示しない
  17. 公開日は表示しない
  18. 日付の形式を指定しない
  19. カテゴリー名は表示しない

という条件はが含まれた形で表示されます。

この条件をすべて含めてコードにすると次のようになります。

<div style="background-color: #ffffff;"><?php<br>$args = array(<br>'limit' => 10,<br>'range' => 'daily',<br>'freshness' => 0,<br>'order_by' => 'views',<br>'post_type' => 'post,page',<br>'pid' => 'none',<br>'cat' => 'none',<br>'author' => 'none',<br>'title_length' => 25,<br>'title_by_words' => 0,<br>'excerpt_length' => 0,<br>'excerpt_format' => 0,<br>'excerpt_by_words' => 0,<br>'thumbnail_width' => 0,<br>'thumbnail_height' => 0,<br>'stats_comments' => 0,<br>'stats_views' => 1,<br>'stats_author' => 0,<br>'stats_date' => 0,<br>'stats_date_format' => '0',<br>'stats_category' => 0
<p> </p>
<p>);</p>
<p>wpp_get_mostpopular( $args );<br>?></p>
</div>

となります(長いですねぇ・・・書くだけで疲れました・・・)。条件を省略するとプラグイン標準の出力方法になるようになっているため、<?php wpp_get_mostpopular( $args );?>というテンプレートタグを入れるだけでこれだけの条件が付加されるのです。

ではこれを並べて表示してみます(赤字部分が条件を示すパラメーターです)。そしてついでに「使う」か「使わないか」という選択のものと、数字や文字で設定していくものも分けてみます。
【数字や文字で設定する項目】

  1. 表示する件数は10件‘limit’ => 10
  2. 表示する期間は直近24時間‘range’ => ‘daily’
  3. 表示数順に並べて表示する‘order_by’ => ‘views’
  4. 含める投稿タイプは「投稿」と「固定ページ」‘post_type’ => ‘post,page’
  5. 指定する投稿IDはなし(全部表示)‘pid’ => ‘none’
  6. カテゴリーの指定はなし(全カテゴリーから表示)‘cat’ => ‘none’
  7. 投稿したユーザーの指定はなし(全てのユーザーから表示)‘author’ => ‘none’
  8. タイトルの長さは先頭から25文字分を表示‘title_length’ => 25
  9. 抜粋の長さは指定しない(抜粋に入力されているすべての文を表示、文字の装飾はなし) ‘excerpt_length’ => 0, ‘excerpt_format’ => 0
  10. サムネイル画像のサイズは指定しない ‘thumbnail_width’ => 0, ‘thumbnail_height’ => 0
  11. 日付の形式を指定しない ‘stats_date_format’ => ‘0’

【表示するか否かで指定する項目】
この項目は〇〇する=1になっている項目を0にすれば〇〇しないになる、〇〇しない=1になっている項目を0にすれば〇〇するになる選択項目です。

  1. アクセスされる度に計算しなおして表示する‘freshness’ => 0
  2. タイトルは文字数で計算する(単語の数ではない)‘title_by_words’ => 0
  3. 抜粋は文字数で計算する(単語の数ではない)‘excerpt_by_words’ => 0
  4. コメント数は表示しない ‘stats_comments’ => 0
  5. アクセス数(PV数)は表示しない‘stats_views’ => 1
  6. 投稿したユーザーは表示しない‘stats_author’ => 0
  7. 公開日は表示しない‘stats_date’ => 0
  8. カテゴリー名は表示しない‘stats_category’ => 0

という風に分けられます。ここで1つ例をあげれば、「公開日は表示しない」となっているのに日付の形式を設定しても表示されないということになりますから、思うように表示されないときはチェックが必要です。

そしてテンプレートタグでは

  1. 数字(数値)のものはそのまま記述する
  2. 複数の数値を含める場合は「’1つ目の数字,2つ目の数字’」という風に記述する
  3. 文字のものは「”」で囲って記述する
  4. 複数の文字列を含める場合は「’1つ目の文字列,2つ目の文字列’」という風に記述する
  5. さらに条件がある行は最後に「,」をつけ、条件がここで終わりというときは「,」をつけない

というお約束事項があり、これを
「<?php $args = array(」から「); wpp_get_mostpopular( $args ); ?>」の間に書いていくことで条件を設定することができるのです。

そして、最終的にこの条件を満たしたリストを出力するために
‘wpp_start’ => ‘<ul>’,
‘post_html’ => ‘<li>{thumb} <a href=”{url}”>{text_title}</a></li>’
‘wpp_end’ => ‘</ul>’,
という3行の条件を追加するのです。これも「<?php $args = array(」から「); wpp_get_mostpopular( $args ); ?>」の間に書きます。
【何を表示するかを決める】
この中の{thumb}{url}{text_title}などは何を表示するかという部分になり
{thumb}・・・サムネイル画像
{title} ・・・タイトル(記事へのリンクあり)
{summary}・・・抜粋の内容
{url} ・・・URL
{text_title} ・・・タイトル(記事へのリンクなし)
{author} ・・・投稿者名
{category}・・・カテゴリー名
{views}・・・閲覧数
{comments}・・・コメント数
{date}・・・公開日
を自由に挿入して1件1件のリストを完成させていくのです。
【リストマークも変更できる】
上のコードは単純にタイトル先頭へ「・」を入れるリストタグなので、リスト表示しつつ「・」がいらないときは
‘wpp_start’ => ‘<ul style=”list-style:none;”>’,
‘wpp_end’ => ‘</ul>’
を使います

また、順位を表示する番号を表示したい場合には
‘wpp_start’ => ‘<ol>’,
‘wpp_end’ => ‘</ol>’
と番号付きリストタグの「ol」を使えば表示できます

以上を踏まえて、当サイトでたくさんの記事がある
プラグインの紹介と日本語翻訳を書いているカスタム投稿タイプの中から
24時間のデータを解析して5件表示し
サムネイル画像の幅と高さをそれぞれ50ピクセルにし
マークなしのリストで表示し
各記事が紐づくカテゴリー名を表示させ
た上で、サムネイル画像-リンク付きのタイトル-タイトルとカテゴリーを区切る「/」の文字-カテゴリー名を表示するテンプレートタグは

<div style="background-color: #ffffff;"><?php<br>$args = array(<br>'range' => 'daily',<br>'post_type' => 'wppi',<br>'limit' => 5,<br>'thumbnail_width' => 50,<br>'thumbnail_height' => 50,<br>'wpp_start' => '<ul style="list-style:none;">',<br>'stats_category' => 1,<br>'post_html' => '<li>{thumb_img} <a href="{url}">{text_title}</a>/{category} </li>',<br>'wpp_end' => '</ul>'<br>);
<p> </p>
<p>wpp_get_mostpopular( $args );<br>?></p>
</div>

となります。長いこと書きましたがご理解いただけましたか??自身のサイトである程度アクセスのある状態の中でWordPress Popular Postsを動かしているようなら、一度実際にコードを書いて試してみてくださいね。

QA AnalyticsQA Analytics

ショートコードで表示する方法

前項で長々と書いてきた条件をデフォルトのショートコード内へ追記することで条件の追加ができます

デフォルトでの設定で全部表示は

[wpp]

これに少しずつ条件を追加していった例を紹介します

5個だけ表示

[wpp limit=5]

5個だけ表示して週間にする

[wpp limit=5 range=”weekly”]

5個だけ表示して週間にし、表示数を非表示にする

[wpp limit=5 range=”weekly” stats_views=0]

5個だけ表示して週間にし、表示数を非表示にする、プラグイン紹介と翻訳の投稿タイプだけ表示

[wpp limit=5 range=”weekly” stats_views=0 post_type='wppi,japanizewp']

といった感じで条件の追加ができます。最後のところでプラグイン紹介と翻訳の投稿タイプという複数条件を設定してみました
post_type=’wppi,japanizewp’
という記述です。複数ある場合もテンプレートタグと同じように「’1つ目の条件,2つ目の条件’」とすることで複数条件が設定できますから、カテゴリーや投稿IDでの絞り込みはこの方法で行うといいでしょう。

最後に

長い文章をがんばってお読みいただきありがとうございました。実に7500文字に及ぶページとなってしまいました(正確にはランキング表示部分は文字としてカウントされませんから10000文字超えの文章です)。

投稿などへ挿入する場合は同じ表現をするのでもショートコードを使った方がよっぽどすっきりできることが分かりますね。ただ、テンプレートタグで表示する場合の方法を知っていてショートコードを使うのと、知らずに使うのとでは結果に対する印象が違うと思いますから、理解してから使うようにすることをおすすめします。