このサイトでは、管理人であるままくまが、日常で起こった出来事をもとに、 皆さんに役立つ(?)であろう出来事をゆるっと発信していきます。

Cocconのナビカードで記事一覧を作成<おすすめ・カテゴリー別など>/WordPress

ブログ

サイトのトップページに自分が見て欲しい記事の一覧を表示したいと思うことはありませんか?

Cocoonでは、簡単に記事一覧をカスタマイズすることができます。

また、Cocoonには新着記事一覧のショートコードがありますが、少し付け加えると、カテゴリー別の記事一覧を作成することも可能です。

今回の設定を覚えると、トップページのアレンジも簡単にできるよ!

この記事でわかること
  • Cocoonのナビカードでのおすすめ記事設定方法
  • 新着記事一覧のショートコードを使ってカテゴリー別一覧を作る
  • トップページの作成例

Cocoonのナビカードでおすすめ一覧を作る

自分が見て欲しい記事一覧の設定は、ナビカードという機能を使って作成できます。

手順は大きく2つです。

  • 記事をカスタマイズして保存
  • 固定ページにショートコードを設置

記事をカスタマイズして保存

まずは、表示したい記事のリストを設定しましょう。

  • 外観のメニューを選択し、新しいメニューを作る
  • メニュー名を入れてメニューを作成する

    メニュー名は、ショートコードを書く際に使用するので、自分がわかりやすいものにしましょう。

    今回は『おすすめ記事』としました。

  • 記事を追加する

    表示したい投稿記事にチェックを付け、メニューに追加を選択すると右のメニュー構造に反映されます。

    記事の順番は、ドラッグ&ドロップで変えることができます。

  • 表示オプションのCSSと説明にチェックを入れる

    右上の表示オプションをクリックすると詳細メニュー設定の表示変更ができます。

  • タイトルと記事説明を入力する

    投稿記事の▼をクリックすると、詳細メニュー設定欄が出てきます。

    ナビゲーションラベルに記事のタイトル、説明に記事の説明文を入力しましょう。

    ナビゲーションラベルは通常、投稿タイトルがそのまま反映されます。

    また、CSS classに数字を入れると、カード左上にリボンラベルをつけることができます。

    リボンラベルは次の5種類です。

    1. おすすめ
    2. 新着
    3. 注目
    4. 必見
    5. お得

    今回は一番上の記事に『4.必見』を入れてみます。

  • 設定を終えたらメニューを保存する

記事にショートコードを設置する

先ほど作った記事一覧を設置しましょう。

ショートコードの基本形は以下です。

[navi_list name="メニュー名"]

今回作ったメニューでは以下のようになります。

このショートコードに追加条件を入れて、より見やすいデザインにしてみましょう。

[navi_list name="おすすめ記事" type=border_square(or 2) bold=1 arrow=1]

必見
webサイト高速化*Cocoonテーマでも、モバイルスピードも向上!
無料テーマでもサイトスピードを向上させる手段はあります!まだ記事数が少ないのにサイトスピード、特にモバイルスピードが劇的に遅い人は必見!
これで合格*Googleアドセンス取得までに7回落ちた話
実はこのサイトはGoogleアドセンスの申請に7回落ちています…笑。適当にやみくもに申請しても受からないこと、きちんと対策を練って申請すれば受かることを実証しました!
【WordPress】ブロックエディターの使い方(Coccon)
Cocconテーマでのブロックエディターの使えるブロック挿入ツールをまとめました。適度に装飾を使って、読みやすい記事を作成しましょう。
自宅でセルフフォト!フォトグッズはダイソーのみ<ケーキやタペストリーなど>
おしゃれな写真は安上がりな装飾でも撮れます!一度作ってしまえば使いまわしもできるので、思い立ったら自分で撮影グッズを作っちゃいましょう!
【楽天】神戸モリーママの半額ラスク福袋!自宅用・簡単な手土産に!
私が何度もリピートしているおいしいラスクを紹介しています。安くておいしくて気軽に買えるので、何度でも食べたくなります!

コードに追加したtype・bold・arrowについて説明していきます。

type

カードの表示方法です。

リスト型3つとサムネイル型2つの計5パターンから選択できます。

私は、主にリスト型でカードに枠線を表示するborder_square(or 2)を使用しています(サイトカラーやスキムによって多少表示は変わります)。

その他のパターンはこちらの記事で確認してみてください。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方
サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

bold

