Display PostsでWordPressの特定カテゴリーの1記事のみ新着で表示する方法

WordPressで特定カテゴリーの1記事のみ新着情報として表示したいことがあります。Display Postsを使って、特定カテゴリーの1記事のみ新着で表示する方法をご紹介します。

1 ショートコードで特定カテゴリーの1記事のみ表示出来るDisplay Posts
- 1.1 プラグインを追加してインストールする
- 1.2 詳細を表示をクリックして説明を表示する
2 記載したショートコード
- 2.1 記載したCSS
3 表示の確認

ショートコードで特定カテゴリーの1記事のみ表示出来るDisplay Posts

プラグインを追加してインストールする

「プラグインを追加」に「Display Posts」で検索すると、右の画像のプラグインが表示されるので、インストールして有効化する。

詳細を表示をクリックして説明を表示する

ショートコードの種類と説明

記載したショートコード

[display-posts category="inheritance-and-real-estate-seminar" posts_per_page="1" orderby="title" include_excerpt="true" excerpt_length="50" image_size="medium"]

記載したCSS

/* 投稿一覧全体の横並び設定 */
.display-posts-listing .listing-item {
  display: flex;
  align-items: flex-start;
  background: #dff0fa;
  padding: 20px;
  border-radius: 8px;
  gap: 25px;
}

/* ★ アイキャッチ画像を大きく（幅300pxに） */
.display-posts-listing .listing-item img {
  width: 500px; /* ←ここを好みで調整（例：350pxでもOK） */
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* テキスト部分（タイトル＋抜粋） */
.display-posts-listing .listing-item .title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 8px;
  display: block;
}

.display-posts-listing .listing-item .excerpt {
  font-size: 0.95em;
  color: #444;
  line-height: 1.6;
}

/* スマホでは縦並びに */
@media (max-width: 768px) {
  .display-posts-listing .listing-item {
    flex-direction: column;
  }
  .display-posts-listing .listing-item img {
    width: 100%;
    margin-bottom: 10px;
  }
}