【Content Views】新着記事を画像付きでリスト化する方法 – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

【Content Views】新着記事を画像付きでリスト化する方法

公開日 最終更新日

新着記事を画像付きでリスト化する方法

 

新着記事の通知をテキストだけでお知らせするのは、ちょっと味気ないくま~。
「Content Views」を使うと、サムネイル付きの新着記事リストを表示できるです~。

 

WordPressサイトのトップ画面と言えば、縦一列に新着記事を並べられていることがほとんどです。

 

画像_新着記事

 

テーマによっては、テキストのみの内部リンクを淡々と表示するだけ…なんてことも。

 

トップ画面はサイトの入口にあたるので、各コンテンツに読者を誘導するための工夫をもっと凝らしたいですよね。

とくに「新着記事」は鮮度の高いうちに、どれだけ多くの読者に見てもらえるかが勝負です。

そんな新着記事への誘導力をもっと高めたい方に「Content Views」をオススメします。

 

Content Views

 

このプラグインは、新着記事をアイキャッチ画像付きでリスト化してくれます。

 

新着記事_リスト

 

トップ画面を訪れた読者が思わずクリックしたくなるような新着記事リストを、簡単に作成できるのが特徴です。

今回は、Content Viewsで新着記事リストを作る方法や、コンテンツ内に設置する方法をご紹介したいと思います。

 

※Content Viewsをトップ画面に導入するには、トップ画面に固定ページを設定しておく必要があります。以下の講座が詳しいので、合わせてチェックしてみてください。

【WordPress】オリジナルのトップ画面を作るには【初心者必見】

 

リストを追加する

はじめに、Content ViewsをWordPressにインストールしましょう。

【WordPress】プラグインのインストール方法 基本から応用まで3つのメソッドをご紹介

※インストールする前に必ずWordPressのバックアップをお願いします。

プラグインを有効化すると管理画面に「Content Views」項目が追加されます。

 

新規追加

 

カーソルを合わせて「新規追加」をクリック。

 

Content_Views_設定画面

 

この画面で、リストの中身やデザインなどを決めていきます。

具体的な設定に入る前に、まずリストに「タイトル」を付けてあげましょう。

Content Viewsでは複数リストを作成でき、タイトルはリストを個別に識別するためのものです。

 

Add_new_view

 

あなた自身がわかりやすいタイトルを付けましょう。

 

Filter Settings(何を表示するか)

ランディングページは新着記事のリストに表示したくないくま~。
Content Viewsでは、リストに表示するコンテンツを制限できるです~。

 

Content Viewsの設定は大きく分けて2つです。

 

Filter Settings:リストに表示するコンテンツの種類を指定

Display Settings:リストのレイアウト・デザインを指定

 

まず「Filter Settings」の解説から始めたいと思います。

タイトル入力欄すぐ下のタブが「Filter Settings」に切り替わっているか確認してください。

 

filter_setting

 

上の項目から順番に説明します。

 

1.Content type(コンテンツの種類)

リストに表示するコンテンツの種類を「投稿」「固定ページ」の2タイプから選択します。

 

2.Common(一般設定)

【Include only】

リストに表示したい記事のIDを指定します。

その他の記事はリストから外されます。

 

投稿ID

 

IDは、投稿エディターのURLから確認できます。

「post=〇〇〇」内の数値を入力してください。

 

【Exclude】

リストから外したい記事のIDを入力します。

 

【Parent Page】

階層(親子)関係にある固定ページのうち親コンテンツのIDを指定します。

すると、親コンテンツに属する子コンテンツだけリスト表示されます。

(※「Content type」で固定ページを選択している時のみ設定可能)

 

固定ページ_階層

 

上図のように、固定ページ同士を階層(親子)関係で結びつけるには、エディター画面の「ページ属性」で親となる固定ページを指定します。

 

ページ属性_親

 

Content Viewsの表示は以下のようになります。

 

新着記事リスト_プレビュー

 

【Limit】

コンテンツを最大何件までリスト表示するか指定します。

 

3.Advance(詳細設定)

さらにリスト表示する記事を絞りたい場合は「Advance」以降の設定を行います。

新着記事リストを表示したいだけなら、こちらの設定は不用です。

 

【Taxonomy】

特定のカテゴリー・タグ別に新着記事を表示したい時にチェックを入れます。

 

カテゴリー名

 

Select terms:該当カテゴリー(またはタグ)名を入力。複数選択可。

Operator(指示):「IN」「NOT IN」「AND」から選択。それぞれの機能は下図をご確認ください。

 

・「IN」を選択した場合

 

Content_Views_カテゴリー

 

「Operator」で「IN」を選択すると、指定したカテゴリーの内のどれかに所属する記事のみリスト表示できます。

 

Content_Views_カテゴリー_プレビュー

 

サイトの人気カテゴリーに絞って新着記事をお知らせしたい場合に便利です。

 

・「NOT IN」を選択した場合

 

指定_カテゴリー_除外

 

「NOT IN」は指定したカテゴリーをリストから除きます。

 

カテゴリー_除外_プレビュー

 

・「AND」を選択した場合

 

指定_カテゴリー

 

「AND」を選択すると、指定した全てのカテゴリーに属している記事のみ表示されます。

上図の設定の場合、リスト表示されるには「緑」カテゴリーと「赤」カテゴリー両方に分類されていなければなりません。

つまり、「緑」カテゴリーに属していても「赤」カテゴリーには属していないコンテンツは表示されません。

 

【ステータス】

