Cocoonでは、Amazonの商品を紹介するための「商品リンクショートコード」を利用できます。
設定方法などについては以下を参照してください。
以下では、設定後のショートコード利用方法をできるだけ詳しく説明したいと思います。
- 基本構文
- amazonショートコードオプション
- asin（Amazon商品ID）
- id（Amazon商品ID）
- kw（検索キーワード）
- title（タイトル名変更）
- desc（商品説明文）
- tracking_id（トラッキングID）
- price（価格表示）
- review（レビューリンク表示）
- size（サイズ指定）
- amazon（Amazonボタン表示）
- rakuten（楽天市場ボタン表示）
- yahoo（Yahoo!ボタン表示）
- mercari（メルカリボタン表示）
- dmm（DMMボタン表示）
- text_only（テキストリンクのみ表示）
- image_only（画像のみ表示）
- image_index（画像の変更）
- catalog（カタログ写真の表示）
- border（枠線の表示）
- logo（ロゴの表示）
- btn1_url（先頭に挿入するボタンのURL）
- btn1_text（先頭に表示するボタンテキスト）
- btn1_tag（先頭に表示するボタンリンクタグ）
- btn2_url（デフォルトボタンの後ろに挿入するボタンのURL）
- btn2_text（デフォルトボタンの後ろに表示するボタンテキスト）
- btn2_tag（デフォルトボタンの後ろに表示するボタンリンクタグ）
- btn3_url（最後尾に挿入するボタンのURL）
- btn3_text（最後尾に表示するボタンテキスト）
- btn3_tag（最後尾に表示するボタンリンクタグ）
- 利用状況に合わせた商品リンクを作れる
＼エックスサーバー開発のWordPressテーマ／
基本構文
Amazon商品リンクショートコードは、amazonというショートコードで利用できます。
必要最低限の、基本構文はこちら。
必要最低限
amazonショートコードに対してasinオプションは必須です。
![AmiVoice SP2 [ダウンロード]](https://m.media-amazon.com/images/I/61p8g2tLxuL._SL160_.jpg)
[amazon asin="B00ICDWGW2"]
書籍を紹介する場合は、ISDN-10を取得してasinオプションに記入してください。
[amazon asin="4798052817"]
Kindle書籍は、ASINを入力します。
[amazon asin="B076J525RQ"]
ASINとは、Amazonの商品IDみたいなものです。取得方法は以下を参照してください。
ブックマークレットでクリック一発で作成することも可能です。
キーワード指定
kwオプションを指定すれば、検索ボタンも表示できます。
[amazon asin="B004QJYBAG" kw="ケンジントン SlimBlade"]
[amazon asin="B00XL960R4" kw="裸族のカプセルホテル"]
amazonショートコードオプション
基本的には上で書いたショートコードで利用できますが、以下では詳しいオプションを解説します。
asin（Amazon商品ID）
asinオプションには、Amazon商品のASINを指定します。書籍の場合はISBN-10番号を指定してください。
入力例：asin="B072B5BTLK"
入力例：asin="4797395168"（書籍の場合）
デフォルト値：（空欄）
入力例
[amazon asin="B0021L2Q4O" kw="ONKYO GX-500HD"]
[amazon asin="4774187062" kw="エンジニアのためのWordPress開発入門"]
id（Amazon商品ID）
idオプションは、asinオプションの代わりにもなります。asinというオプションが覚えられなければ、代わりにidオプションを利用してもOKです。
入力例：id="B072B5BTLK"
入力例：id="4797395168"（書籍の場合）
デフォルト値：（空欄）
入力例
idは、asinの代わりに利用できます。
[amazon id="B00PQF5D6U" kw="Glamo iRemocon WiFi"]
[amazon id="B004V33LKI" kw="呼び出しチャイムセット X810"]
kw（検索キーワード）
kwオプションは、商品検索ボタン用の検索キーワード設定です。
入力例：kw="キーワード1"
入力例：kw="キーワード1 キーワード2 キーワード3"
入力例：kw="キーワード1 キーワード2 -除外キーワード1 -除外キーワード2"（除外例）
入力例：kw="ノートパソコン -中古"（除外例）
デフォルト値：（空欄）
入力例
kwオプションでスペースで区切ることによって、複合キーワードでも検索できます。
[amazon asin="B0013L6ACM" kw="OHM リモコンセント OCR－05"]
[amazon asin="B008E4WCPA" kw="テルモ電子体温計 ET-C205S"]
title（タイトル名変更）
titleオプションは、Amazon商品リンクのリンクテキストを変更したい場合に利用します。
入力例：title="ユーザーが設定したいリンクテキストを入力"
デフォルト値：（空欄）
入力例
titleオプションを入力することで、商品名を変更することも可能です。
[amazon asin="B01DIUO7ZW" kw="山善 DCモーター リビング扇風機" title="山善DCモーターリビング扇風機"]
[amazon asin="B07G9VYNYX" title="象印のスチーム式加湿器"]
desc（商品説明文）
desc（description）オプションは、商品リンクに説明文を追加します。
入力例：desc="表示したい説明文を入力"
入力例：desc="無添加の天然素材で作られています。"
デフォルト値：（空欄 or API設定で「説明文」が有効になっている場合はAPIが取得した説明文）
v1.1.1～
v1.9.8～ Amazon説明文表示機能追加
入力例
[amazon asin="B00FIX50HM" kw="アイリスオーヤマ エアリーマットレス" desc="表面に起毛加工、中わたに保温性の高いシンサレートと、暖かい空気を保温するエアロキューブ(R)を使用。"]
オプションを組み合わせて、小さく表示することも可能。
[amazon asin="B00ES82OWW" sise="s" desc="足元をよりあたたかくした配線構造。"]
tracking_id（トラッキングID）
tracking_idオプションには、Cocoon設定「API」タブで設定した以外の「AmazonアソシエイトトラッキングID」を設定したい場合に利用します。
利用シーンとしては、任意のAmazon商品リンクだけ違うトラッキングIDを指定して、パフォーマンスを計測したい時等に利用します。
入力例：tracking_id="your-id-22"
デフォルト値：（空欄）
v2.1.7～
入力例
[amazon asin="B07VHV6BV6" tracking_id="nelog-api-22" kw="パナソニック 急速充電器"]
price（価格表示）
priceオプションを指定すると、広告表示のオン/オフを切り替えることができます。
入力例：price=1（表示する）
入力例：price=0（表示しない）
デフォルト値：（空欄）
priceオプションが指定されていない場合は、Cocoon設定の「API」タブで指定されている設定が優先されます。
入力例
[amazon asin="B010D13BHO" price=1 kw="パブロンSゴールド"]
[amazon asin="B0142KRY3O" price=0 kw="灰羽連盟 Blu-ray BOX"]
review（レビューリンク表示）
reviewオプションを指定すると、Amazonレビューページへのリンクのオン/オフを切り替えることができます。
入力例：review=1（表示する）
入力例：review=0（表示しない）
デフォルト値：（空欄）
reviewオプションが指定されていない場合は、Cocoon設定の「API」タブで指定されている設定が優先されます。
v1.7.4.2～
入力例
[amazon asin="B01DEFQKLU" kw="バファリンA" review=1]
[amazon asin="B01DEFQKLU" kw="バファリンA" review=0]
size（サイズ指定）
sizeオプションは、商品リンクの大きさを変更します。
大きな違いは、サムネイル画像です。S、M、Lとサイズ指定できるので、アピール度が結構変わってきます。
入力例：size="s"
入力例：size="m"
入力例：size="l"
デフォルト値：m
v1.1.1～
入力例
Sサイズ、Mサイズ、Lサイズの商品リンク作成。
S
画像も小さくなりますが、ボタンも少し小さくなります。
[amazon asin="B004XLJ7E2" kw="ソフトサンティア" size="s"]
ボタンを表示させなければ、かなり小さくできます。拙作のBabyLinkに見た目を近づけました。
[amazon asin="B002SWGJVM" size="s"]
M
標準的な商品リンクの大きさ。
[amazon asin="B0091FM076" kw="ライオン チェックアップ" size="m"]
[amazon asin="B0B72LXVV5" size="m"]
L
大きくサムネイルを見せたいときに向いています。
![[Diadora Heritage] [ディアドラ] 172526 スニーカー GAME L LOW <ユニセックス> GAME L LOW 172526 GAME L LOW](https://m.media-amazon.com/images/I/41xcCm+WhXL._SL500_.jpg)
[amazon asin="B075X2763H" kw="ディアドラヘリテージ スニーカー GAME" size="l"]
[amazon asin="B06XPVX4QH" kw="ドラゴンボールZ SCultures BIG 造形天下一武道会 ピッコロ" size="l" desc="ピッコロさんの不屈の名シーンを完全再現！"]
[amazon asin="B07816RXS7" size="l" desc="凛々しく素敵な男装の少女・天上ウテナは、生徒会副会長の西園寺と決闘することになってしまった。誘われるままに「決闘の森」に足を踏み入れたウテナを待っていたのは、見たこともない不思議な世界。そして、西園寺に寄り添う「薔薇の花嫁」と呼ばれる少女・姫宮アンシー。「世界を革命する力」をめぐる物語が始まる！"]
amazon（Amazonボタン表示）
amazonオプションは、Amazonの商品検索ボタンを表示するかどうかを指定します。
入力例：amazon=0（表示しない）
デフォルト値：1（表示）
入力例
Amazon検索ボタンを消したい場合に。
[amazon asin="B00MFBGH3Q" kw="パナソニック 口腔洗浄器 ジェットウォッシャー ドルツ" amazon=0]
rakuten（楽天市場ボタン表示）
rakutenオプションは、楽天の商品検索ボタンを表示するかどうかを指定します。
入力例：rakuten=0（表示しない）
デフォルト値：1（表示）
入力例
楽天検索ボタンを消したい場合に。
[amazon asin="B01C6LEH8G" kw="経口補水液 オーエスワン" rakuten=0]
yahoo（Yahoo!ボタン表示）
yahooオプションは、Yahoo!ショッピングの商品検索ボタンを表示するかどうかを指定します。
入力例：yahoo=0（表示しない）
デフォルト値：1（表示）
入力例
Yahoo!ショッピング検索ボタンを消したい場合に。
[amazon asin="B01ND0KNK9" kw="adidas 24/7 デニムジャージ" yahoo=0]
mercari（メルカリボタン表示）
mercariオプションは、メルカリの商品検索ボタンを表示するかどうかを指定します。
入力例：mercari=0（表示しない）
デフォルト値：1（表示）
入力例
メルカリ検索ボタンを消したい場合に。
[amazon asin="B0CGTHKRHV" kw="ボディソープ" mercari=0]
dmm（DMMボタン表示）
dmmオプションは、DMMの商品検索ボタンを表示するかどうかを指定します。
入力例：dmm=0（表示しない）
デフォルト値：1（表示）
v2.1.8～
入力例
DMM検索ボタンを消したい場合に。
[amazon asin="B0832JBSCQ" kw="天気の子" dmm=0]
text_only（テキストリンクのみ表示）
text_onlyオプションは、Amazon APIからタイトルテキストのみを取得します。
また、titleオプションと組み合わせることにより、自由にタイトルを変更することも可能です。
入力例：text_only=1（テキストリンクのみ）
入力例：text_only=1 title="タイトルのリンクテキストを変更する場合"（タイトルを変更したテキストリンク）
デフォルト値：0（通常表示）
v1.9.8～
入力例
Amazon APIから取得したタイトルのみをテキストリンクとして表示。
[オニツカタイガー] スニーカー MEXICO 661 ホワイト/ブルー 27.5 cmタイトルを変更して表示。
オニツカタイガー（タイトル変更のみ可能）Amazon APIから取得したタイトルのみをテキストリンクとして表示。
[amazon asin="B000SC0Q40" text_only=1]
タイトルを変更して表示。
[amazon asin="B000SC0Q40" text_only=1 title="オニツカタイガー（タイトル変更のみ可能）"]
image_only（画像のみ表示）
image_onlyオプションとsizeオプションを組み合わせることで、画像のみの商品リンクをつくれます。
Amazonの場合は、画像サイズはS、M、Lで指定できます。
入力例：image_only=1（画像のみ）
デフォルト値：0（通常表示）
入力例
[amazon asin="B00871HYMQ" size="l" image_only=1] [amazon asin="B00871HYMQ" size="m" image_only=1] [amazon asin="B00871HYMQ" size="s" image_only=1]
image_index（画像の変更）
image_indexオプションは、デフォルトの商品画像を.Amazon APIが他に取得した画像と変更することができます。
image_indexは、0番から始まるインデックス番号で指定します。
入力例：image_index=0（APIが取得した1番目の画像）
入力例：image_index=3（APIが取得した4番目の画像）
デフォルト値：空欄（デフォルトの商品画像）
詳細は以下の記事を参照してください。
入力例
![[オニツカタイガー] スニーカー MEXICO 661 ホワイト/ブルー 27.5 cm](https://m.media-amazon.com/images/I/51SS-xe-IOL._SL160_.jpg)
![[オニツカタイガー] スニーカー MEXICO 661 ホワイト/ブルー 27.5 cm](https://m.media-amazon.com/images/I/51O9F7E5TuL._SL160_.jpg)
[amazon asin="B000SC0Q40" kw="オニツカタイガー" image_index=0] [amazon asin="B000SC0Q40" kw="オニツカタイガー" image_index=1 size=m] [amazon asin="B000SC0Q40" kw="オニツカタイガー" image_index=2 size=s] [amazon asin="B000SC0Q40" kw="オニツカタイガー" image_index=3 size=l] [amazon asin="B000SC0Q40" kw="オニツカタイガー" image_index=4 size=l]
catalog（カタログ写真の表示）
catalogオプションは、商品リンクサムネイルの下に「カタログ写真（画像）のサムネイルボタン」を表示して、参考画像を多くする機能です。
入力例：catalog=1（カタログ写真表示）
入力例：catalog=0（カタログ写真非表示）
デフォルト値：空欄（テーマ設定に準拠）
入力例
[amazon asin="B00T90G87G" kw="Canon EOS Kiss" catalog=1]
[amazon asin="B00T90G87G" kw="Canon EOS Kiss" catalog=0]
border（枠線の表示）
borderオプションは、商品リンクの枠線の表示を切り替えます。
入力例：border=0（表示しない）
デフォルト値：1（表示）
入力例
[amazon asin="B0021L2Q4O" kw="ONKYO GX-500HD" border=0]
logo（ロゴの表示）
logoオプションは、商品リンク右下に表示されるロゴの表示を切り替えます。
入力例：logo=0（表示しない）
入力例：logo=1（表示）
デフォルト値：空欄（テーマ設定に準じる）
入力例
[amazon asin="B001KURFQ6" kw="太田漢方胃腸薬" logo=0]
btn1_url（先頭に挿入するボタンのURL）
btn1_urlオプションは、ボタン先頭に指定したURLで「詳細ページ」というキャプションが挿入されたボタンを表示します。
入力例：btn1_url=任意のURL（表示）
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" yahoo=0]
btn1_text（先頭に表示するボタンテキスト）
btn1_textオプションは、btn1_urlオプションでボタン先頭に挿入したボタンのキャプションを変更します。
入力例：btn1_text="購入はこちら"
入力例：btn1_text="詳細はこちら"
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn1_text="ソニー公式" yahoo=0]
btn1_tag（先頭に表示するボタンリンクタグ）
btn1_tagオプションは、タグをそのままボタンとして表示したい場合に利用します。
タグの改変が規約で禁止されているアフィリエイトタグなどをボタンとして表示したい場合に便利かと思います。
入力例：btn1_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">公式チェック</a>'
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">公式チェック</a>' yahoo=0]
どうしてもダブルクォーテーションで値を囲みたい場合は、中のタグの属性値部分をシングルクォーテーションにする必要があります。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn1_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>公式チェック</a>" yahoo=0]
btn2_url（デフォルトボタンの後ろに挿入するボタンのURL）
btn2_urlオプションは、ボタン最後尾に指定したURLで「詳細ページ」というキャプションが挿入されたボタンを表示します。
入力例：btn2_url=任意のURL（表示）
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" yahoo=0]
btn2_text（デフォルトボタンの後ろに表示するボタンテキスト）
btn2_textオプションは、btn2_urlオプションでボタン最後尾に挿入したボタンのキャプションを変更します。
入力例：btn2_text="購入はこちら"
入力例：btn2_text="詳細はこちら"
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn2_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn2_text="ソニー公式" yahoo=0]
btn2_tag（デフォルトボタンの後ろに表示するボタンリンクタグ）
btn2_tagオプションは、タグをそのままボタンとして表示したい場合に利用します。
タグの改変が規約で禁止されているアフィリエイトタグなどをボタンとして表示したい場合に便利かと思います。
入力例：btn2_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">詳細を見る</a>'
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn2_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">詳細を見る</a>' yahoo=0]
どうしてもダブルクォーテーションで値を囲みたい場合は、中のタグの属性値部分をシングルクォーテーションにする必要があります。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn2_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>詳細を見る</a>" yahoo=0]
btn3_url（最後尾に挿入するボタンのURL）
btn3_urlオプションは、ボタン最後尾に指定したURLで「詳細ページ」というキャプションが挿入されたボタンを表示します。
入力例：btn3_url=任意のURL（表示）
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn3_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" yahoo=0]
btn3_text（最後尾に表示するボタンテキスト）
btn3_textオプションは、btn3_urlオプションでボタン最後尾に挿入したボタンのキャプションを変更します。
入力例：btn3_text="購入はこちら"
入力例：btn3_text="詳細はこちら"
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn3_url="https://www.sony.jp/ichigan/products/ILCE-7M3/" btn3_text="ソニー公式" yahoo=0]
btn3_tag（最後尾に表示するボタンリンクタグ）
btn3_tagオプションは、タグをそのままボタンとして表示したい場合に利用します。
タグの改変が規約で禁止されているアフィリエイトタグなどをボタンとして表示したい場合に便利かと思います。
入力例：btn3_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">詳細を見る</a>'
デフォルト値：空欄（ボタンを挿入しない）
入力例
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn3_tag='<a href="https://www.sony.jp/ichigan/products/ILCE-7M3/">詳細を見る</a>' yahoo=0]
どうしてもダブルクォーテーションで値を囲みたい場合は、中のタグの属性値部分をシングルクォーテーションにする必要があります。
[amazon asin="B07B4CVMW3" kw="OSS ILCE-7M3K" btn3_tag="<a href='https://www.sony.jp/ichigan/products/ILCE-7M3/'>詳細を見る</a>" yahoo=0]
利用状況に合わせた商品リンクを作れる
このように、オプションを指定することで、商品を紹介する場面、場面に合った、商品リンクを作成することが出来るようになっています。
例えばこんな場面などに便利かと思います。
洋服を紹介するので画像は大きく見せたい。
Amazonにしか売っていない商品なので他の検索ボタンを消したい。
やたら商品名が長いので短くしたい。
商品に簡単な説明文を付けたい。あわよくばSEO的に説明文でキーワードを足したい。
とは言っても、ショートコードに慣れていない場合は、まずブックマークレットを利用するのがお勧めです。
1クリックで基本形を作成して利用するのでも十分かと思います。
コメント テーマの質問はフォーラムへ
ボタンを「Amazonで探す」など
文言は変えられますか？
いずれ機能追加はしようと思っていたので、良い機会なので追加しました。
このファイルでアップデートすれば「Cocoon設定→API」から設定できるようになると思います。
https://github.com/yhira/cocoon/archive/master.zip
商品のサムネイル画像が表示されない場合、何か対策があれば教えてください
例えば
「ドリテック ステンレスケトル マキアート 電気ケトル ポット PO-115BK2 0.8L」
ASIN「B0088K4LNQ」
この商品は何故か
LINKテキストが表示されます
よろしくお願いします
どうやら、APIから画像が引っ張れない商品のようですね。
画像引っ張ってこれない場合は、Amazonの「画像がありません」イメージが表示されるように変更してみました。
https://github.com/yhira/cocoon/archive/master.zip
よろしければ試してみていただければ幸いです。
このアフィリエイトリンク機能は簡単なショートコードから、凝ったリンク設定まで素人から玄人までの心を掴む機能に脱帽です。
もはや、テーマ内の１機能の範疇を超えてると思います。プラグインとしてリリースされるのを、喉から手が出るほどの気持ちで待ってる人がいそうですね。余計なお世話かもしれませんけど。
ありがとうござます。
欲しい機能や、要望のあった機能を追加していったら、いつの間にかかなりの項機能になっていました(笑)
プラグインは、既に素晴らしいプラグインが結構あるので、参入はやめておきます^^;
プラグインはあの検索機能を作るのがかなり大変そうなので。加えて、今後出るGutenbergに対応させるとなると、かなり大変になるのではないかと思います。
なので、ショートコード＋ブックマークレットが、Gutenberg対応させる必要もなく開発コストも抑えられて、利便性もそこそこ高く、僕にとってはちょうど良いバランスかも。
コメント失礼いたします。いつもブログのコードを参考にさせていただいております。
「カタログ写真の表示」に関してですが、カーソルをあわせてズームではなく、画像クリックでメイン画像（デフォルトの画像）が切り替わるようにできないでしょうか。もしくはスライドショーのような形式にできないでしょうか。
そうすれば、カタログ写真をモバイル端末でも表示できるのではないかと考えております。
モバイル端末でもカタログ写真を表示したいというのが主旨ですので、PC端末では現行のカーソルをあわせてズームのままでも構わないのですが…。
ご教示いただければ幸いです。
申し訳ないですが、今のところスライドショー形式にする機能はついていないです。
また、その方法を書くにしても、とてもコメントでは書ききれるものではないため、教えることも難しいです。
とりあえずは、今後の改善案としてTODOリストに追加させていただこうと思います。