WordPressのトップページにお知らせ欄を作る方法

当サイトはアフィリエイト広告を利用しています。

サイトのトップページに更新情報やイベント告知を「お知らせ」として表示すると、訪問者に最新情報を伝えることや、「このサイトはちゃんと運営されている」と信頼感を与えることができます。

そこで今回は、WordPressのトップページにお知らせ欄を作る方法をご紹介します。

「トップページにお知らせ欄を表示したいけど、やり方がよくわからない」という方は、この記事を参考に作成してみてくださいね。

目次表示

WordPressでお知らせ欄を作る3つの方法
WordPressでお知らせ一覧ページを作る方法
WordPressのトップページにお知らせ欄を作る方法
まとめ

WordPressでお知らせ欄を作る3つの方法

WordPressでお知らせ欄を作る方法には、以下のようなものがあります。

最近の投稿ブロックを使う
プラグイン「Display Posts」を使う
段落ブロックを使う

方法1：最近の投稿ブロックを使う

最近投稿した記事のタイトルを、その記事へのリンク付きでお知らせとして表示したい場合は、最近の投稿ブロックを使う方法がおすすめです。デフォルトの設定だと、新着5記事分のタイトルが表示されます。

ブロックの設定により、日付の表示、カテゴリーの限定、項目数の指定なども可能です。

方法2：プラグイン「Display Posts」を使う

Display Postsプラグインを使って作成したお知らせ欄のスクリーンショット

日付やリンク付き記事タイトルだけでなく、リンク付きカテゴリー名も表示したい場合は、「Display Posts」というプラグインを使う方法がおすすめです。

Display Posts – Easy lists, grids, navigation, and more

Display Postsを使う場合は、専用のショートコードを使用します。ショートコードにパラーメータを追加すれば、細かいカスタマイズも可能です。

方法3：段落ブロックを使う

記事タイトルとは関係ない文言でお知らせを表示したい場合や、記事へのリンクが不要だったり、テキストの一部にリンクを設定したりしたい場合は、段落ブロックを使う方法がおすすめです。

複数の段落ブロックを使ってグループ化を駆使すれば、上の画像のように2カラム表示にもできます。

WordPressでお知らせ一覧ページを作る方法

お知らせ欄に「もっと見る」などの文言でお知らせ一覧ページへのリンクを表示する場合、リンク先となるお知らせ一覧ページを作成する必要があります。

特定のカテゴリーの記事一覧ページをお知らせ一覧ページにしたい場合は、そのカテゴリーアーカイブ（通常はhttps://ドメイン名/category/カテゴリースラッグ）をリンク先に指定すれば良いですが、投稿記事全体の一覧ページをお知らせ一覧ページにしたい場合は、以下のような手順で作成する必要があります。

固定ページで空のページを作成し、わかりやすいタイトル（例：投稿記事一覧）とスラッグ（例：posts）を付ける
［設定］⇒［表示設定］の「ホームページの表示」項目で「固定ページ」を選択し、「投稿ページ」のドロップダウンリストで1で作成した記事のタイトル（例：投稿記事一覧）を選択する

1で作成した記事のスラッグが「posts」の場合、https://ドメイン名/postsが投稿記事一覧ページ＝お知らせ一覧ページとなります。

詳しくは以下の記事で解説していますので、そちらを参考にしてみてください。

WordPressで固定ページに投稿記事一覧を表示する方法

WordPressのトップページにお知らせ欄を作る方法

これまでの内容を踏まえて、WordPressのトップページにお知らせ欄を作る方法をご紹介します。手順は以下のとおりです。

お知らせ欄のタイトルを設定する
お知らせの日付や内容を設定する
お知らせ一覧ページへのリンクを設定する
すべてのブロックをグループ化する
各ブロックにクラスを追加する
トップページを更新する
CSSでデザインを整える

手順1：お知らせ欄のタイトルを設定する

トップページの編集画面を開いたら、まずお知らせ欄のタイトルを設定します。

ブロックインサーターから［見出し］をクリックします。

見出しブロックが追加されたら「お知らせ」などと入力します。