「公開済み」「下書き」等のコンテンツのステータスに絞ってリストを表示します。

 

【Sort by(並び替え)】

Content Viewsでリストを作成すると、投稿順に記事が並びます。

タイトル順や更新日順に並び替えたい場合は、こちらにチェックを入れます。

 

【キーワード】

タイトル・本文からキーワードを検索し、ヒットした記事をリスト表示します。

 

【作成者】

複数の権限ユーザーとWordPressを運用している場合に、特定の投稿者の記事だけリスト表示します。

 

Display Settings(どのように表示するか)

次に、リストのレイアウトやデザインを変更してみましょう。

Display Settings」タブに切り替えてください。

 

display_setting

 

まず、リストの表示形式を選択します。

 

リスト_表示形式

 

Content Viewsで選択できる表示形式は「グリッド」「折りたたみ式」「スライド式」の3点です。

 

・Grid(グリッド)

 

グリッド

 

・Collapsible List(折りたたみ式)

 

 

 

 

 

 

折りたたみ式

 

・Scrollable List(スライド式)

 

スライド式

 

表示形式に何を選択するかによって、以降の設定方法が変わります。

今回は、新着記事のお知らせに最適な「グリッド」で解説を進めたいと思います。

 

グリッドとは「格子」を意味する英単語です。

一般的に、縦横に規則的に並んだ図形や構造を指します。

 

グリッドとは

 

Content Viewsでグリッドを選択すると、以下のようなリストを作成できます。

 

グリッド形式_プレビュー

 

このように数日分の記事タイトルとアイキャッチ画像を一目で把握できます。

それでは、グリッド表示をさらにカスタマイズしてみることにしましょう。

 

グリッド_設定

 

・Items per row(一行あたりの記事)

一行に表示する最大記事数を指定します。

また、以下の項目を設定しておくと、閲覧デバイスによって一行あたりの記事数を切り替えられます。

 

Items per row (Tablet):タブレットで閲覧した時に、一行あたりに表示する記事数

 

Items per row (Mobile):スマートフォンで閲覧した時に、一行あたりに表示する記事数

 

・Format:アイキャッチ画像とテキストの位置を以下の2パターンから選択します。

 ① Show thumbnail & text vertically:アイキャッチ画像⇒テキストの順番で、垂直に表示します。

 

Show_thumbnail_text_vertically

 

 ② Show thumbnail on the left/right of text:テキストの左または右にアイキャッチ画像を表示します。

 

Show_thumbnail_on_the leftright_of_text

 

・Fields settings

各コンテンツのリストに何を表示するか選択します。

基本的に下図の設定で問題ありません。

 

Fields_settings

 

「投稿日」や「カテゴリー名」を追加表示したい場合は「Show Meta Fields(記事情報を表示する)」にチェックを入れましょう。

 

・タイトル

リストに表示するタイトルをどのタグで囲むか指定します。

 

タイトル

 

オススメは「p」または「div」です。

見出しタグで囲みたい場合は、見出しの構成ルールに気を付けて選択しましょう。

 

・サムネイル

アイキャッチ画像の大きさを指定します。

 

サムネイル

 

一行あたりの記事数を考慮し、画面に収まるサイズに設定してください。

例えば、横幅1000px前後のコンテンツで1行あたり3記事表示するなら「Medium」が丁度良いでしょう。

 

・内容

アイキャッチ画像・タイトルの他に、本文もリストに表示することができます。

下図の設定にすると冒頭の20文字分だけリストに掲載します。

 

内容

 

Excerpt settings(抜粋設定)」で文字数を変更できます。

Read More text」では、ボタンのテキストを指定します。

 

続きを読む

 

・Pagination(ページネーション)

ページネーションを有効にすると、リストをコンパクトにまとめることができます。

 

ページネーション

 

Enable(有効)」にチェックを入れると、下記の設定項目が開きます。

 

ページネーション

 

「Items per page(1ページあたりの記事数)」を指定し、他の項目はデフォルトのままでOKです。

 

・Others(その他の設定)

Open item in」では、リストをクリックした時に同じタブで各記事ページに移動するか、それとも新規タブを立ち上げるか選択します。

 

リンク

 

同じタブで良ければデフォルトのままでOK。

新規タブの場合は「New tab」にチェックを入れてください。

 

以上で、Content Viewsの設定は完了です。

最後に「保存」を忘れずにクリックしましょう。

 

記事内にリストを設置する

いよいよ新着記事のリストをトップ画面に設置してみましょう。

リストを保存したら、Edit View(設定画面)の先頭に戻りショートコードをコピーします。

 

ショートコード

 

このショートコードを貼り付けた場所に、新着記事のリストが表示される仕組みとなっています。

 

リストを設置するトップ画面のエディター画面に移動してください。

 

貼り付け

 

最後にプレビューで使用感を確認し、投稿を更新しましょう。

 

「Content Views」のおさらい

簡単に今回のまとめをしておくです~。

 

まとめ

・WordPressのデフォルトのトップ画面では、新着コンテンツの魅力が十分に伝わらない。

・Content Viewsなら、新着コンテンツをアイキャッチ画像つきでリスト化できる。

・オリジナルのトップ画面を作成するならContent Viewsがオススメ。

 

関連記事

【WordPress】失敗しないプラグインの選び方 必須10種目のおすすめ紹介

【WordPress】関連記事を楽々挿入できるプラグイン おすすめ5選

 

新規パートナー無料登録はこちら

サイト作成コース 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による