記事タイトルの太字表記を示します。

bold=1と入れると太字表記になります。

arrow

カードの右横に矢印を表示します。

arrow=1と入れると表示されます。

+α・class

class属性の情報の追加もできます。

ままくま
ままくま

私はプログラミングに疎いので使っていません

新着記事一覧のショートコードを使ってカテゴリー別一覧を作る

新着記事のショートコードは以下です。

[new_list]

このコードに『cat』を追加してカテゴリーを指定できます。

カテゴリー番号で指定します。指定番号は、カテゴリーページで知りたいカテゴリー名にカーソルをあてると一番下に表示されます。

また、一覧に表示する記事数は『count』を追加することで変更できます。(追加しない場合は、5記事表示となります。)

試しに、このサイトのカテゴリー「ブログ」の一覧を記事数3つで表示してみましょう。

ナビカードを使ってトップページを編集

今回説明した方法を利用して、固定ページで簡単なトップページを作成してみます。

今回作成するトップページのイメージはこちら。

  • おすすめ、人気、新着、カテゴリーの記事一覧を作成
  • 人気、新着一覧は並列表示させる
  • カテゴリー一覧は3つ作り、並列表示させる
  • カテゴリー一覧の下に、それぞれもっとみるボタンをつける

まずは、今回説明した方法で、おすすめの記事メニューを作成しましょう。

今回はさっき作った『おすすめ記事』のメニューを使うよ

作成したら、固定ページを書いていきます。

  • 1
    固定ページの新規追加を選択
  • 2
    タイトルは「トップページ」などとし、本文におすすめ記事のコードを貼る

    タイトルはトップページの設定で使うので自分が分かりやすいものにしましょう(今回はタイトルはつけていません)。

    おすすめ一覧のタイトルは、太字(bold=1)にしました。

  • 3
    新着、人気記事のコードを貼る

    まず、2つの記事一覧を並列表示させるためにカラムを設定します。

    それぞれのカラム内に新着記事・人気記事のコードを入力します。

    段落ブロックを選んで、コードを書きましょう。

    新着・人気記事一覧は、右矢印(arrow=1)を表示しました。

  • 4
    カテゴリーのコードを貼る

    まず、3つのカテゴリー記事一覧を並列表示させるため、先ほどと同様にカラムを設定します。

    そして、それぞれのカラム内にカテゴリーのコードを入力します。

    カテゴリー一覧は、記事数3つ(count=3)で、サムネイル表示(type=large_thumb)にしました。

    画像では、type=large_thumb_onになっているけど、タイトル表示が気に食わなかったから後から『_on』は消したよ

    ※type=large_thumb_onはサムネイル内にタイトルが含まれる表示です。

  • 5
    各カテゴリーにもっと見るボタンをつける

    それぞれのカテゴリーコードの下にボタンを入れます。

    ボタンのブロック設定(右欄)のURL欄にカテゴリーのURLを入力し、ボタンデザインの設定をしていきます。

    ボタンは、丸い表示で色をつけて、光らせてみました。

    カテゴリーのURLは、https://サイト名/category/スラッグ/ です。わからない場合は、カテゴリーページでスラッグを確認しましょう。

  • 6
    ページを整えて公開する

    各一覧のタイトルなどを入力したら完了です。

    今回は見出しを使ってタイトルを入力しました。

完成したページはこちら。

完成ページのリンクはこちらから見ることが出来ます。

※タイトルが長すぎるとサムネイル表示の場合ずれが生じることもあるので気を付けましょう。

固定ページが完成したら、トップページへの表示設定を忘れずに行いましょう。

トップページの設定

1.設定表示設定を選択します。

2.ホームページの表示で固定ページを選択し、その下のホームページ欄で、作成した固定ページのタイトルを選択して保存すれば完了です。

タイトルを付けなかった場合は、自動的に番号が振られています

まとめ

今回は、カスタマイズした記事一覧の作成・表示方法についてお話ししました。

詳しい内容については、こちらの記事を参考にしてみてください。

https://wp-cocoon.com/navi-card-shortcode/

今回の方法を使えば、簡単なトップページを作成することができます。

ある程度記事が溜まってきたら、オリジナルトップページにして、訪問者さんに見て欲しい記事を強調してみるのも良いかもしれませんね。

その他、ショートコードの説明は以下の記事でまとめています。

cocoonのブロックエディターに関するまとめもよければどうぞ。

それではまた〜

コメント