サイトのトップページに自分が見て欲しい記事の一覧を表示したいと思うことはありませんか？
Cocoonでは、簡単に記事一覧をカスタマイズすることができます。
また、Cocoonには新着記事一覧のショートコードがありますが、少し付け加えると、カテゴリー別の記事一覧を作成することも可能です。
今回の設定を覚えると、トップページのアレンジも簡単にできるよ！
- Cocoonのナビカードでのおすすめ記事設定方法
- 新着記事一覧のショートコードを使ってカテゴリー別一覧を作る
- トップページの作成例
Cocoonのナビカードでおすすめ一覧を作る
自分が見て欲しい記事一覧の設定は、ナビカードという機能を使って作成できます。
手順は大きく2つです。
- 記事をカスタマイズして保存
- 固定ページにショートコードを設置
記事をカスタマイズして保存
まずは、表示したい記事のリストを設定しましょう。
- １外観のメニューを選択し、新しいメニューを作る
- ２メニュー名を入れてメニューを作成する
メニュー名は、ショートコードを書く際に使用するので、自分がわかりやすいものにしましょう。
今回は『おすすめ記事』としました。
- ３記事を追加する
表示したい投稿記事にチェックを付け、メニューに追加を選択すると右のメニュー構造に反映されます。
記事の順番は、ドラッグ&ドロップで変えることができます。
- ４表示オプションのCSSと説明にチェックを入れる
右上の表示オプションをクリックすると詳細メニュー設定の表示変更ができます。
- ５タイトルと記事説明を入力する
投稿記事の▼をクリックすると、詳細メニュー設定欄が出てきます。
ナビゲーションラベルに記事のタイトル、説明に記事の説明文を入力しましょう。
ナビゲーションラベルは通常、投稿タイトルがそのまま反映されます。 また、CSS classに数字を入れると、カード左上にリボンラベルをつけることができます。
リボンラベルは次の5種類です。
- おすすめ
- 新着
- 注目
- 必見
- お得
今回は一番上の記事に『４．必見』を入れてみます。
- ６設定を終えたらメニューを保存する
記事にショートコードを設置する
先ほど作った記事一覧を設置しましょう。
ショートコードの基本形は以下です。
[[navi_list name=”メニュー名”]]
今回作ったメニューでは以下のようになります。
[[navi_list name=”おすすめ記事”]]
↓
[navi_list name=”おすすめ記事”]
このショートコードに追加条件を入れて、より見やすいデザインにしてみましょう。
[[navi_list name=”おすすめ記事” type=border_square(or 2) bold=1 arrow=1]]
↓
[navi_list name=”おすすめ記事” type=border_square(or 2) bold=1 arrow=1]
コードに追加したtype・bold・arrowについて説明していきます。
type
カードの表示方法です。
リスト型3つとサムネイル型2つの計5パターンから選択できます。
私は、主にリスト型でカードに枠線を表示するborder_square(or 2)を使用しています(サイトカラーやスキムによって多少表示は変わります)。
その他のパターンはこちらの記事で確認してみてください。
https://wp-cocoon.com/navi-card-shortcode/
bold
記事タイトルの太字表記を示します。
bold=1と入れると太字表記になります。
arrow
カードの右横に矢印を表示します。
arrow=1と入れると表示されます。
＋α・class
class属性の情報の追加もできます。
私はプログラミングに疎いので使っていません
新着記事一覧のショートコードを使ってカテゴリー別一覧を作る
新着記事のショートコードは以下です。
[new_list]
このコードに『cat』を追加してカテゴリーを指定できます。
カテゴリーは番号で指定します。指定番号は、カテゴリーページで知りたいカテゴリー名にカーソルをあてると一番下に表示されます。
また、一覧に表示する記事数は『count』を追加することで変更できます。(追加しない場合は、5記事表示となります。)
試しに、このサイトのカテゴリー「ブログ」の一覧を記事数3つで表示してみましょう。
[new_list cats=9 count=3]
↓
ナビカードを使ってトップページを編集
今回説明した方法を利用して、固定ページで簡単なトップページを作成してみます。
今回作成するトップページのイメージはこちら。
- おすすめ、人気、新着、カテゴリーの記事一覧を作成
- 人気、新着一覧は並列表示させる
- カテゴリー一覧は３つ作り、並列表示させる
- カテゴリー一覧の下に、それぞれもっとみるボタンをつける
まずは、今回説明した方法で、おすすめの記事メニューを作成しましょう。
今回はさっき作った『おすすめ記事』のメニューを使うよ
作成したら、固定ページを書いていきます。
- 1固定ページの新規追加を選択
- 2タイトルは「トップページ」などとし、本文におすすめ記事のコードを貼る
タイトルはトップページの設定で使うので自分が分かりやすいものにしましょう(今回はタイトルはつけていません)。
おすすめ一覧のタイトルは、太字(bold=1)にしました。
- 3新着、人気記事のコードを貼る
まず、2つの記事一覧を並列表示させるためにカラムを設定します。
それぞれのカラム内に新着記事・人気記事のコードを入力します。
段落ブロックを選んで、コードを書きましょう。 新着・人気記事一覧は、右矢印(arrow=1)を表示しました。
- 4カテゴリーのコードを貼る
まず、３つのカテゴリー記事一覧を並列表示させるため、先ほどと同様にカラムを設定します。
そして、それぞれのカラム内にカテゴリーのコードを入力します。
カテゴリー一覧は、記事数3つ(count=3)で、サムネイル表示(type=large_thumb)にしました。
画像では、type=large_thumb_onになっているけど、タイトル表示が気に食わなかったから後から『＿on』は消したよ
※type=large_thumb_onはサムネイル内にタイトルが含まれる表示です。
- 5各カテゴリーにもっと見るボタンをつける
それぞれのカテゴリーコードの下にボタンを入れます。
ボタンのブロック設定(右欄)のURL欄にカテゴリーのURLを入力し、ボタンデザインの設定をしていきます。
ボタンは、丸い表示で色をつけて、光らせてみました。
※カテゴリーのURLは、https://サイト名/category/スラッグ/ です。わからない場合は、カテゴリーページでスラッグを確認しましょう。
- 6ページを整えて公開する
各一覧のタイトルなどを入力したら完了です。
今回は見出しを使ってタイトルを入力しました。
完成したページはこちら。
完成ページのリンクはこちらから見ることが出来ます。
※タイトルが長すぎるとサムネイル表示の場合ずれが生じることもあるので気を付けましょう。
固定ページが完成したら、トップページへの表示設定を忘れずに行いましょう。
１．設定の表示設定を選択します。
２．ホームページの表示で固定ページを選択し、その下のホームページ欄で、作成した固定ページのタイトルを選択して保存すれば完了です。
まとめ
今回は、カスタマイズした記事一覧の作成・表示方法についてお話ししました。
詳しい内容については、こちらの記事を参考にしてみてください。
https://wp-cocoon.com/navi-card-shortcode/
今回の方法を使えば、簡単なトップページを作成することができます。
ある程度記事が溜まってきたら、オリジナルトップページにして、訪問者さんに見て欲しい記事を強調してみるのも良いかもしれませんね。
その他、ショートコードの説明は以下の記事でまとめています。
cocoonのブロックエディターに関するまとめもよければどうぞ。
それではまた〜
コメント