Display Postsは投稿記事一覧をカテゴリーやページIDで表示するプラグイン

Display Postsとは

WordPressプラグイン Display Posts の主なセールスポイントは、簡単なショートコードを使って、柔軟に投稿のリストを表示できる点です。

新着記事一覧、関連記事一覧、人気記事（コメント数順など）の表示、サイトマップ的なコンテンツ一覧など、ウェブサイト上のさまざまなコンテンツリスト作成に活用できます。

主な特徴とできることは以下の通りです。

• ショートコードによる簡単表示: [　display-posts ] というシンプルなショートコードを投稿や固定ページ、ウィジェットなどに記述するだけで、最新の投稿リストを表示できます。
• 豊富なパラメータで表示をカスタマイズ:
  • フィルタリング: カテゴリ、タグ、投稿ID、作成者、投稿タイプ、日付など、様々な条件で表示するコンテンツを絞り込むことができます。
  • 表示要素の制御: タイトル、抜粋、アイキャッチ画像、日付、コメント数などを表示するかどうか、そしてその表示方法（例：アイキャッチ画像のサイズ）を細かく設定できます。
  • 並べ替え: 新しい順、古い順、タイトル順、コメント数順など、任意の基準でコンテンツを並べ替えることができます。
  • 表示形式: リスト形式（箇条書き、番号付きリスト）、グリッド形式など、レイアウトを調整できます。
• 開発者向けの機能: テーマのスタイルに合わせるためのテンプレートパーツの利用や、出力フィルタを使って表示をさらに細かく制御することも可能です。
• 用途の多様性:
  • トップページに最新のニュースやブログ記事一覧を表示する。
  • 特定のカテゴリの関連記事をまとめて表示する。
  • 著者のプロフィールページにその著者の記事一覧を表示する。
  • サイドバーやフッターに人気の記事やおすすめ記事を表示する。
  • カスタム投稿タイプで作成したイベント情報などを一覧で表示する。

このプラグインを使うことで、WordPressの標準機能では難しい、柔軟で動的なコンテンツリストの表示を簡単に行うことができます。CSSの知識があれば、さらに見た目を細かく調整することも可能です。

利用数

Display Postsは、90,000以上のアクティブな有効インストール数があります。

これは、WordPressの公式プラグインディレクトリに記載されている情報に基づいています。

使い方

WordPressの「Display Posts」プラグインは、ショートコードを使って、特定の条件に合致する投稿や固定ページを簡単に表示できる便利なプラグインです。

基本的な使い方とよく使うパラメータについて説明します。

1. インストールと有効化

1. WordPressの管理画面にログインします。
2. 「プラグイン」>「新規追加」に進みます。
3. 検索ボックスに「Display Posts」と入力し、検索します。
4. 「Display Posts」プラグインを見つけたら、「今すぐインストール」をクリックし、その後「有効化」をクリックします。

2. ショートコードの基本的な使い方

有効化すると、投稿や固定ページの編集画面に「ショートコードを挿入」ボタンが表示されるようになります。このボタンをクリックすると、設定画面が表示され、必要な項目を選択・入力することでショートコードを簡単に生成できます。

手動でショートコードを入力する場合は、以下の基本形を覚えておくと良いでしょう。

[　display-posts　]
Code language: JSON / JSON with Comments (json)

これだけで、最新の投稿がいくつか表示されます。

3. よく使うパラメータと表示例

「Display Posts」プラグインの強力な点は、様々なパラメータを使って表示する投稿を細かく制御できることです。

3.1. 表示する投稿数の制御 posts_per_page

表示したい投稿の数を指定します。

• 例: 最新の投稿を5件表示する[　display-posts posts_per_page="5"　]

3.2. カテゴリで絞り込み category

特定のカテゴリの投稿のみを表示します。カテゴリのスラッグ（またはID）を指定します。

• 例: 「news」カテゴリの投稿をすべて表示する[display-posts category="news"]
• 例: 複数のカテゴリの投稿を表示する (カンマ区切り)[　display-posts category="news,events"　]

3.3. タグで絞り込み tag

特定のタグの投稿のみを表示します。タグのスラッグ（またはID）を指定します。

• 例: 「hot-topic」タグの投稿をすべて表示する[　display-posts tag="hot-topic"　]
• 例: 複数のタグの投稿を表示する (カンマ区切り)[　display-posts tag="tag1,tag2"　]

3.4. 特定の投稿IDを指定 id

特定の投稿IDの投稿のみを表示します。

• 例: IDが9と10の投稿を表示する[　display-posts id="9,10"　]　

