【Cocoon】使用中のショートコード、オプション記述まとめ

wordpress
この記事は約5分で読めます。
Sponsor Link
Sponsor Link

当サイトで使っているWordpressテーマのCocoonにある便利なショートコード
当サイトで使っているショートコードとそのコードで使うオプションをまとめておこう的な備忘録記事

基本コードとオプション付きの書き方

基本 [new_list]

オプション付き [new_list count=3]

基本コードのみの場合オプションはデフォルト値なので必要なものだけ追記する形
オプションを付ける場合は半角スペース開けて書く

新着記事表示

使っている、使うであろうオプションのみ

基本 [new_list]

オプション

オプション説明記述初期値
count表示させる記事数count=○
数値
5
typeデザインtype=○
default / large_thumb / large_thumb_on
default
cats表示させるカテゴリーIDcats=○
数値 / 複数選択はカンマ区切り(1,3,4)
all
children子カテゴリ表示children=○
数値 0 / 1
0
order表示順order=○
asc / desc (昇順/降順)
desc
新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

ナビカード

任意の記事へのカードリンクを作れるショートコード
このショートコードを使うには外観 メニューで表示させる物を作成する必要がある

【Cocoon】カスタマイズ|ナビカード編
バージョン1.6.7~追加されたナビカードのカスタマイズ記事です、調整は必要ですがコピペで使えると思います
基本 [navi name="○○"]

オプション

オプション説明記述初期値
nameメニューで作成したメニュー名 (必須)name="メニュー名"なし(空欄)
typeデザインtype="数値"
指定なし / 1 / 2
なし(空欄)

Sponsor Link

ブログカード

角括弧で囲んだ状態で使えるもの

[URL]

このショートコードにオプションはなし
利点はブログカード表示を無効にしていても使える、リンク前後に文字が有ってもOKな点

Amazon商品リンク

Cocoon設定 APIでAPIを設定する必要あり

Amazon商品リンクの初期設定方法と使い方
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。
Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。
基本 [amazon asin="○○"]

オプション

オプション説明記述初期値
idasinの代わり (asinかidは必須)asin="○○"なし(空欄)
kw商品検索用キーワードkw="文字列"なし(空欄)
title商品リンクテキストtitle="文字列"
変更したい文字列
なし(空欄)
catalog商品写真カタログ表示catalog="数値"
0 / 1
なし(空欄)
btn2_url最後尾に挿入するボタンURLbtn2_url="URL"なし(空欄)
btn2_text最後尾に挿入するボタンテキストbtn2_text="文字列"なし(空欄)
btn2_tag最後尾に挿入するボタンリンクタグbtn2_tag='文字列'
<a href="http://hoge">hoge</a>
なし(空欄)

自分で記入するよりもブックマークレットを使ったほうが楽だし便利

Amazon商品リンクブックマークレットの使い方
Amazon商品リンクショートコードを手軽に作成するための「Amazonリンク作成ブックマークレット」の登録方法と、使い方の解説です。

上記ブックマークレットだったのか検索して出てきたやつだったのか忘れちゃったけど
タイトルやボタン2を加えたやつを使っている

javascript: var titleElems = [ document.getElementById('productTitle'), document.getElementById('ebooksProductTitle'), document.getElementById('aiv-content-title'), document.getElementById('title_feature_div') ]; var title = titleElems.filter(v => {return v!=null;})[0].innerText.trim().replace(/[\[|\]]/g,''); var matched = location.href.match(/(?:dp|o|gp|-|ASIN|product)\/(B[0-9]{2}[0-9A-Z]{7}|[0-9]{9}(?:X|[0-9]))/); var asin = matched != null ? matched[1] : ''; var txt = '[amazon asin="'+asin+'" kw="'+title+'" title="" btn2_url="" btn2_text=""]'; if(asin != '') prompt("Copy this", txt); else alert("Error: no ASIN found.");

タイムライン

手順やタイムラインを表示させることの出来るショートコード

[timeline title="○○"]
    [ti label="○○" title="○○"][/ti]
[/timeline]

このショートコードはオプションはなし
表示例
タイムライン表示例

まとめ

使っているのはこの5個ぐらいかな、オプションを調べに行くのが面倒だなーと思い自分のブログで記事にした感じです
面倒じゃないよーという人は公式サイトやショートコードをまとめてくれている草村さんのサイトを見に行くと良いですよ^^

[share]

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