プラグイン

Content Viewsの使い方を解説!記事一覧ページを作ろう!

この記事の内容

ここでは記事一覧ページを作成する事が出来るプラグイン、Content Viewsの使い方について説明していきます。

色々と細かいカスタマイズも出来ますし、PS Auto Sitemapの様にずっと更新されていないという事も無い。

初心者から上級者まですごくおススメのプラグインなので、記事一覧ページ作成に困っている方は是非参考にしてみて下さい。

田村カツオ
田村カツオ
ポイントをかいつまんで言うと↓
  • 記事一覧ページがあると読者に親切!
  • Content Viewsなら簡単に記事一覧ページが出来る!
この記事を読む事でひと味違う全記事一覧が作れるようになりますよ!

※WordPressブログで稼いでいく上でおススメなプラグインをまとめた記事もありますので良かったら見てみて下さい↓

WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介!ここではお金を稼いでいく目的でWordPressブログを運営していくのに、おススメなプラグインを13個絞って紹介していきたいと思います。プラグインの数が多くてどれを使ったら良いかわからない…!という方は是非参考にしてみて下さい。...

WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介!

カッパ君
カッパ君
内容に入っていくよ!

Content Viewsで簡単に記事一覧ページが作れる!

Content Viewsは記事一覧ページを簡単に作れるプラグインです。

記事の一覧を表示する為のショートコードを作成し、それを指定の場所に貼ればそれだけでOK。

こんな感じ↓の記事一覧を作成する事が可能。

記事一覧ページ

 

記事一覧を作るプラグインとしてはPS Auto Sitemapが有名ですが、もう何年も更新されておらずちょっと不安。

別のプラグインを探しても固定ページのみの対応だったりして、ニーズに合うプラグインが見つからない。

Content Viewsはそんな方にピッタリのプラグインです。

Content Viewsの使い方【初心者はこれだけやればOK】

ここでは細かい設定は抜きにして、ちゃんとした記事一覧ページをサクッと作りたいという方の為に、投稿と固定ページを両方表示する記事一覧ページの作り方を解説していきます。

(細かい設定の詳細については次章をご参照ください)

 

①「プラグイン」→「新規追加」で「Content Views」と検索し、インストール&有効化しましょう。

Content Views

 

②メニューに「Content Views」が出来るので「新規追加」をクリックします。

Content Views

 

③ショートコードの作成画面に遷移します。

Content Viewsでは

  • 投稿の記事一覧ページのショートコード
  • 固定ページの記事一覧ページのショートコード

別々に作る必要があります。(できれば一つのショートコードで投稿と固定ページ、両方とも全ての記事を一覧で表示したいのですが、それが不可)

という事で、まず投稿の記事一覧のショートコードから作っていきましょう!

投稿の記事一覧のショートコード

という事で、「投稿」の記事一覧を表示するショートコードを作成していきます。

投稿の記事を一覧ページの作成

「Filter Settings」(①)を選択します。

②にショートコードのタイトルを入れますが、これは分かりやすいものを。

素直に「記事一覧ページ(投稿)」とかでOK。

Content Typeでは「投稿」を選択し(③)、CommonのLimitは空欄にしましょう。(④)

CommonのLimitは最初は「10」が入力されているので、それを消します。

他はいじらなくてOKなので、一旦「保存」を押します。

 

Display Settings

「Display Settings」を選択し(①)、「Collapsible List」をチェック。(②)

「Show thumbnail on the left/right of text」にチェックを入れます。(③)

 

Fields settings

「Show Thumbnail」「Show Title」「Show Content」の3つにチェックを入れます。(④)

 

サムネイルのサイズは「Post Thmubnail(150×150)」(⑤)を選択。

設定の続き

内容では「Show Excerpt」を選択し、100Wordと入力。(⑥)

(デフォルトでは20Wordsになってます)

 

⑦の「Allow HTML tags (a, br, strong, em, strike, i, ul, ol, li) in excerpt」にチェックを入れます。その下の文言はデフォルトの「続きを読む」でOK。

最後に⑧の「Current Tab」にチェックを入れて保存を押しましょう。

画面の一番上に「投稿」の記事一覧を表示する為のショートコードが表示されます。

投稿ページのショートコード

固定ページの記事一覧のショートコード

次に「固定ページ」の記事一覧のショートコードを作成していきます。

「投稿」の時と違う箇所がちょっとだけありますが、大体同じです)

固定ページの記事一覧ショートコードの作成

「Filter Settings」(①)を選択します。

②にショートコードのタイトルを入れますが、これは分かりやすく「記事一覧ページ(固定ページ)」とかでOK。

Content Typeでは「固定ページ」を選択し(③)、CommonのLimitは空欄にしましょう。(⑤)

ポイントは④の「Include Only」で、表示したい固定ページのIDを入力します。

固定ページはその性質上、非公開にしておきたいページもありますので、公開したい固定ページの記事IDだけを「Include Only」に入れておくのです。

複数のIDを入れる場合は「,」で区切ります。

 

「Display Settings」の設定については「投稿」と全く同じでOKです。

全ての設定が終わると「固定ページ」の記事一覧を表示する為のショートコードが画面上に表示するされます。

