Amazonアソシエイトを表示するショートコードをつくってみよう
WordPressの記事の中で,amazonアソシエイトを利用して本を紹介するamazonBookというショートコードを作成してみましょう.
使い方:
1 |
[amazonBook isbn='ISBNの値' asin='ASINの値' size='画像サイズ'] |
1. functions.phpにPHPコードを記述する
ショートコードには,isbn, asin, size(画像サイズ)の3つの属性を指定できるようにしましょう.
size(画像サイズ)の指定は,SX210やSL150などとします.画像サイズの指定方法については,「Amazonの商品画像のサイズを自在に変更する」が参考になります.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
function _amazonBook( $atts ) { /* 引数(ショートコードの属性)の取り出し */ extract(shortcode_atts( array( 'isbn' => 'NA_ISBN', 'asin' => 'NA_ASIN', 'size' => 'SL210' ), $atts )); /* 商品を参照するための基本URL */ $baseURL = 'http://www.amazon.co.jp/dp/'; /* 商品画像を参照するための基本URL */ $imgBaseURL = 'http://ecx.images-amazon.com/images/I/'; /* アソシエイトID */ $id = '◯◯◯'; /* 商品を参照するためのURLを作成 */ $item = '"'.$baseURL.$isbn.'?tag='.$id.'"'; /* 画像を参照するためのURLを作成 */ $img = '"'.$imgBaseURL.$asin.'._'.$size.'_.jpg"'; /* 商品情報を表示するためのHTMLを作成 */ $html = '<!-- Amazon Associate BEGIN--> <div class="amazonBook"> <a href='.$item.' target="_blank"><img src='.$img.' alt="'.$isbn.'" border="0"></a> </div> <!-- Amazon Associate END-->'; return $html; } /* ショートコードの登録 */ add_shortcode('amazonBook', '_amazonBook'); |
注意点:ショートコードの属性は小文字で定義しましょう.
参考:ショートコード API
- 属性名は、必ず小文字に変換されてからハンドラ関数に渡されます。 値は変更されません。
[my-shortcode FOO="BAR"]
は、$atts = array( 'foo' => 'BAR' )
を生成します。
ISBNやASINはもともと大文字で表記されているので,大文字で属性を定義していました.そのため,属性がショートコードの本体(PHP)に渡せず,数時間格闘したのは良い勉強になりました.もうたぶん忘れない…
2. style.cssに表示スタイルを定義する
本を表示するためのHTMLには,divタグにamazonBookというclassを指定しています.そこで,amazonBookクラスのスタイルを定義します.
ここでは,必要最小限リンクであることが分かるように,カーソルを合わせたときにボーダーラインの色が変わるだけのシンプルなデザインです.
縦横のサイズは,A4サイズ(210 mm × 297 mm)を参考に指定しています.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.amazonBook { width: 210px; height: 297px; line-height: 297px; outline: none; text-align: center; text-decoration: none; color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); border: 5px solid #898C90; border-radius: 6px; overflow: hidden; } .amazonBook:hover { border: 5px solid #2B2B2B; color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1); } |
3. 本文中にショートコードを挿入する
1 |
[amazonBook isbn='4797383097' asin='51y35l-LhEL' size='SX210' ] |
上に示したショートコードを本文中に挿入すると,下のように表示されます.