3.5. 表示する要素の制御

表示する要素（タイトル、抜粋、アイキャッチ画像など）を制御できます。

• タイトルのみ表示: include_title="true" はデフォルトなので不要
• 抜粋を表示:[　display-posts include_excerpt="true"　]
• アイキャッチ画像を表示: image_size でサイズを指定できます（thumbnail, medium, large, fullなど）。[　display-posts include_image="true" image_size="thumbnail"　]
• 投稿日を表示:[　display-posts include_date="true"　]
• コンテンツ（本文）を表示:[　display-posts include_content="true"　]

3.6. 並び替え order と orderby

表示する投稿の並び順を指定します。

• 例: 日付の新しい順（デフォルト）[　display-posts orderby="date" order="DESC"　]
• 例: タイトル順（昇順）[　display-posts orderby="title" order="ASC"　] orderby には date (日付), title (タイトル), ID (ID), comment_count (コメント数), rand (ランダム) などが指定できます。 order には ASC (昇順) または DESC (降順) を指定します。

4. より高度な使い方

• 特定の投稿タイプを表示: post_type="page" や post_type="custom_post_type" のように指定することで、固定ページやカスタム投稿タイプを表示できます。
• 特定の著者で絞り込み: author="username" で特定の著者の投稿のみを表示できます。
• 除外する投稿: exclude="1,2,3" で特定の投稿IDを除外できます。
• 特定のタクソノミーで絞り込み: taxonomy, tax_term, tax_operator を組み合わせることで、より複雑なタクソノミーでの絞り込みが可能です。

5. ショートコードの組み合わせ例

例えば、「ニュース」カテゴリの最新5件の投稿を、アイキャッチ画像と投稿日と共に表示したい場合：

[　display-posts category="news" posts_per_page="5" include_image="true" image_size="medium" include_date="true"　]
Code language: JSON / JSON with Comments (json)

主なパラメーター

ショートコードにパラメーター（引数）を追加することで、表示するコンテンツや表示形式を細かく制御できます。

パラメーター	説明	例
posts_per_page	表示する投稿の数を指定します。	[display-posts posts_per_page="5"] (5件表示)
category	表示するカテゴリのスラッグを指定します。（複数指定はカンマ区切り）	[display-posts category="news,topics"]
tag	表示するタグのスラッグを指定します。（複数指定はカンマ区切り）	[display-posts tag="plugin"]
post_type	投稿タイプを指定します。デフォルトはpost。固定ページはpage。	[display-posts post_type="page"]
orderby	投稿の並べ替え基準を指定します。date (日付)、title (タイトル)、comment_count (コメント数) など。	[display-posts orderby="title"] (タイトル順)
order	並び順を指定します。DESC (降順、新しい順/デフォルト) または ASC (昇順、古い順)。	[display-posts order="ASC"]
image_size	アイキャッチ画像のサイズを指定します。thumbnail、medium、largeなど。	[display-posts image_size="thumbnail"]
include_date	投稿日を表示するかどうか指定します。trueまたはfalse。	[display-posts include_date="true"]
include_excerpt	投稿の抜粋を表示するかどうか指定します。trueまたはfalse。	[display-posts include_excerpt="true"]
wrapper	リストを囲むHTMLタグを指定します。ul (デフォルト、番号なしリスト)、ol (番号付きリスト)、div。	[display-posts wrapper="div"]

まとめ

「Display Posts」プラグインは、ショートコードのパラメータを組み合わせることで、WordPressサイト内で様々な投稿リストを柔軟に作成できます。まずは簡単なショートコードから試してみて、必要に応じてパラメータを追加していくと良いでしょう。詳細な情報は、WordPress.comの公式プラグインページや、関連のチュートリアルサイトで確認できます。

記事をグリッド表示する

Display Postsで記事をグリッド表示するには、ショートコードに加えてカスタムCSSを追加する必要があります。

基本的な手順は以下の通りです。

1. ショートコードの設定

グリッド表示を適用するために、ショートコードで以下のパラメーターを使用します。

• wrapper="div": リストの代わりにdiv要素で囲みます（デフォルトはul）。
• wrapper_class="display-posts-listing grid": グリッドのスタイルを適用するためのカスタムクラス（ここではgrid）を追加します。
• image_size="medium": サムネイル画像を表示するために指定します（サイズは任意）。

例:

[display-posts image_size="medium" wrapper="div" wrapper_class="display-posts-listing grid" posts_per_page="12"]
Code language: JSON / JSON with Comments (json)

