【Content Views】WordPressで投稿記事の一覧をリスト表示する方法

「Webサイトに記事一覧を表示したいけど、どう設定すればいいの？」

こんな悩みを抱える人におすすめなのが、無料で使える「Content Views」プラグインです。

プログラミングの知識は一切不要。

人気記事・関連記事・新着記事など、目的に合わせた記事の一覧をサクッとリスト化できます。

この記事では、プラグインの導入から設定、一覧の設置方法まで、画面ベースで分かりやすく解説します。

Content Viewsとは？

Content Viewsは、WordPressサイトで記事をリスト化して一覧表示できる無料プラグインです。

たとえば…

といったことが、プログラミングの知識がなくても実現できます。

作成した一覧はショートコードで呼び出せるので、記事本文はもちろん、サイドバーにも手軽に設置可能。

WordPress初心者の方でも、すぐに活用できる便利なツールです。

以降では Content Views の導入～使い方まで、画像をベースにわかりやすく解説していきます。

Content Viewsのインストール手順

早速、Content Views プラグインをインストールしていきましょう。

WordPress管理画面にアクセスして「 プラグイン」＞「新規プラグインを追加 」を選択します。

「Content Views」を検索してインストールしてください。

インストールが終わるとボタンが出てきます。クリックして有効化しましょう。

Content Viewsの基本設定方法

Content Viewsをインストールしたら、次は基本設定を行いましょう。

WordPress 左メニューの「Content Views 」＞「Add New」をクリック。

「Content Views 」の設定画面が表示されます。

設定は大きく次の2ステップで構成されています。

では、順番に見ていきましょう。

Filter Settings（表示する記事の条件設定）

Filter Settingsでは、どの記事を一覧に表示するかの条件を設定します。

1．Content type（コンテントタイプ）

表示する記事の種類を「投稿」または「固定ページ」から選択します。

2．Common（共通設定）

表示する記事の条件を指定します。

【Include only】

特定の記事だけを表示する設定です。

記事IDをカンマ区切りで入力すると、その記事だけが一覧に表示されます。

なお、記事IDは「投稿一覧」や「固定ページ一覧」から確認可能です。

【Exclude】

特定の記事を表示から除外する設定です。

記事IDを入力すると、その記事は一覧から除外されます。

【Parent page】

この項目は 1. Content typeで「固定ページ」を選んだ場合にだけ表示されます。

ここでは、親子階層になっている固定ページのうち、親ページのID を指定してください。

親ページのIDを入力すると、そのページに紐づく子ページが自動的に一覧表示されます。

【Limit】

表示する記事の最大件数を設定します。

3．Advance（詳細設定）

詳細設定では、より細かい絞り込み条件を設定できます。

【Taxonomy（分類）】

一覧で表示したい記事を「カテゴリー」や「タグ」で指定できます。

Select terms：「カテゴリー」または「タグ」を入力してください。

Operator：「IN」「NOT IN」「AND」で表示条件を調整します。（以下を参照）

【ステータス】

公開済み、下書き、レビュー待ちなど、記事の状態（ステータス）で表示／非表示を設定します。

【Sort by（並びかえ）】

記事ID、タイトル、投稿日、更新日などで並び順を指定できます。

【キーワード】

ここで入力したキーワードを含む記事のみが表示されます。

【投稿者】

特定の投稿者の記事のみ表示または非表示に設定できます。

Display Settings（デザイン・レイアウト設定）

Display Settingsでは、記事一覧の見た目（レイアウト）を設定していきます。

1．Layout(レイアウト)

記事一覧の表示フォーマットを選択します。

グリッド型・リスト型など、お好みに合わせたレイアウトを指定してください。

2．Responsive（レスポンシブ）

１行ごとに表示する記事数を指定します。

Tablet と Mobileの設定項目があるので、それぞれ指定してください。

3．Heading text（見出し）

Heading text を有効にすると、記事一覧の上部に見出しタイトルが表示されます。

必要に応じてオン・オフを切り替えてください。

4．Fields settings（表示項目）

ここでは、記事一覧に表示する要素を指定できます。

※上記は、1．Layout(レイアウト) の設定項目で「List」を選択した場合の表示イメージです

5．Pagination（ページネーション）

Pagination を有効にすると移動ボタンが追加されて、複数ページに分けて記事を表示できます。

「Items per page」で、1ページに表示する記事数を指定してください。

6．Others（その他）

Open item in では、一覧リストの記事クリック時の挙動を設定できます。

When no posts found では、クリックした記事が見つからない場合の挙動を設定します。

プラグインの設定項目に関する説明は以上です。

各種項目を調整したら ボタンを押して変更を確定しましょう。

記事に一覧リストを設置する方法

設定が完了したら、いよいよ「記事一覧リスト」を設置していきましょう！

設定画面の上側に表示されている「適用コード」 をコピーします。

一覧を設置したいところに、コードを貼り付け。

これで記事一覧が表示されるようになりました。

Filter Settings のおすすめ設定例

ここからは、以下の目的に合わせた最適な設定をご紹介していきます。

おすすめ記事一覧を表示したい場合

「おすすめ記事」として、特定の記事だけを一覧表示したいときは、Filter Settingsで次のように設定してください。

関連記事一覧を表示したい場合

表示しているページに「関連する記事」を一覧で表示したいときは、Filter Settingsで次の設定を行ってください。

新着記事一覧を表示したい場合

最新の記事を一覧で表示したいときは、Filter Settingsで次の設定を行ってください。

Display Settings のおすすめ設定例

次は記事一覧のレイアウトのおすすめ設定をご紹介していきます。

それぞれの場面に合った設定を見ていきましょう。

記事本文に表示したい場合（パート１）

記事本文の中に一覧を表示したいときは、Display Settingsで以下の設定を行うのがおすすめです。

記事本文に表示したい場合（パート２）

記事本文の中に一覧を表示したいときは、Display Settingsで以下の設定を行うのがおすすめです。

サイドバーに表示したい場合

サイドバーに記事一覧を表示したいときは、Display Settingsで以下の設定を行うのがおすすめです。

おしゃれなサイトを作りたい人へ

「ブログサイトをもっとおしゃれにしたい」と思っている方へ。

実は、おしゃれなサイトには共通する3つのポイントがあるんです。

このポイントを意識するだけで、ブログ初心者の方でもぐっとおしゃれなデザインに近づけますよ。

さらに具体的なテクニックや細かいデザインのコツについては、次の記事で詳しく解説していますので、あわせてチェックしてみてください。

～ 最後に ～

ここまで「Content Views」プラグインを使った記事一覧の表示方法について解説してきました。

このサイトでは、ブログ運営に役立つ情報を初心者の方にもわかりやすく紹介しています。

他にも気になる記事があれば、ぜひチェックしてみてください。

最後までお読みいただき、ありがとうございました (*‘∀‘)