手順2：お知らせの日付や内容を設定する

次に、お知らせの日付や内容を設定します。

ブロックインサーターから［最近の投稿］［ショートコード］［段落］のいずれかをクリックします。プラグイン「Display Posts」を使う場合はショートコードブロックを選択してください。

最近の投稿ブロックを使う場合

最近の投稿ブロックを使う場合は、必要に応じて［設定］⇒設定サイドバーの各項目を変更します。

プラグイン「Display Posts」を使う場合

プラグイン「Display Posts」を使う場合は、ショートコードブロックに以下のようなショートコードを入力します。

[display-posts]

このショートコードにパラメータを追加すると、日付やカテゴリーを表示したり、特定のカテゴリーに限定できたりします。Display Postsで使える主なパラメータは以下のとおりです。

パラメータ	初期値	説明	使用例
post_type	post （投稿）	使用する投稿タイプ（投稿、固定ページ、カスタム投稿タイプ）	`post_type="page"` （固定ページ）
posts_per_page	10	表示する投稿数	`posts_per_page="5"`
category_id	空（全記事）	表示する投稿のカテゴリーID	`category_id="1"` （カテゴリーID1の記事）
include_date	空（非表示）	投稿タイトルの後に日付を表示する	`include_date="true"` （表示）
date_format	(n/j/Y) （例：(30/4/2025)）	使用する日付形式	`date_format="Y年m月d日"` （例：2025年4月30日）
category_display	空（非表示）	現在の投稿が属するカテゴリーを表示する	`category_display="true"` （表示）
category_label	Posted in:	カテゴリーの前に表示するラベル	`category_label=""` （何も表示しない）
wrapper_class	display-posts-listing	投稿リストに付与するクラス名	`wrapper_class="my-grid-layout"`

たとえばショートコードを以下のようにカスタマイズするとします。

[display-posts posts_per_page="5" include_date="true" date_format="Y年m月d日" category_display="true" category_label="" wrapper_class="notice-body"]

すると、リスト表示が以下のように変わります。タイトル→日付→カテゴリーという並びになっていますが、この並び順はCSSで変更可能です。

Display Postsのデフォルトのショートコードの表示結果 — 基本のショートコードの表示結果

Display Postsのショートコードをカスタマイズしたときの表示結果 — カスタマイズしたショートコードの表示結果

段落ブロックを使う場合

段落ブロックを使う場合は、1つ目の段落ブロックに日付を、2つ目の段落ブロックにお知らせ内容を入力し、この2つのブロックを選択してブロックツールバーの［グループ化］をクリックします。

全体が青い枠で囲まれたらグループ化できています。

お知らせの数だけこの作業を繰り返し、お知らせの作成が完了したら、すべてのグループをさらにグループ化して一つにまとめます。最終的に以下のようになればOKです。

手順3：お知らせ一覧ページへのリンクを設定する

次に、お知らせ一覧ページへのリンクを設定します。

ブロックインサーターから［ボタン］をクリックします。

ボタンブロックが追加されたら、「もっと見る」などとボタンの文言を入力します。

ブロックツールバーの［リンク］をクリックし、リンク先のURLを入力して［Enter］で確定します。

手順4：すべてのブロックをグループ化する

次に、すべてのブロックをグループ化します。

手順5：各ブロックにクラスを追加する

次に、各ブロックにクラスを追加します。これは、CSSでデザインを整えるためです。

ブロックにクラスを追加するには、対象のブロックを選択した状態で設定サイドバーの［高度な設定］をクリックし、「追加CSSクラス」にクラス名を入力します。

グループブロックをうまく選択できない場合は、対象のグループに属する子ブロックを選択した状態で、ブロックツールバー左端の［親ブロックを選択：グループ］をクリックしてみてください。

手順6：トップページを更新する

次に、［保存］をクリックしてトップページを更新します。

現段階ではお知らせ欄は以下のような見た目です（デザインはお使いのテーマによって変わります）。

手順7：CSSでデザインを整える

最後に、必要に応じてCSSでお知らせ欄のデザインを整えます。