2. グリッド表示用CSSの追加

WordPressのカスタムCSS（「外観」→「カスタマイズ」→「追加CSS」など）に、以下のCSSコードを追加します。これにより、ショートコードで指定したdisplay-posts-listing gridクラスにグリッドレイアウトが適用されます。

現代的な方法として、CSS Gridを使うのが最も簡単でレスポンシブにも対応しやすいです。

CSS Gridを使ったCSSの例（3カラム表示）

/* Display Posts Shortcodeのグリッド用コンテナ */
.display-posts-listing.grid {
    display: grid;
    /* 3カラム、均等幅、レスポンシブ対応 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* グリッド間の隙間 */
    grid-gap: 20px; 
    margin: 0; /* ul要素のデフォルトマージンをリセット */
    padding: 0; /* ul要素のデフォルトパディングをリセット */
    list-style: none; /* リストマークを非表示 */
}

/* 各投稿アイテムのスタイル調整 */
.display-posts-listing.grid .listing-item {
    border: 1px solid #eee;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* タイトルなどの調整（必要に応じて） */
.display-posts-listing.grid .listing-item .title {
    font-size: 1.2em;
    margin-top: 10px;
    display: block;
}

/* 画像の表示調整 */
.display-posts-listing.grid .listing-item img {
    height: auto;
    max-width: 100%;
}
Code language: CSS (css)

ポイント

• grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); は、画面幅に応じて自動でカラム数と幅を調整します。
  • 280pxはカラムの最小幅です。これを基準にカラム数が決まります。
• grid-gap: 20px; は、グリッド内の行と列の間に20pxの余白を設定します。

このCSSを適用することで、[　display-posts ... wrapper_class="display-posts-listing grid"]を使った記事一覧がグリッド形式で表示されます。

注意点

WordPressの「Display Posts」プラグインは、記事の一覧表示を柔軟にカスタマイズできる便利なショートコードプラグインですが、いくつか注意点があります。

以下に主な注意点を挙げます。

1. パフォーマンスへの影響:
   • 多数の投稿を一度に表示したり、複雑なクエリ（特に多くのメタデータやカスタムフィールドを扱う場合）を使用したりすると、データベースクエリが増加し、ウェブサイトのロード時間に影響を与える可能性があります。
   • 特に大規模なサイトや共有ホスティング環境では、この点に注意し、キャッシュプラグインとの併用を検討することをおすすめします。
2. 表示件数の上限:
   • posts_per_page パラメータで表示件数を指定できますが、極端に大きな数を指定するとパフォーマンスの問題につながります。
   • 公式サイトの情報では、最大表示数は100とされていますが、offset パラメータを使って複数のショートコードを連ねることで、それ以上の表示も可能とされています。しかし、この方法はパフォーマンスに影響を与える可能性があるため、慎重に利用すべきです。
3. カスタム投稿タイプとタクソノミー:
   • カスタム投稿タイプの指定は可能ですが、特定のタクソノミーで絞り込むことはできるものの、そのタクソノミー名そのものを表示することはできないという情報もあります。カスタム投稿タイプとタクソノミーを複雑に組み合わせる場合は、事前に動作確認を行うか、別の方法も検討する必要があるかもしれません。
4. ショートコードの入れ子（二重引用符）:
   • ショートコード内でさらにショートコードを使用する場合（入れ子にする場合）、引用符の扱いに注意が必要です。特に、二重引用符の入れ子を避けるようにしましょう。WordPressのショートコードの処理上、問題が発生する可能性があります。
5. 詳細な絞り込みの限界:
   • 高度なデータベースクエリや特定の条件での絞り込み（例：特定のユーザーが投稿した記事のみ、特定の期間内の記事のみなど、プラグインが直接サポートしていない複雑な条件）は、Display Postsだけでは対応できない場合があります。その場合は、WP_Query を直接使用するか、より多機能な別のプラグインを検討する必要があるでしょう。
6. SEOとユーザビリティ:
   • 過度な記事一覧表示は、ユーザーのスクロール量を増やし、目的の記事を見つけにくくする可能性があります。また、SEOの観点からも、重要なコンテンツが埋もれてしまわないように注意が必要です。適切なページネーションや「もっと見る」ボタンの導入などを検討しましょう。
7. キャッシュとの相性:
   • Display Postsプラグインは動的にコンテンツを生成するため、キャッシュプラグインを使用している場合は、コンテンツが正しく更新されるかどうかの確認が必要です。設定によっては、古い情報が表示され続ける可能性もあります。

