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

WordPressプラグインの「Display Posts」は、WordPressの投稿や固定ページ、カスタム投稿タイプなどのコンテンツを、ショートコードを使って柔軟に表示させるための非常に人気のあるプラグインです。

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

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

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,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. 並び替え orderorderby

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

  • 例: 日付の新しい順(デフォルト)[ 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表示する投稿の数を指定します。 (5件表示)
category表示するカテゴリのスラッグを指定します。(複数指定はカンマ区切り)
tag表示するタグのスラッグを指定します。(複数指定はカンマ区切り)
post_type投稿タイプを指定します。デフォルトはpost。固定ページはpage
orderby投稿の並べ替え基準を指定します。date (日付)、title (タイトル)、comment_count (コメント数) など。 (タイトル順)
order並び順を指定します。DESC (降順、新しい順/デフォルト) または ASC (昇順、古い順)。
image_sizeアイキャッチ画像のサイズを指定します。thumbnailmediumlargeなど。
include_date投稿日を表示するかどうか指定します。trueまたはfalse
include_excerpt投稿の抜粋を表示するかどうか指定します。trueまたはfalse
  • Internal Link Juicerは内部リンク構築を自動化しSEOを強化する - Internal Link Juicerとは Internal Link Juicerは、ウェブサイト、特にWordPressサイトの内部リンク構築を自動化し、SEOを強化するための強力なプラグインです。 「Internal Link Juicer」の主なセールスポイントは、内部リンク設定の効率化とSEO効果の最大化にあります。 主な機能と特徴 要するに、Internal Link Juicerは […]
  • 中小企業がWordPressでコーポーレートサイトを制作する理由 - 多くの中小企業がWordPressでコーポレートサイトを制作しています。 WordPressは、その柔軟性、使いやすさ、そしてコストパフォーマンスの高さから、中小企業のコーポレートサイトの基盤として非常に人気があります。 なぜコーポーレートサイトにWordPressが選ばれるのか 中小企業のサイト制作のポイント 中小企業がコーポレートサイトを制作する際は、以下の点を考慮すると成功しやすいです。 W […]
  • Link WhisperはAIで内部リンク構築の効率化とSEO強化に特化したプラグイン - Link Whisperとは Link Whisper(リンクウィスパー)は、WordPressサイトの内部リンク構築を自動化するために設計されたプレミアムプラグインです。 Link Whisper(リンクウィスパー)の主なセールスポイントは、内部リンク構築の効率化とSEO強化に特化している点です。 主な特徴は以下の通りです。 要するに、Link Whisperは内部リンク作業の効率化と最適化を助 […]
  • AIでリスティング広告は運用の自動化と最適化(戦略的な業務へ) - AIによって、リスティング広告は運用の自動化と最適化、そして戦略的な業務へのシフトが加速するなど、大きな変化を迎えています。 主な変化のポイントは以下の通りです。 運用の自動化と最適化の高度化 検索行動の変化と広告の表示機会への影響 人間の広告運用者に求められる役割の変化 全体として、AIはリスティング広告を「職人技」から「データと戦略に基づいた自動化」へと変え、より効率的でパーソナライズされた広 […]
  • リスティング広告用ランディングページ(LP)の作り方 - リスティング広告用ランディングページ(LP)作成のステップ リスティング広告の成果を最大化するために、ランディングページ(LP)の作り方は非常に重要です。 成果の出るLPを作るための主な手順とポイントをまとめました。 1. 目的とターゲットの明確化 2. コンテンツの決定と構成(ワイヤーフレーム作成) 3. デザイン・実装・テスト 特に重要なLP作成のポイント ポイント 詳細 広告との一貫性 広告 […]
  • WordPressの内部リンク管理に役立つプラグイン - WordPressのサイト内リンク(内部リンク)管理に役立つプラグインですね。SEO対策としても非常に重要です。 いくつかの人気のあるプラグインやタイプがありますので、主なものをいくつかご紹介します。 おすすめのサイト内リンク管理プラグイン プラグイン名 主な機能 特徴・メリット Interlinks Manager 🔗 内部リンクのクリック数やCTRの追跡(分析機能)🔗 キーワードに基づいたリン […]
  • 代表的なマーケティングツールの種類と機能 - マーケティングツールとは、企業が製品やサービスを販売するためのマーケティング活動を効率化・自動化し、成果を最大化するために活用するソフトウェアやサービスの総称です。 人の手だけでは管理しきれない大量の顧客データや、複雑なマーケティングプロセスをシステムでサポートすることで、より効果的・効率的な活動を実現します。 代表的なマーケティングツールの種類と機能 マーケティングの目的やプロセスによって、様々 […]
  • リスティング広告の始め方(適した業種や費用) - 一般的に、リスティング広告の配信は、以下の8つのステップで進めることができます。主にGoogle広告やYahoo!広告といった媒体で行う場合の手順です。 リスティング広告を始める8ステップ 成功のための3つのコツ リスティング広告とは リスティング広告とは、GoogleやYahoo! JAPANなどの検索エンジンでユーザーが検索したキーワードに連動して、検索結果画面に表示される広告のことです。 「 […]
  • E-E-A-Tの経験・専門性・権威性・信頼性の具体的施策(SEOで重要) - E-E-A-Tの「経験」(Experience)とは? E-E-A-Tは、Googleがコンテンツの品質を評価する上で重視している4つの要素の頭文字をとったものです。 頭文字 要素 意味 E Experience 経験 E Expertise 専門性 A Authoritativeness 権威性 T Trustworthiness 信頼性 ご質問の「経験」(Experience)は、2022年1 […]
  • 店舗のPRにTikTok(ティックトック)を活用する - 店舗のPRにTikTokは非常に有効なツールです。特に若年層をターゲットにしている場合や、飲食業、美容室、アパレルなど、視覚的に訴えかける商品やサービスを扱っている店舗と相性が良いとされています。 店舗のPRにTikTok(ティックトック) 主なメリットと、効果的に活用するためのポイントをいくつかご紹介しますね。 TikTok活用のメリット 成功させるためのポイント もし店舗のPRにTikTokを […]
wrapperリストを囲むHTMLタグを指定します。ul (デフォルト、番号なしリスト)、ol (番号付きリスト)、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テーマ カスタマイズのしやすさ 傾向比較

一般的にWeb上で言われている評判や特徴に基づいて、「コード知識が少ない人が、手軽にデザインを変更できる(=カスタマイズしやすい)」という視点での傾向をまとめています。

順位 (※傾向)テーマ名主な特徴とカスタマイズの傾向
1THE THOR(ザ・トール)専用カスタマイザー機能が非常に豊富で、コードを書かずに細部までデザインを変更できる。多機能ゆえに操作が複雑に感じる場合もあるが、カスタマイズの幅は広い。
2STORK SE(ストークSE)シンプルな構造で、初心者でも迷いにくい設計。ブログ運営に特化した機能が充実しており、特別な知識がなくても見栄えの良いデザインになりやすい。
3Emanon(エマノン)マーケティング・ビジネスサイト向け。専用ブロックやウィジェットが用意されており、必要な要素を簡単に配置できる。多機能なPro版などがある。
4LIQUID PRESS(リキッドプレス)標準機能は抑えつつも、カスタマイズの拡張性が高い。知識があれば自由に変更しやすいが、THE THORほど専用設定項目は多くない傾向。
5RE:DIVER(リダイバー)比較的新しいテーマで、Webサイト制作向けのモダンなデザインが特徴。専用機能でのカスタマイズと、コードカスタマイズのバランスが取れている。
6GOLD MEDIA(ゴールドメディア) / GOLD BLOG(ゴールドブログ)開発元が同じで、多機能性を売りにしていることが多い。多機能ゆえに初心者には難しいと感じる部分もあるが、専用のオプションは用意されている。

注意点: 上記の順位は、あくまで「世間一般のレビューや機能の多さから推測される、コード不要で手軽にデザインを変更できる度合い」を示す傾向です。個々のテーマの最新バージョンや、あなたのスキルレベルによって評価は大きく変わります。

レンタルサーバー速度比較(高速順)

レンタルサーバーの速度は、プランや計測時期、計測方法によって変動しますが、ここでは複数の比較情報から得られた一般的な傾向に基づいて順位付けしています。

順位サーバー名特徴・補足
1位ConoHa WING(コノハ)最先端の技術と高速化機能で最速クラス。特にWordPress環境での評価が高い。
2位LOLIPOP(ロリポップ)
(ハイスピード/エンタープライズ)
ロリポップ!の上位プラン(ハイスピードなど)は高速化されており、高い評価。
3位KAGOYA(カゴヤ)安定した品質とサポートが特徴。他の高速サーバーには一歩譲るが、中堅クラスでは速度も十分。
4位さくらレンタルサーバー歴史が長く信頼性が高いが、近年は他社の高速サーバーと比べると速度面で劣る傾向にある。
5位リトルサーバー格安・小規模向けのサーバー。速度より価格や手軽さを重視するユーザー向け。

このランキングは、主にWebサイトの表示速度(TTFB: Time To First Byteなど)の公開されたベンチマーク結果に基づいています。

利用の目的(サイトの規模、WordPress利用の有無、予算など)によって最適なサーバーは変わってきます。速度を最優先するならConoHa WINGが、コストパフォーマンスを重視しつつ速度も求めるならロリポップ!のハイスピードプランが良い選択肢となります。