【WordPress】新着記事一覧をトップページに表示したい！

こんにちは。にゃこです。

 

当サイトでは、テーマ「Cocoon」を利用しています。

このテーマは無料ですが、多機能でいろんなことが実現できます。

今回は、新着記事一覧をトップページに表示する方法をご紹介します。

 

これまでの当サイトの問題点

今まで、当サイトのトップページは上記のように、カテゴリごとに最新の記事が3つずつ並び、

そして、各記事のページや、アーカイブ一覧を表示すると、右側に最近の投稿5件が表示されていました、

 

これですと、いつ、何が更新されたのか、

どの記事を新しく追加したのかがわかりませんでした💦

すみません💦

 

トップページに新着記事一覧を作ろう

上の写真のように、新着記事を5件表示させたいと思います。

 

前提

当サイトでは、テーマ「Cocoon」を利用しています。

Cocoonには様々なショートコードが用意されており、

新着記事一覧用のショートコードもあります。

今回はこのショートコードを使って実装じっそうします。

 

 

基本の実装方法

新着記事一覧に、以下ショートコードを入力します。

[new_list]

上記を実行すると、デフォルトの投稿から新着記事を5件表示します。

 

表示をカスタマイズする方法

表示件数や、表示対象等を変更する場合の設定方法をご紹介します。

 

表示件数の変更

「count」というオプションを使うことで、表示件数を変更できます。

例：表示件数：3件

[new_list count=3]

上記の実行結果は以下の通りです。

 

表示形式の変更

「type」というオプションを使うことで、タイトルを太字にすることができます。

 

例：デフォルト表示、表示件数：3件

[new_list count=3 type=default]

上記の実行結果は以下の通りです。

これは以下と同じ表示結果となります。

[new_list count=3]

 

例：上下線、表示件数：3件

[new_list count=3 type=border_partition]

または

[new_list count=3 type=1]

上記の実行結果は以下の通りです。

 

例：枠線、表示件数：3件

[new_list count=3 type=border_square]

または

[new_list count=3 type=2]

上記の実行結果は以下の通りです。

 

例：サムネイル画像：大、表示件数：3件

[new_list count=3 type=large_thumb]

上記の実行結果は以下の通りです。

 

例：サムネイル画像：大、タイトル：重ねて表示、表示件数：3件

[new_list count=3 type=large_thumb_on]

上記の実行結果は以下の通りです。

 

記事のタイトルを太字にする

「bold」というオプションを使うことで、タイトルを太字にすることができます。

…とあるのですが、私は太字になってないです💦

例：太字、表示件数：3件

[new_list count=3 bold=1]

上記の実行結果は以下の通りです。

 

矢印の付与

「arrow」というオプションを使うことで、タイトルを太字にすることができます。

…とあるのですが、私は矢印が表示されていないです💦

例：矢印付き、表示件数：3件

[new_list count=3 arrow=1]

上記の実行結果は以下の通りです。

 

カテゴリを限定した表示

「cats」というオプションを使うことで、指定したカテゴリに該当する記事のみ表示させることができます。

 

例：トラブルシューティング（ID15）というカテゴリのみ、表示件数：3件

[new_list count=3 cats=15]

上記の実行結果は以下の通りです。

 

タグを限定した表示

「tags」というオプションを使うことで、指定したタグに該当する記事のみ表示させることができます。

 

例：HTML（ID70）というタグのみ、表示件数：3件

[new_list count=3 tags=70]

上記の実行結果は以下の通りです。

 

子カテゴリの表示

「children」というオプションを使うことで、親子関係にあるカテゴリの子カテゴリを含めて表示させることができます。

 

例：子カテゴリを含める、表示件数：3件

[new_list count=3 children=1]

上記の実行結果は以下の通りです。
※当サイトでは現時点では子カテゴリがないため、デフォルトと同じ表示となります。

 

表示順変更

「modified」と「order」という2つのオプションを使うことで、表示順序を変えることができます。

 

例：投稿日/昇順、表示件数：3件

投稿日が古い記事から3件表示します。

[new_list count=3 modified=0 order=asc]

上記の実行結果は以下の通りです。

 

例：更新日/降順、表示件数：3件

更新日が最近の記事から3件表示します。

[new_list count=3 modified=1 order=desc]

上記の実行結果は以下の通りです。

 

固定表示記事の表示設定

「sticky」というオプションを使うことで、固定表示設定がされている記事を表示/非表示にできます。

 

例：固定表示を含める、表示件数：3件

[new_list count=3 sticky=1]

上記の実行結果は以下の通りです。
※当サイトでは現時点では固定表示の記事がないため、デフォルトと同じ表示となります。

 

記事の抜粋文の表示設定

「snippet」というオプションを使うことで、新着記事の説明文を表示/非表示にできます。

…とあるのですが、私はデフォルトで文が表示されていない💦

 

例：抜粋文なし、表示件数：3件

[new_list count=3 snippet=0]

上記の実行結果は以下の通りです。

 

編集者を限定した表示

「author」というオプションを使うことで、特定の編集者が書いた記事に限定して表示させることができます。

複数の編集者で管理している場合に使えます。

 

例：編集者ID：2（該当なし）、表示件数：3件

[new_list count=3 author=2]

上記の実行結果は以下の通りです。
※当サイトでは現時点では1人で管理しているため、条件が無視され、デフォルトと同じ表示となります。

 

検索グループ限定による表示

「taxonomy」というオプションを使うことで、表示対象を絞ることができます。

…とあるのですが、いまいちカテゴリーとタグを使いこなせておらず、上記でご紹介したcatsと、tagsとの違いが分かっておりません💦

 

例：抜粋文なし、表示件数：3件

[new_list count=3 snippet=0]

上記の実行結果は以下の通りです。

 

対象記事タイプの変更

「post_type」というオプションを使い、表示させたい記事タイプを指定することで、カスタム投稿を一覧に含めることができます。

 

※複数指定する場合は、「カンマ（,）」でつなげます。

 

例：投稿、固定ページ、カスタム投稿（wordpress)、表示件数：3件

[new_list count=3 post_type=post,page,wordpress]

上記の実行結果は以下の通りです。

 

当サイトの設定例

では、上のように設定するにはどうしているでしょうか？

 

↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓　↓

 

[new_list post_type="page,post,<カスタム投稿slag1>,<カスタム投稿slag2>,<カスタム投稿slag3>" bold=1 arrow=1]

 

でした。

でも、太字と矢印が有効になってないんですよね💦

 

まとめ

いかがでしたか？

一部、想定とは異なる表示結果となった箇所がありましたので、

原因と対策がわかったら、追記等したいと思います。

 

また、詳細はこちらをご確認ください。