hp中に、全投稿が一覧されている固定ページを作る方法は?
問題の所在
投稿が増えてきたいので、リスト化したいと思い、ググった時の備忘メモ。
結論
プラグインの Contents view を使う。
ググって最初にヒットした記事はこちら:
Content Viewsの使い方を解説!記事一覧ページを作ろう!
https://jimbee.jp/content-views/
(以下、一部抜粋)
②メニューに「Content Views」が出来るので「新規追加」をクリックします。
③ショートコードの作成画面に遷移します。
Content Viewsでは
- 投稿の記事一覧ページのショートコード
- 固定ページの記事一覧ページのショートコード
を別々に作る必要があります。(できれば一つのショートコードで投稿と固定ページ、両方とも全ての記事を一覧で表示したいのですが、それが不可)
という事で、まず投稿の記事一覧のショートコードから作っていきましょう!
投稿の記事一覧のショートコード
という事で、「投稿」の記事一覧を表示するショートコードを作成していきます。
- Filter Settings
- Display Settings
の2つのタブがあり、両方設定していく必要があります。
以下、順番に説明していきますね!
Filter Settings
「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」にチェックを入れます。(③)
「Show Thumbnail」「Show Title」「Show Content」の3つにチェックを入れます。(④)
サムネイルのサイズは「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」にチェックを入れて保存を押しましょう。
↓
すると画面の一番上に「投稿」の記事一覧を表示する為のショートコードが表示されます。
固定ページの記事一覧のショートコード
次に「固定ページ」の記事一覧のショートコードを作成していきます。
固定ページも
- Filter Settings
- Display Settings
の2つのタブがあり、それぞれ順番に設定してきます。
(「投稿」の時と違う箇所がちょっとだけありますが、大体同じです)
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」に加えておく事。
そして、作成した記事一覧ページをグローバルメニューなどに設置し、読者が見やすいようにしておくという事です。
=============================
理由
特記事項なし
補足
上の記事の後半では、細かい設定についても丁寧に解説されている。
■