今回は以下のようなデザインにしてみたいと思います。

最近の投稿ブロックを使って作成したお知らせ欄のPC表示のスクリーンショット — 最近の投稿ブロックの場合のPC表示

最近の投稿ブロックを使って作成したお知らせ欄のスマホ表示のスクリーンショット — 最近の投稿ブロックの場合のスマホ表示

Display Postsプラグインを使って作成したお知らせ欄のPC表示のスクリーンショット — Display Postsプラグインの場合のPC表示

Display Postsプラグインを使って作成したお知らせ欄のスマホ表示のスクリーンショット — Display Postsプラグインの場合のスマホ表示

段落ブロックを使って作成したお知らせ欄のPC表示のスクリーンショット — 段落ブロックの場合のPC表示

段落ブロックを使って作成したお知らせ欄のスマホ表示のスクリーンショット — 段落ブロックの場合のスマホ表示

そのためには、子テーマのstyle.cssに以下のようなCSSを追加します。

最近の投稿ブロックの場合

/* グループブロック_お知らせ欄全体 */
.wp-block-group.notice-card {
  padding: 10px;
}

.wp-block-group.notice-card a {
  transition: all 0.2s;
}

/* H2見出しブロック_お知らせ欄のタイトル */
h2.wp-block-heading.notice-title {
  margin: 0 0 10px;
  padding: 10px 1em;
  text-align: center;
  background-color: transparent;
  font-size: 1.5rem;
}

/* ボタンブロック_お知らせ一覧ページへのリンクボタン */
.wp-block-button.notice-button {
  margin: 0 auto;
}

.wp-block-button.notice-button a {
  margin: 0;
  padding: 5px 30px;
  border: 1px solid #346bcb;
  border-radius: 100px;
  background-color: #fff;
  color: #346bcb;
  font-size: 1.2rem;
}

.wp-block-button.notice-button a:hover {
  background-color: #346bcb;
  color: #fff;
}

/* 最近の投稿ブロック_投稿リスト */
ul.wp-block-latest-posts__list.notice-body {
  margin: 0 0 16px;
  padding: 0;
}

/* 最近の投稿ブロック_投稿リスト項目 */
ul.wp-block-latest-posts__list.notice-body li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 5px 0;
}

ul.wp-block-latest-posts__list.notice-body li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/* 最近の投稿ブロック_投稿の日付 */
ul.wp-block-latest-posts__list.notice-body li time.wp-block-latest-posts__post-date {
  order: 1;
  width: 15ch;
  font-size: 1rem;
}

/* 最近の投稿ブロック_投稿タイトル */
ul.wp-block-latest-posts__list.notice-body li a.wp-block-latest-posts__post-title {
  order: 2;
  flex: 1;
  font-size: 1rem;
}

/*834px以下*/
@media screen and (max-width: 834px){

  /* 最近の投稿ブロック_投稿リスト項目 */
  ul.wp-block-latest-posts__list.notice-body li {
    flex-direction: column;
    gap: 5px;
  }
  
  /* 最近の投稿ブロック_投稿タイトル・投稿の日付 */
  ul.wp-block-latest-posts__list.notice-body li .wp-block-latest-posts__post-title,
  ul.wp-block-latest-posts__list.notice-body li .wp-block-latest-posts__post-date {
    flex: none;
    width: 100%;
  }
  
}

クラス名は以下のようにします。

プラグイン「Display Posts」を使う場合

/* グループブロック_お知らせ欄全体 */
.wp-block-group.notice-card {
  padding: 10px;
}

.wp-block-group.notice-card a {
  transition: all 0.2s;
}

/* H2見出しブロック_お知らせ欄のタイトル */
h2.wp-block-heading.notice-title {
  margin: 0 0 10px;
  padding: 10px 1em;
  text-align: center;
  background-color: transparent;
  font-size: 1.5rem;
}

/* ボタンブロック_お知らせ一覧ページへのリンクボタン */
.wp-block-button.notice-button {
  margin: 0 auto;
}

