2014.01.26

AmazonJSでサイドバーにちまっとアマゾン

WordPressでアマゾンアソシエイトを表示してます。
ネタに付随してアマゾンへのリンクをするときはいいのです。
昔の記事の商品に新しいバージョンがでてたり、記事をかくほどでもないけどお気に入りの商品をちまっと載せて置きたい。
そんな時にサイドバーに表示できたらいいなと思っておりました。
Amazon純正のは使いにくいし、なんかサイドバーに特化したプラグインでもないかな〜と数日しらべたんですが見つけられませんでした。

ネットをあてもなくさまよってたら、AmazonJSのショートコードをカスタムフィールドを使ってサイドバーに設置する方法に出逢いました!。

もう、今すぐこちら!

WordPressでAmazonのアソシエイトリンクを設置する | Webクリエイターネット
プラグインの設置のみならず、Amazonアソシエイトプログラムに登録するところから、英語で敷居の高いProduct Advertising APIの申し込み、設置のためのPHPスクリプトまで至れり尽くせりなのです!
ありがとう!ありがとう!
PHPぃ?えちょって食べれるの?というこの私にも、ほらこの通り!
amaside
ちょっとCSSをいじりました(・ω・)それしかわかんないしねw

AmazonJS

APIの設定などはWebクリエイターネットさんを見れば一目瞭然なので設置テストとプラグインの変更点だけ記したいと思います。
このAmazonJS。シンプルでとても使いやすいです。
AmazonJS (WordPress Plugin) | kwLog
制作者さまの理念を読んでなるほどと思いました。設定とともに一読されることをお勧めします!
すばらしいプラグインです!makoto_kwさま、ありがとうございます。

さて、本文への設置テスト。

うわなにこれ欲しい。茶碗…
リンクカラーなど当ブログのCSSが効いてたので、いきなり設置しても違和感がありませんでした。シンプルで押し付けない。ほんといいです。
cssに少し手を加えてみました。
v0.6から画像のサイズもショートコードで指定できるようになりました。imgsize属性でsmall, medium, largeが指定できます。
当サイトではcssをいじくってるので画像と文字部分のマージンが広くなってますが、デフォルトでは画像サイズにあわせたマージンが美しく設定されてます。

cssをオリジナルの物に替えるには作者さまのサイトの『高度な使い方』”スタイルの拡張”で説明されてます。

ダッシュボードの配色エクトプラズムってなんなの

ダッシュボードの配色エクトプラズムってなんなの

カスタムCSSにチェックをいれて、使用しているテーマの中にamazonjs.cssというファイルを作り、上書きしたいcssを変更。
.amazonjs_item と .amazonjs_item .amazonjs_indicatorのbackgroundのurlの階層を書き換えるのをお忘れなきよう。
amazonjs.jsを替える場合も同様にテーマ内にファイルを作り、チェックを入れてください。

カスタムフィールドを使いサイドバーに設置する

カスタムフィールド用の便利なプラグインを使ってないので、デフォルトのカスタムフィールドの場合になります。
まず、土台となる固定ページを作りました。
カスタムフィールドの”名前”の新規追加を押して分かりやすい名前を付け、値にAmazonJSの出してくれるショートコードをペースト。
『カスタムフィールドを追加』ボタンを押して、ページを公開して準備が整いました。
ループ以外の場所にカスタムフィールドを出力する時、ページのidが必要なので控ておいた。(『短縮URLを取得』ボタンを押すと簡単にidわかりますん)

サイドバーのテンプレートの(私の場合はsidebar.phpです。そのまんまですね。)設置したい場所に、スクリプトを追加。

これ、Webクリエイターネットさんのコードまんまなんですけど、違うところはget_post_metaの第一引数に固定ページのidを直接持ってきているところです。
それだけです(∩・ω・)∩。

コメントが入れたかったので、カスタムフィールドの値に直にタグを書きました。これはいいのかどうかわからないw

できなかったこと

複数の商品を表示するので、値に複数のショートコードを入力します。
カスタムフィールドの値の窓が狭いのと(伸びるけど)、変なコメントを入れたりして見た目にごちゃごちゃだし、複数のカスタムフィールドで管理したいような気がしました。
一つの”key”に複数の”value”ですね。
forecheでクルクルしてやればいいのかなーと思いましたが、そうするとカスタムフィールドでショートコードを使う方法が分からないので断念しますた。
逆転の発想で、掲載したい数だけ別名のカスタムフィールドを作ったろーかなーと思いましたけど…却って不便そうなので…w

コメントをどうぞ



PageTop