【WordPressテーマCocoon】ナビカードの設定と使い方

WordPressテーマ「Cocoon」には、本文中やサイドバー等に「自分の表示させたいリンク」をカード形式で表示できるナビカードショートコードが用意されています。「新着記事」や「人気記事」ウィジェットは、テーマが並び順に従って自動生成するものなので、これをを制御するには複雑なカスタマイズをする必要があります。それを表示させたいリンクを自由に選択できるのが、「ナビカード」ショートコードです。

[ 完成形 ]
ナビカードを利用して、投稿記事内からショートコードで呼び出すことができます。

ナビカードの完成図
ナビカードを利用する主な手順
  • STEP1
    WordPressメニューを作成する

    表示させたい記事を選んで、メニューを作成します。

  • STEP2
    ナビカードをショートコードで呼び出す

    記事の中で、ショートコードで呼び出します

スポンサーリンク

Cocoonナビカードの設定と使い方(動画)

スポンサーリンク

ナビカードの設定

WordPressメニューの作成

メニューの選択

WordPress管理画面から「外観→メニュー」を選択します。

WordPressメニュー

新規メニューの作成

メニュー画面で「新しいメニューを作成しましょう」をクリックします。

新規メニューの選択

「メニュー名」を入力して「メニューを作成」ボタンを押します。

「メニューを作成」ボタン

表示オプションの設定

メニューを作成したら「表示オプション」から「CSSクラス」と「説明」を有効にしておきます。

チェックボタン

メニュー項目の追加

メニュー項目を追加」からナビカードを作成したいメニューを選択していきます。
注意:対応できるのは「投稿」と「固定ページ」と「カテゴリー」と「タグ」ページとなります。

ナビカードメニュー

各メニュー項目の詳細設定

選択した各メニュー項目の詳細を設定します。

タイトルと説明の入力

基本的な使用方法としては、「ナビゲーションラベル」にタイトルを、「説明」に説明文を入力します。

メニューの詳細項目
オプション(リボン)の設定

「CSSオプション」にはナビカードにタスキがけするリボンを選択します。

留意:リボンは、1=おすすめ、2=新着、3=注目、4=必見、5=お得となります。

リボン番号

[ リボンの表示例 ]

リボンの表示例

メニューの保存

全ての入力を終えたら「メニューを保存」ボタンを押します。

メニューの保存

ナビカードの使い方

では、投稿記事の中でナビカードを呼び出してみます。ショートコードの呼び出し方は、次の通りです。

ショートコード記入規則

例えば、先ほど作成した「デジタルコンテンツの販売の仕方」メニューであれば、次の通りです。

ショートコード記入例

ナビカードをショートコードで呼び出す

ここでは既にある記事にナビカードを追加してみます。

2カラムブロックの追加

ここでは、2つのナビカードを追加しますので、2カラムブロックを選択します。

2カラムブロック

ショートコードの追記

H2見出しブロックで、それぞれにタイトルを設定した後、ショートコードを記述します。

入力されたショートコード

ナビカードの確認

「更新」して、プレビューで確認します。

ナビカードの完成図

ショートコードオプション

count

countには、アイテムの表示数を設定します。入力例:count=10、デフォルト値:5

type

typeには、以下のうちいずれかの値を指定します。デフォルト値:default

  • defailt:通常のリスト
  • border_partition(or1):カードの上下に区切り線を入れる
  • border_square(or2):カードに枠線を表示する
  • large_thumb:大きなサムネイル表示
  • large_thumb_on:大きなサムネイルにタイトルを重ねる

bold

boldオプションは、記事タイトルを太字にするかどうかです。
入力例:bold=1(太字にする)、デフォルト値:0(太字にしない)

arrow

arrowオプションは、カードに矢印を表示するかどうかです。
入力例:arrow=1(矢印を表示する)、デフォルト値:0(矢印を表示しない)

class

classオプションには、リストのラップ要素に独自のclass属性を指定したい時に記入します。
入力例:class=”ex-class”、
入力例:class=”ex-class1 ex-class2″(複数指定する場合はスペースで区切る)
デフォルト値:(空欄)

cats

catsには、表示するカテゴリをカンマ区切りで指定します。入力例:cats=3,16,23
留意:カテゴリIDは、カテゴリ設定画面のURL(tag_ID)から取得してください。

カテゴリーID

children

childrenは、子カテゴリの内容を含めて表示するかを指定します。
入力例:children=1、デフォルト値:0(子カテゴリーは含めない)

tags

tagsには、表示するタグをカンマ区切りで指定します。(v1.5.7~)
入力例:tags=2,19,213、デフォルト値:(空欄)(デフォルトではタグ抽出しない)

タグID

modified

modifiedオプションは、更新日順に並び替えます。(v1.7.6.9~)
入力例:modified=1(更新日順)、デフォルト値:0(投稿日順)

order

orderオプションは、表示順を切り替えます。(v1.5.9~)
最初から読んで欲しいコンテンツ出力に向いています。
入力例:order=”asc”(昇順)、デフォルト値:desc(降順)

sticky

stickyオプションは、「固定表示」設定がされている記事の表示を切り替えます。(v1.5.7~)
入力例:sticky=0(表示しない)、入力例:sticky=0(表示しない)

snippet

snippetオプションは、説明文を表示するかどうかを切り替えます。(v2.1.5~)
入力例:snippet=1(表示)、デフォルト値:0(表示しない)

post_type

post_typeは、表示する投稿タイプを選択します。(v0.7.2~)デフォルト値:post(投稿のみ表示)

  • 投稿と固定ページを表示、入力例:post_type=“post,page”
  • 固定ページのみ表示、入力例:post_type=“page”
  • 投稿・固定ページとカスタム投稿表示、
    入力例:post_type=“post,page,カスタム投稿名1,カスタム投稿名2”

その他

taxonomy、authorについては、ここでは説明を省略しています。

ショートコードについては、こちらを参照下さい。

コメント