hp中に、全投稿が一覧されている固定ページを作る方法は?

問題の所在

投稿が増えてきたいので、リスト化したいと思い、ググった時の備忘メモ。

 

結論

プラグインの Contents view を使う。

ググって最初にヒットした記事はこちら:

 

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

https://jimbee.jp/content-views/

(以下、一部抜粋)

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

Content Viewsの新規追加

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

Content Viewsでは

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

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

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

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

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

  1. Filter Settings
  2. Display Settings

の2つのタブがあり、両方設定していく必要があります。

以下、順番に説明していきますね!

Filter Settings

Filter Settings

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

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

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

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

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

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

Display Settings

Display Settings

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

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

「Show Thumbnail」「Show Title」「Show Content」

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

Display Settings

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

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

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

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

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

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

ショートコード

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

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

固定ページも

  1. Filter Settings
  2. Display Settings

の2つのタブがあり、それぞれ順番に設定してきます。

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

Filter Settings

Filter Settings

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

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

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

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

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

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

Display Settings

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

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

ショートコード

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

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

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

新規固定ページを作ろう

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

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

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

記事一覧ページ

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

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

=============================

理由

特記事項なし

 

補足

上の記事の後半では、細かい設定についても丁寧に解説されている。