新着記事はユーザーに新しい情報を伝えるために、Webサイト・ブログには欠かせない要素です。
WordPressでブログを運営していく中でトップページだけでなく、固定ページや投稿の関連記事、サイドバーなどに新着記事を表示させたい時ってありますよね。
今回はWordPressで構築したサイトに新着記事を表示させる方法として、プラグインで簡単に表示させる方法をご紹介いたします。
目次
WordPressで記事一覧を表示させるおすすめプラグイン8選
What’s New Generator
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/ee0eb2d28e650e1ab0c914b0b807cad6-1024x561-1.png)
What’s New Generatorは投稿、固定ページ、ウィジェットに新着情報を表示するプラグインです。新着情報の日付、タイトルは自動的に表示されます。また、タイトルをクリックすると該当のページが開きます。
- NEW!マーク表示
- カスタム投稿タイプ(投稿または固定ページ)
- 表示件数の設定
- 表示順序の設定(公開日順・更新日順)
- カテゴリーフィルタリング
【公式】What’s New Generatorのダウンロード
Newpost Catch
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/62fd06dcce4c697c05a9880c2b17c1fc-1024x561-1.png)
Newpost CatchはWordPressのウィジェットから表示させたい箇所に、新着記事を表示させることができるプラグインです。ウィジェットでWebサイトの変更ができるWordPressテーマを利用していると、色々なところに新着記事の表示が可能です。
- カスタム投稿タイプ(投稿または固定ページ)
- 表示件数の設定
- サムネイル表示
- カテゴリー、タグ、IDでのフィルタリング
WordPress Popular Posts
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/398e43f2e51890281808579015e1a60b-1024x561-1.png)
WordPress Popular Postsはさまざまなカスタマイズができる上で新着記事を表示させることができるプラグインです。
- 特定の時間範囲(過去24時間、過去7日間、過去30日間など)
- カスタム投稿タイプ(投稿やページ以外の表示)
- サムネイル表示
- 並べ替え(コメント数、視聴回数、1日の平均視聴回数)
- 投稿リストのスタイル設定
- 統計ダッシュボード
- キャッシュ機能
Recent Posts Widget Extended
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/dfedc911c233177904d5acc850aee50e-1024x561-1.png)
Recent Posts Widget Extendedは先ほどの「WordPress Popular Posts」と同じく柔軟なカスタマイズができるプラグインです。ショートコードやウィジェットを使って表示させることができます。
- カスタム投稿タイプ(投稿または固定ページ)
- サムネイル、抜粋、投稿日、変更日、コメント数表示
- カテゴリー、タグでのフィルタリング
- 最近の投稿の前後のテキスト編集
- CSSカスタマイズ
【公式】Recent Posts Widget Extended
Display Posts
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/b28b4cdf857c9c10ac839c39aa3accd8-1024x561-1.png)
Display Postsはショートコードで新着記事を表示させるプラグインです。特徴としてはグリッドで記事を見せることができます。特定のカテゴリー、人気のある投稿、サムネイル・抜粋表示などのカスタマイズも可能です。
- グリッド表示
- カテゴリー、タグでのフィルタリング
- 人気のある投稿一覧
- サムネイル、抜粋、日付、著者表示
- 並び替え(日付、アルファベット順)
List category posts
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/5611218b8492ab9383b9141c4e840c7c-1024x561-1.png)
List category postsはカテゴリー、タグ、特定のキーワードなどの条件指定した記事リストの表示ができるプラグインです。ショートコードの初期設定を行うことでサイドバーやフッターなどにウィジェットで簡単に追加できます。
カテゴリ名またはID、投稿を表示する順序、および表示する投稿の数を受け入れます。投稿者、日付、抜粋、カスタムフィールド値、さらにはコンテンツも表示できます。
- カテゴリー、タグ、IDでのフィルタリング
- カスタム投稿タイプ(投稿やページ以外の表示)
- 表示件数の設定
- 表示順序の設定(公開日順・更新日順)
- サムネイル、抜粋表示
Post Grid
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/bfbe77fbbea65b0d7b029b347d792e6d-1024x561-1.png)
Post Gridは記事のグリッド表示ができるプラグインです。タイトルやディスクリプション、 サムネイル、カテゴリー、タグなどの有無を設定でき、情報量の調整が可能です。グリッドの列は6つまで設定でき、リスト化する記事を絞り込むためのフィルター機能もあります。
- グリッド表示
- 記事一覧の検索機能
- カテゴリー、タグ、IDでのフィルタリング
- 遅延読み込み機能
- CSSカスタマイズ
Shortcodes Ultimate
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/d2be0615d71047bcd194d3875fd4f0df-1024x561-1.png)
Shortcodes Ultimateは記事一覧を50を超えるデザインパーツで装飾ができるプラグインです。記事数、カテゴリー、タグなど細かく設定ができます。設定機能はショートコードだけで作れます。
- 50以上のショートコード
- スライダー、タブ表示
- サイズ、配置設定
- カテゴリー、タグ、IDでのフィルタリング
- CSSカスタマイズ
実際にWordPressのプラグインで新着記事を表示させる
WordPressのプラグインを利用して新着記事を表示させる方法をご紹介します。
HTML・CSS、PHPといったプログラミングに関する専門知識が無い方は、WordPressのプラグインを利用することをおすすめします。初心者でも設定が簡単にできます。
プラグインで新着記事を表示させる場合、プラグインをインストールした後で、Webサイトのどこに表示させるのか、またどのように表示させるか設定する必要があります。
新着記事を表示できるプラグインでは、「What’s New Generator」と「Newpost Catch」が特におすすめです。
What’s New Generatorで新着記事を表示させる
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/af3eebc7521b989ab1853bcdc4e759ca-e1595942325509-1024x962.png)
What’s New Generatorはショートコードを利用してWebサイトの好きなところに新着記事を表示できるプラグインです。WordPressのプラグイン独自メニューから表示に関する設定を行います。メニューは日本語に対応しており、設定箇所も少ないのでスムーズにできます。
【公式】What’s New Generatorのダウンロード
What’s New Generatorのインストール・有効化
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/b38feafe247ff43697b19ccf6d1a62c8-e1605083757296-1024x396.png)
WordPressの管理画面の左メニューから「プラグイン」>「新規追加」を選択します。遷移したプラグイン新規追加画面で検索窓に「What’s New Generator」と入力します。検索にヒットしたら「インストール」ボタンをクリックします。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/4966dcb3a5fb62f7179f7a22b36f3424-e1605083890364-1024x371.png)
次に「有効化」ボタンをクリックします。有効化ボタンをクリックしないとプラグインを利用できないので注意しましょう。
What’s New Generatorの初期設定
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/e8915e84edb37cd8c6be6453f371022f-e1650255656365.png)
WordPressの左メニューにある「設定」→「What’s New 設定」をクリックしてください。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/84a04a194c7aedd167e1a6e0adb2a51d.png)
これが「What’s New Generator」のプラグイン専用メニューの画面になります。設定できる項目自体は少ないのでわかりやすい設定画面になっています。
各項目の説明は下記にまとめています。
項目 | 説明 |
---|---|
タイトル | 見出しのタイトル名の設定 |
タイトルのタグ | 見出しタイトル名のh◯タグの設定 CSS調整する時に便利 |
表示するコンテンツ | 表示する投稿タイプの設定 投稿のみ、固定ページのみ、両方の3つから選択 |
カテゴリーのスラッグ | カテゴリーのスラッグの設定 該当カテゴリーの記事だけ表示 |
表示順序 | 公開日順か更新日順の設定 |
表示件数 | 表示件数の設定 デフォルトは10件、最大30件まで表示可能 |
NEW!マーク表示期間 | NEW!アイコンの表示期間の設定 デフォルトは7日間、最大30日間で設定可能 |
最新記事にNEW!マークをつける | NEW!アイコンの表示設定 |
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/5e6780ea05391f341fa36888679b3e70.png)
保存する前にプレビューでWebサイト上でどのように表示されるのかを確認できます。
プレビューは設定画面のページ下部に表示されます。
What’s New Generatorの使い方
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/2f8b0974a591cb46f7855d590efdbdb1-e1650256949966.png)
What’s New Generatorの使い方はとても簡単です。固定ページや投稿で新規追加を選択して、ブロックの中から「ショートコード」を選択して、入力欄に「[showwhatsnew]」と書いたら完成です。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/733f6122aa47ad0baec624cb56409f08.png)
固定ページや投稿を公開すると上記のように新着記事の一覧が表示されます。
Newpost Catchで新着記事を表示させる
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/a73a382592f4294f5b6e3ec8dc7d2f76-e1595941332692-1024x900.png)
Newpost CatchはWordPressのウィジェットから表示させたい箇所に、新着記事を表示させることができるプラグインです。ウィジェットでWebサイトの変更ができるようなWordPressテーマを利用していると、色々なところに新着記事の表示が可能です。
Newpost Catchのインストール・有効化
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/image-edited-1024x638.png)
WordPressの管理画面の左メニューから「プラグイン」>「新規追加」を選択します。遷移したプラグイン新規追加画面で検索窓に「Newpost Catch」と入力します。検索にヒットしたら「インストール」ボタンをクリックします。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/image-1-edited-1024x665.png)
次に「有効化」ボタンをクリックします。有効化ボタンをクリックしないとプラグインを利用できないので注意しましょう。
Newpost Catchの設定・使い方
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/image-2-e1605103537626-1024x595.png)
WordPressの管理画面の左メニューから「外観」→「ウィジェット」を選択します。
ウィジェットはWebサイトのWordPressテーマによりますが、Webサイト上の共通部分のフッター、サイドバーから個々の投稿・固定ページなどの要素を変更できる画面です。
上記画面では、右側にフッターの要素が表示されており、要素を自由に変更できます。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/8dea9359c0b2fcfc4d87338334ed9b7a-1-e1595940942274-1024x709.png)
左側の「利用できるウィジェット」から要素を右側のフッターの枠内にドラックアンドドロップで入れるだけで要素の追加ができます。
実際に「利用できるウィジェット」の「Newpost Catch」をドラックアンドドロップしてみてください。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/34fc91b1feb439cdcfe7ead2672e88bb-631x1024-1.png)
ウィジェットでNewpost Catchを追加した後に、新着記事の表示について詳細に設定することができます。
各項目の説明は下記にまとめています。
項目 | 説明 |
---|---|
タイトル | 見出しのタイトル名の設定 |
サムネイルの設定 | 幅、高さ、投稿件数の設定 |
投稿日 | 投稿日の表示設定 |
先頭に固定表示している投稿 | 固定表示している投稿の表示設定 |
プラグインフォルダ内のデフォルトCSS | Newpost CatchのデフォルトCSSでが適応される設定 |
投稿タイプ | 投稿か固定ページのどちらかを選択 |
特定のカテゴリーを指定して表示 | カテゴリー、記事IDで表示・非表示設定 |
これは必須という設定はないので、お好みで設定をアレンジしてみてください。
![](http://pam-inc.co.jp/wp-content/uploads/2024/06/33ddb18666cc9be73e7058f371d4e4a1-1024x819-1.png)
設定を保存すると、上記のように表示されました。
フッターよりもサイドバーの方が目に付くので、サイドバーに新着記事を表示させています。
また最近ショートコードが使えるようになったので、投稿や固定ページでもショートコードを使って新着記事を表示できるようになりました。
チェックテスト
チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。
![](https://pam-inc.co.jp/wp-content/uploads/2024/04/image-1.png)