WordPressには関連記事を表示させるプラグインには Similar Posts などがありますが、Similar Postsと似たような使い方で、人気記事を表示させるプラグインとしてPopular Postsというプラグインも存在します。
人気記事を表示させるWordPress Popular PostsやGoogle Analytics Popular Postsなどの他のプラグインも使ってみた上での感触ですが、いずれも人気記事の「画像」を取得することが難しかったため当ブログではPopular Postsを導入することにしました。
Popular Posts のインストール
WordPress管理画面よりPopular Postsを検索するか、以下のページよりプラグインファイルをダウンロードします。http://plugins.jrseoservices.com/popular-posts-plugin
Popular Postsプラグインも Similar Posts 同様、色々な設定が可能なようですが、
■General Settings
■Output Settings
の設定だけで必要最低限のことが賄えたので、この2 項目に関して説明いたします。■Output Settings
Popular Posts の基本設定
まずは基本設定である「General Settings」ですが、ここでは記事表示数などの、あくまで基本的な項目に関しての設定を行いますので、サムネイル画像の取得には直接関係ありません。設定項目に問題がなければ、ページ下部の「Save General Settings」ボタンをクリックします。
Popular Posts の出力設定
続いてフロント画面の表示設定である「Output Settings」ですが、ページ右サイド「Available Tags」に利用できるタグ一覧が表示されております通り、Popular Postsプラグインでは使用できるタグがたくさん存在しますのでこのページでサムネイル画像取得を含めた人気記事のフロントへの出力設定を行っていくことになります。例えば、記事のタイトルを取得したい場合は
{title}
記事のURL（パーマリンク）を取得したい場合は
{url}
を利用します。カスタムタグ を利用してサムネイルの出力
以下のようにカスタムタグを利用できますので、{custom:}
例えば記事で使用している画像（URL）を取得したい場合は
{custom:images_url}
と記述した上で、記事投稿画面のカスタムフィールド欄でimages_urlの値を設定してあげれば、投稿記事内の画像を指定して取得することができます。Popular Posts の Output template 例
上記設定を元にOutput template:を以下のように記述することで、人気記事の「記事のタイトル」「URL（パーマリンク）」「サムネイル画像」を取得することができます。|
1 2 3 4 |
<li><a href="{url}"> <img src="https://webantena.net/wp-content/uploads/{custom:images_url}.png" class="attachment-medium" alt="{title}" /></a> <a href="{url}"><strong>{title}</strong></a><br />{excerpt}</li> |
CSSでレイアウト調整すれば、サムネイル画像を左（もしくは右）寄せにすることが可能になります。
人気記事が存在しない場合の処理
最後に「Default display if no matches:」で人気記事が存在しない場合の表示内容を指定してあげます。|
1 |
<li class="nopost">人気記事はありません</li> |
こんな感じです。
あとは任意で「Show nothing if no matches?」の、人気記事が存在しない場合の処理方法や「Sort Output By:leave blank for default order」のソート条件を設定するなどした上で、ページ下部の「Save Output Settings」ボタンをクリックします。
さらにオプションで「Filter Settings」ページより、ユーザー別、カテゴリ別の人気記事のフィルタリングも可能です。
コメント