.wp-block-button.notice-button a {
  margin: 0;
  padding: 5px 30px;
  border: 1px solid #346bcb;
  border-radius: 100px;
  background-color: #fff;
  color: #346bcb;
  font-size: 1.2rem;
}

.wp-block-button.notice-button a:hover {
  background-color: #346bcb;
  color: #fff;
}

/* Display Posts_投稿リスト */
ul.notice-body {
  margin: 0 0 16px;
  padding: 0;
}

/* Display Posts_投稿リスト項目 */
ul.notice-body li.listing-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 5px 0;
}

ul.notice-body li.listing-item:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/* Display Posts_投稿の日付 */
ul.notice-body li.listing-item .date {
  order: 1;
  width: 15ch;
  font-size: 1rem;
}

/* Display Posts_投稿カテゴリー */
ul.notice-body li.listing-item .category-display {
  order: 2;
  width: 15ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

ul.notice-body li.listing-item .category-display a {
  background-color: #555;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.2;
}

ul.notice-body li.listing-item .category-display a:hover {
  opacity: 0.8;
}

/* Display Posts_投稿カテゴリーのラベル */
ul.notice-body li.listing-item .category-display-label {
  display: none;
}

/* Display Posts_投稿タイトル */
ul.notice-body li.listing-item a.title {
  order: 3;
  flex: 1;
  font-size: 1rem;
}

/*834px以下*/
@media screen and (max-width: 834px){

  /* Display Posts_投稿リスト項目 */
  ul.notice-body li.listing-item {
    flex-direction: column;
    gap: 5px;
  }

  /* Display Posts_投稿の日付 */
  ul.notice-body li.listing-item .date {
    width: 100%;
  }

  /* Display Posts_投稿カテゴリー */
  ul.notice-body li.listing-item .category-display {
    width: 100%;
    flex-direction: row;
  }
  	
  /* Display Posts_投稿タイトル */
  ul.notice-body li.listing-item a.title {
    flex: none;
    width: 100%;
  }
}

クラス名は以下のようにします。

段落ブロックの場合

/* グループブロック_お知らせ欄全体 */
.wp-block-group.notice-card {
  padding: 10px;
}

.wp-block-group.notice-card a {
  transition: all 0.2s;
}

/* H2見出しブロック_お知らせ欄のタイトル */
h2.wp-block-heading.notice-title {
  margin: 0 0 10px;
  padding: 10px 1em;
  text-align: center;
  background-color: transparent;
  font-size: 1.5rem;
}

/* ボタンブロック_お知らせ一覧ページへのリンクボタン */
.wp-block-button.notice-button {
  margin: 0 auto;
}

.wp-block-button.notice-button a {
  margin: 0;
  padding: 5px 30px;
  border: 1px solid #346bcb;
  border-radius: 100px;
  background-color: #fff;
  color: #346bcb;
  font-size: 1.2rem;
}

.wp-block-button.notice-button a:hover {
  background-color: #346bcb;
  color: #fff;
}

/* グループブロック＿投稿リスト */
.wp-block-group.notice-body {
  margin: 0 0 16px;
  padding: 0;
}

/* グループブロック＿投稿リスト項目 */
.wp-block-group.notice-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 5px 0;
}

.wp-block-group.notice-entry:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/* 段落ブロック_投稿の日付 */
.wp-block-group.notice-entry p.notice-date {
  width: 15ch;
  margin: 0;
  font-size: 1rem;
}

/* 段落ブロック_投稿タイトル */
.wp-block-group.notice-entry p.notice-text {
  flex: 1;
  margin: 0;
  font-size: 1rem;
}

/*834px以下*/
@media screen and (max-width: 834px){

  /* グループブロック＿投稿リスト項目 */
  .wp-block-group.notice-entry  {
    flex-direction: column;
    gap: 5px;
  }
  
  /* 段落ブロック_投稿の日付・投稿タイトル */
  .wp-block-group.notice-entry p.notice-date,
  .wp-block-group.notice-entry p.notice-text {
    flex: none;
    width: 100%;
  }
  
}

クラス名は以下のようにします。