Amazonアソシエイトを表示するショートコードをつくってみよう

WordPressの記事の中で,amazonアソシエイトを利用して本を紹介するamazonBookというショートコードを作成してみましょう. 

使い方:

1. functions.phpにPHPコードを記述する

ショートコードには,isbn, asin, size(画像サイズ)の3つの属性を指定できるようにしましょう.

size(画像サイズ)の指定は,SX210やSL150などとします.画像サイズの指定方法については,「Amazonの商品画像のサイズを自在に変更する」が参考になります.

注意点:ショートコードの属性は小文字で定義しましょう.

参考:ショートコード 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)を参考に指定しています.

3. 本文中にショートコードを挿入する

 上に示したショートコードを本文中に挿入すると,下のように表示されます.

4797383097
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

Thank you for comment!