これらの注意点を理解した上で、Display Postsプラグインを適切に活用することで、効果的な記事一覧表示を実現できます。

プラグインを意識したレンタルサーバーの選び方

多くのプラグインを使う予定であれば、最初からWordPressに特化・最適化されているレンタルサーバーを選ぶのが最も確実で快適です。

WordPress適性ランキング表

順位	サーバー名	特徴・強み	弱み・注意点	WordPress適性
1位	ConoHa WING（コノハ）	高速表示・国内最速級、WordPress簡単セットアップ、独自ドメイン永久無料、初心者〜上級者まで幅広く対応	料金はやや高め	◎ 非常に適している
2位	KAGOYA（カゴヤ）	WordPress専用サーバー「KUSANAGI」搭載で超高速、法人利用率高く安定性抜群、セキュリティ強化	個人利用にはややオーバースペック、料金は中〜高	◎ 高速・安定志向に最適
3位	さくらレンタルサーバー	老舗で信頼性高い、料金安め、安定稼働、サポート充実	表示速度はConoHaやKAGOYAに劣る	○ 安定志向に適している
4位	LOLIPOP（ロリポップ）	初心者向け、料金安い、WordPress簡単インストール、利用者が多く情報豊富	高負荷サイトには不向き、速度は中程度	△ 個人ブログや小規模サイト向け
5位	リトルサーバー	月額150円〜と圧倒的低価格、WordPress全プラン対応、無料SSL・自動バックアップあり	容量・転送量が小規模向け、サポートはメール中心で即応性に不安	△ 趣味ブログや学習用に最適

解説

• ConoHa WINGは「速さ・使いやすさ・機能」のバランスが最も良く、WordPress利用者に人気。
• KAGOYAは法人やビジネスサイトに強く、KUSANAGIによる超高速化が魅力。速度重視なら最適。
• さくらレンタルサーバは老舗で安心感があり、安定性重視の人におすすめ。
• LOLIPOPは初心者向けで安価だが、速度や高負荷対応は弱め。
• リトルサーバーは「とにかく安くWordPressを始めたい人」向け。小規模サイトや学習用に良いが、商用や大規模には不向き。

WordPressテーマ目的別比較表

WordPressテーマを選ぶにはデザインだけでなく、汎用性、アップデートの継続性、サポート体制、そして表示速度やSEO対策の強さといった要素を総合的に考慮することが重要です。目的にあった長く安心して使えるテーマを選ぶようにしたいものです。そこで、目的別に整理したWordPressテーマ比較表を以下にまとめました。 各テーマの特徴や利用目的を簡潔に比較できるようにしています。

テーマ名	主な目的・特徴	適した用途
RE:DIVER（リダイバー）	高速表示・SEO最適化に強い。アフィリエイトや収益化を意識した設計。	アフィリエイトブログ、収益化重視の個人ブログ
GOLD BLOG（ゴールドブログ）	ブログ運営に特化。シンプルで使いやすく、初心者でも扱いやすい。	個人ブログ、情報発信サイト
THE THOR（ザ・トール）	SEO・デザイン・収益化機能を網羅したオールインワンテーマ。広告管理やランキング機能も搭載。	アフィリエイト、企業サイト、収益化ブログ
Emanon（エマノン）	ビジネス向けデザイン。企業サイトやサービス紹介に適したテーマ。	コーポレートサイト、サービス紹介ページ
LIQUID PRESS（リキッドプレス）	WordPress公式登録の国産テーマ。企業サイトからブログまで幅広く対応。初心者でも安心。	企業サイト、オウンドメディア、ブログ、LP
STORK SE（ストークSE）	モバイルファースト設計。1カラムデザインでコンテンツを際立たせる。直感的操作が可能。	ブログ、アフィリエイト、ブランディングサイト
GOLD MEDIA（ゴールドメディア）	メディア運営に特化。SEO内部構造が強力で、収益化や効率的な運営を支援。	WEBメディア、アフィリエイトサイト、企業サイト

補足ポイント

• 収益化重視なら「RE:DIVER」「THE THOR」「GOLD MEDIA」が強力。
• 初心者向けブログなら「GOLD BLOG」「STORK SE」が扱いやすい。
• 企業サイト・ビジネス用途なら「Emanon」「LIQUID PRESS」が安心。
• メディア運営に特化したい場合は「GOLD MEDIA」が最適。

こうして見ると、「ブログ中心」か「企業サイト中心」か「収益化・メディア運営中心」かで選ぶテーマが大きく変わります。 あなたが作りたいサイトはどのタイプに近いですか？