ショートコード

作成したショートコードを固定ページに貼り付ける。

ショートコードを張り付ける場所を固定ページにて作成しましょう。

 

記事一覧ページ

「固定ページ」→「新規追加」で新しい固定ページを作成します。

記事タイトルは「全記事一覧」などが無難。

記事本文に「投稿」と「固定ページ」の記事一覧を作成するショートコードを張り付けます。

 

②記事一覧ページが出来ました。

記事一覧ページ

注意点としては、この記事一覧ページ自体の記事IDを、Content Viewsの固定ページのショートコードの編集画面の「Include Only」に加えておく事。

 

そして、作成した記事一覧ページをグローバルメニューなどに設置し、読者が見やすいようにしておくという事です。

【超簡単】グローバルメニューの作り方を解説!ここではWordPressブログでのグローバルメニューの作り方を解説していきます。グローバルメニューは必ず見られる場所なので超重要。これからブログを立ち上げるという方は参考にしてみて下さい。...

【超簡単】グローバルメニューの作り方を解説!

Content Viewsの各設定について解説!

前章では、しっかりとした記事一覧ページを最短距離で作る事にフォーカスして説明してきましたが、ここでは前章で触れなかった部分の設定について説明していきます。

 

「見れば分かるわい!」みたいな部分は除いて、ここで説明した方がいいと思われる

  • Common
  • Advance
  • Layout
  • Format
  • pagination
  • Others

について説明していきますね。

カッパ君
カッパ君
言及していない部分は、実際ちょこっと触ってみると分かるレベルだよん。

Common

common

これは「Filter Settings」にある設定領域で、記事IDを入力する事で記事一覧に含めたり、除外したりできます。

記事IDは半角数字で、複数の記事IDを入力する時は半角コンマ「,」で区切ります。

Include Only ここに入力した記事IDの記事だけが一覧に表示されるようになります。
Exclude ここに入力した記事IDの記事は一覧から除外されます。
Parent Page ここに入力した記事IDの子ページが表示されます。
入力した記事IDの記事そのものは表示されません。
Limit 記事一覧ページで出力する記事数の上限です。
全体の記事数が少ないのであれば問題なしですが、多いのであれば後述するPaginationを設定しましょう。

Advance

Advance

「Filter Settings」にある設定領域です。

ここにチェックを入れた項目によって、出力される記事を整列したり限定できます。

Taxonomy (カテゴリー, タグ…) カテゴリーやタグで出力される記事を整列する機能ですが、有料版限定。
Sort by 出力される記事を記事タイトルやID、投稿日によって並べ替えます。
結構便利。
投稿者 記事投稿者によって一覧を整列する機能です。
1人でやってるブログなら使いません。
ステータス 公開、下書き、といった記事ステータスによって一覧を分類するのですが、あまり使わないと個人的には思いました。
キーワード 特定のキーワードが含まれる記事を抽出して一覧にします。

Layout

Layout

Layoutは「Display Settings」で設定する領域です。

  • Grid
  • Collapsible List
  • Scrollable List

と3つありますが、Collapsible Listが一番無難かな、と感じます。

百聞は一見に如かずなので以下をご覧ください。

Grid

Grid

ちょっと大きすぎて見づらい印象。

Collapsible List

Collapsible List

これが一番おすすめです。

Scrollable List

Scrollable List

ちょっと微妙です(笑)

Format

Format

Formatは「Display Settings」で設定する領域で、サムネイルとテキストを縦に並べるか横に並べるかの違いです。

好みですが、横に並べる方がいいかなーと思ってます。

  • Show thumbnail & text vertically:
  • Show thumbnail on the left/right of text:横(左右は選べる)

Pagination・Others

pagination/others

「Display Settings」で設定する最後の部分がPaginationとOthersです。

PaginationをONにすると、記事一覧をページ分割して表示でき、下部にボタンがページ送りボタンが現れます↓

ページネーションボタン

 

Othersは記事一覧をクリックした時に、その記事が新しいタブで開かれるか同じタブのまま切り替わるか、です。

直帰率などを下げるという意味では同じタブのまま切り替わる(=Current tab)するようにした方がいいですね。

記事一覧ページはぜひ作ろう!

絶対とは言いませんが、記事一覧ページはぜひ作ってグローバルメニューなどに設置しておきましょう。

 

理由は主に2つで

  • 読者にとって親切だから。
  • 直帰率を下げてくれるから。

です。

 

「このブログは面白いな!」と読者が感じてくれた時に、全ての記事を一覧で見る事が出来たら親切で便利ですよね。

また、記事一覧ページはブログの直帰率を下げてくれます。

直帰率とは貴方のブログに来た読者が「最初の1ページだけを見て離脱する確率」の事。

直帰率は低い方が検索エンジンの評価が高くなる。

※このブログの全記事一覧ページは直帰率がほぼ0パーセント。

 

これらの理由からブログには全記事一覧ページがあった方がいいのです。

ぜひ全記事一覧ページを作りましょう!

ABOUT ME
田村カツオ
副業お坊さんブロガー。YouTubeとTwitterもよろしくお願いします!

COMMENT

メールアドレスが公開されることはありません。

19 + 3 =