当サイトで使っているWordpressテーマのCocoonにある便利なショートコード
当サイトで使っているショートコードとそのコードで使うオプションをまとめておこう的な備忘録記事
基本コードとオプション付きの書き方
基本 [new_list]
オプション付き [new_list count=3]基本コードのみの場合オプションはデフォルト値なので必要なものだけ追記する形
オプションを付ける場合は半角スペース開けて書く
新着記事表示
使っている、使うであろうオプションのみ
基本 [new_list]オプション
| オプション | 説明 | 記述 | 初期値 |
|---|---|---|---|
| count | 表示させる記事数 | count=○ 数値 | 5 |
| type | デザイン | type=○ default / large_thumb / large_thumb_on | default |
| cats | 表示させるカテゴリーID | cats=○ 数値 / 複数選択はカンマ区切り(1,3,4) | all |
| children | 子カテゴリ表示 | children=○ 数値 0 / 1 | 0 |
| order | 表示順 | order=○ asc / desc (昇順/降順) | desc |
新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。
wp-cocoon.com
ナビカード
任意の記事へのカードリンクを作れるショートコード
このショートコードを使うには外観 メニューで表示させる物を作成する必要がある
【Cocoon】カスタマイズ｜ナビカード編
バージョン1.6.7～追加されたナビカードのカスタマイズ記事です、調整は必要ですがコピペで使えると思います
haineons.com
2019.03.18
基本 [navi name="○○"]オプション
| オプション | 説明 | 記述 | 初期値 |
|---|---|---|---|
| name | メニューで作成したメニュー名 (必須) | name="メニュー名" | なし(空欄) |
| type | デザイン | type="数値" 指定なし / 1 / 2 | なし(空欄) |
ブログカード
角括弧で囲んだ状態で使えるもの
[URL]このショートコードにオプションはなし
利点はブログカード表示を無効にしていても使える、リンク前後に文字が有ってもOKな点
Amazon商品リンク
Cocoon設定 APIでAPIを設定する必要あり
Amazon商品リンクの初期設定方法と使い方
Cocoonの「Amazon商品リンクタグ作成ショートコード」機能の使い方を詳しく解説しています。
wp-cocoon.com
Amazon商品リンクショートコードの使い方。サンプルコード満載で解説。
Amazon商品リンク作成ショートコードの使い方を、出来る限り優しく説明しています。便利なオプションもあるので、欲しい見た目をある程度手に入れることができます。
wp-cocoon.com
基本 [amazon asin="○○"]オプション
| オプション | 説明 | 記述 | 初期値 |
|---|---|---|---|
| id | asinの代わり (asinかidは必須) | asin="○○" | なし(空欄) |
| kw | 商品検索用キーワード | kw="文字列" | なし(空欄) |
| title | 商品リンクテキスト | title="文字列" 変更したい文字列 | なし(空欄) |
| catalog | 商品写真カタログ表示 | catalog="数値" 0 / 1 | なし(空欄) |
| btn2_url | 最後尾に挿入するボタンURL | btn2_url="URL" | なし(空欄) |
| btn2_text | 最後尾に挿入するボタンテキスト | btn2_text="文字列" | なし(空欄) |
| btn2_tag | 最後尾に挿入するボタンリンクタグ | btn2_tag='文字列' <a href="http://hoge">hoge</a> | なし(空欄) |
自分で記入するよりもブックマークレットを使ったほうが楽だし便利
Amazon商品リンクブックマークレットの使い方
Amazon商品リンクショートコードを手軽に作成するための「Amazonリンク作成ブックマークレット」の登録方法と、使い方の解説です。
wp-cocoon.com
上記ブックマークレットだったのか検索して出てきたやつだったのか忘れちゃったけど
タイトルやボタン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]
