Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonショートコード-ナビカードの使い方と表示サンプル

スポンサーリンク
使い方
この記事は約2分で読めます。
スポンサーリンク

ナビカードショートコード

WordPressの管理画面「外観」→「メニュー」で登録したメニューをカード形式でリスト表示が出来るショートコードです。

 

ショートコード

 ↓コピーできます。
[navi_list name="メニュー名"]

 

初期表示

オプションなしの上記ショートコードで表示した例は以下の通り。

 

表示例

Cocoonショートコード:ナビカード

 

オプション

必須オプション

name

WordPressの管理画面「外観」→「メニュー」で登録したメニュー名を指定します。

メニュー名

 

 

任意のオプション

 デザイン

type

・default: 通常リスト
・border_partition: カードの上下に区切り線
・border_square: カードに枠線
・large_thumb: 大きい画像
・large_thumb_on: 大きい画像にタイトルを重ねる

 

初期値:default

 

書き方

 ↓コピーできます。
[navi_list name="メニュー名" type=large_thumb_on]

 

デザインサンプル

border_partition

記事一覧ショートコード:border_partition

 

border_square

記事一覧ショートコード:border_square

 

large_thumb

記事一覧ショートコード:large_thumb

 

large_thumb_on

記事一覧ショートコード:large_thumb_on

 

タイトルを太字にする

bold

0:標準 1:太字

初期値:0

 

書き方

 ↓コピーできます。
[navi_list name="メニュー名" bold=1]

記事一覧ショートコード:bold

 

矢印を表示

arrow

0:非表示 1:表示

初期値:0

 

書き方

 ↓コピーできます。
[navi_list name="メニュー名" arrow=1]

記事一覧ショートコード:arrow

 

任意のクラス属性追加

class

クラス属性を追加したい場合に指定。複数の場合は半角スペース区切り。

 

書き方

 ↓コピーできます。
[navi_list name="メニュー名" class=任意のクラス名]

 

 

 

コメント

タイトルとURLをコピーしました