ブログやメディアで人気記事を表示することによって、訪問者に人気の記事を読んでもらったり、どのような記事がメインのサイトなのかを伝えることができます。
WordPressでWebサイトを運営している場合、標準機能では人気記事を表示することができないため「WordPress Popular Posts」というプラグインを使用する方法が一般的です。
この記事では、WordPress Popular Postsを使って人気記事を表示する方法や、カスタマイズ方法を解説しています。
WordPressで人気の記事を表示する方法
WordPressで人気の記事を表示するには、WordPress Popular Postsというプラグインを使用します。
固定ページを新規作成
人気の記事を表示するために、新しく固定ページを作成しましょう。
本文に、下記のショートコードを貼り付けます。
1 | [wpp post_html='<li><a href="{url}">{title}</a></li>'] |
出力されるリストは、下記のようになります。
1 2 3 | <ul> <li><a href="...">投稿のタイトル</a></li> </ul> |
画像付きで人気記事ランキングを表示する
画像付きで人気記事ランキングを表示する場合は、本文に下記のショートコードを貼り付けます。
1 | [wpp thumbnail_width=120 thumbnail_height=120 post_html='<li>{thumb}{title}</li>'] |
1 2 3 4 5 6 | <ul> <li> <a href="..."><img src="..." width="120" height="120"></a> <a href="...">Google XML SitemapsでXMLサイトマップを作成する方法</a> </li> </ul> |
画像と抜粋付きで人気記事ランキングを表示する
まず、下記のショートコードを下記のように本文に貼り付けます。
1 | [wpp thumbnail_width=120 thumbnail_height=120 excerpt_format=0 excerpt_length=120 post_html='<li>{thumb}{title}<p>{summary}</p></li>'] |
そうすると、下記のように人気記事ランキングのHTMLが出力されます。
1 2 3 4 5 6 7 8 9 | <ul> <li> <a href="..."> <img src="..."> </a> <a>記事のタイトル</a> <p>記事の抜粋文</p> </li> </ul> |
オプションで表示される記事をカスタマイズ
ショートコードで使用できるタグ
- {thumb}
- (リンクありで投稿・固定ページのサムネイル画像を表示 (thumbnail_width と thumbnail_height が必要))
- {thumb_img}
- (投稿・固定ページへのリンクなしでサムネイル画像を表示 (thumbnail_width と thumbnail_height が必要))
- {thumb_url}
- (サムネイルの URL を返す (thumbnail_width と thumbnail_height が必要))
- {title}
- (リンクされた投稿・固定ページのタイトルを表示)
- {pid}
- (投稿・固定ページの ID を表示)
- {summary}
- (投稿・固定ページの本文の抜粋を表示 (excerpt_length に0より大きい数が指定されている必要があります))
- {stats}
- (デフォルト統計タグを表示)
- {rating}
- (投稿・固定ページの現在のレートを表示 (WP-PostRatings がインストールされていて有効化されている必要があります))
- {score}
- (投稿・固定ページのレートを数値で表示 (WP-PostRatings がインストールされていて有効化されている必要があります))
- {url}
- (投稿・固定ページの URL を表示)
- {text_title}
- (リンクなしで投稿・固定ページのタイトルを表示)
- {author}
- (投稿者名を返す (stats_author=1 が必要))
- {category}
- (投稿のカテゴリーの返す (stats_category=1 が必要))
- {taxonomy}
- (リンクされたタクソノミー名を返す (stats_taxonomy=1 が必要))
- {views}
- (閲覧数のみを返す (テキストなし))
- {comments}
- (コメントカウントのみ (テキストなし) を返す (stats_comments=1 が必要))
- {date}
- (投稿/固定ページの投稿時間を返す (stats_date=1 が必要))
ショートコードで使用できるパラメータ
WordPress Popular Postsでは、パラメータを指定することで表示される記事一覧をカスタマイズすることができます。
- header
- リストの見出しを設定する
- 使用可能な値:テキスト文字列
- デフォルト:なし
- header_end
- リストの見出しの閉じタグを設定
- 使用可能な値:テキスト文字列
- デフォルト:</h2>
- range
- WordPress Popular Posts に指定した時間範囲で人気記事を取得させます
- 使用可能な値:”last24hours”, “last7days”, “last30days”, “all”, “custom”
- デフォルト:last24hours
- time_unit
- 時間範囲のカスタムの時間単位を指定
- 使用可能な値:minute, hour, day, week, month
- デフォルト:hour
- order_by
- 人気の投稿の並べ替えオプションを設定する
- 使用可能な値:”comments”, “views”, “avg” (1日あたりの平均ビュー用)
- デフォルト:views
- pid
- 特定の投稿IDを設定することで、WordPress Popular Posts のリストから除外できます。
- 使用可能な値:テキスト文字列
- デフォルト:なし
- taxonomy
- 設定されていると WordPress Popular Posts は投稿をタクソノミーによって絞り込みます。
- 使用可能な値:テキスト文字列
- デフォルト:なし
- author
- 設定すると WordPress Popular Posts は指定されたユーザーIDに属するすべての投稿を取得します。
- 使用可能な値:テキスト文字列
- デフォルト:なし
- title_by_words
- これを1に設定すると、WordPress Popular Posts は投稿の抜粋を文字列に変わって、”n”ワードに短縮します
- 使用可能な値:1 (true), (0) false
- デフォルト:0
- excerpt_format
- 設定すると WordPress Popular Posts は投稿の抜粋のすべてのスタイリングタグ(太字や斜体など)やリンクタグを保ちます
- 使用可能な値:1 (true), (0) false
- デフォルト:0
- thumbnail_width
- 現在のサーバー設定で許可されている状態でこれを設定すると、投稿のサムネイルを表示できます。この属性はサムネイルの幅を設定します
- 使用可能な値:正の整数
- デフォルト:0
- rating
- WP-PostRatings プラグインが有効化されている状態でこれを設定すると、WordPress Popular Posts は各人気記事のレートを表示します
- 使用可能な値:1 (true), (0) false
- デフォルト:0
- stats_views
- 設定されていると WordPress Popular Posts は指定された時間範囲内に獲得した表示数を表示するようになります。
- 使用可能な値:1 (true), (0) false
- デフォルト:1
- stats_date
- 設定すると WordPress Popular Posts はリスト内に各人気記事の投稿した日付を表示します
- 使用可能な値:1 (true), (0) false
- デフォルト:0
- stats_category
- 設定されていると WordPress Popular Posts は各投稿の設定されたカテゴリーを表示するようになります。
- 使用可能な値:1 (true), (0) false
- デフォルト:0
- wpp_start
- リストの開始タグを設定する
- 使用可能な値:テキスト文字列
- デフォルト:<ul>
- post_html
- 各投稿の HTML 構造を設定する
- 使用可能な値:テキスト文字列、カスタム HTML.
- デフォルト:<li>{thumb} {title} <span class=”wpp-meta post-stats”>{stats}</span></li>
サイドバーに人気記事を表示する
サイドバーに人気記事を表示する場合は、ウィジェットを使用します。
まずは、WordPress管理画面の「外観」→「ウィジェット」を開きます。
サイドバーに「Popular Posts」というウィジェットを追加しましょう。すると、下記のようにウィジェットの詳細設定を行う画面が表示されます。
こちらは設定項目を入力していくと表示される記事の設定が行えるので、ショートコードを使って表示するよりも簡単に済みます。