さて、ブログデザインチョコチョコいじっています。
お気づきの方もいるだろうが、サイドバーの下側にアマゾンのおすすめを表示するウィジェットを追加してみた。
自分がほしいものを画像つきで表示している。
一時期アマゾン公式のウィッシュリストウィジェット使っていたがあまり操作性よくなかったからはずしたんだよね。
そのかわり人気商品を自動で表示するウィジェットを置いてる(一応今もおいてる)んだけど、やっぱり自分の好みのものを表示させたいから自前で実装した。
と言ってもプラグ印を使っていじっただけなんだけどね。
今回使ったのは記事本文でも使っているAmazonJSってプラグイン
http://wordpress.org/extend/plugins/amazonjs/
これ自体は記事にアマゾンアソシエイトのリンクを独自UIでのっけてくれる便利なもの
投稿時にアマゾンの商品を検索できて、自動でショートコードを貼り付けてくれる。
サイドバー用のウィジェットじゃないけど便利だから前から使っていた。
サイドバーは別なプラグインを探していたけど、見つからなかったのでこれを機能拡張して使うことにした。
サイドバーのテキストウィジェットでショートコードを使えるようにするためにまず次のプラグインを導入
http://weble.org/2011/09/27/wordpress-widget-shortcode
これでテキストウィジェットを追加して、本文にamazonjsのショートコードを記述すると商品が表示されるようになる。
ただ、そのままだと文字が多すぎて見にくいので、写真と商品名のみにする。
amazonjsはテンプレートとCSSを拡張できる機能があるのでそれを使う。
現在使っているテーマのフォルダ直下(例：./wp-content/themes/twentyeleven)に下記のファイルを追加して、amazonjsの設定でテンプレート拡張とカスタムCSSの使用にチェックする。
(function ($) {
$.amazonjs.addTemplate(function(partial){
return {
Side:
'<div class="amazonjs_item_side">'+
partial.mediumImage+
'<h4><a href="${DetailPageURL}" title="${Title}" target="_blank">${Title}</a></h4>'+
'</div>'
};
});
})(jQuery);
@CHARSET "UTF-8";
.amazonjs_item_side {
margin:.5em 0 1em 0;
padding:.5em;
border:1px solid #ddd;
display:block;
font-size: 14px;
-webkit-box-shadow: 4px 4px 2px #eee;
-moz-box-shadow: 4px 4px 2px #eee;
box-shadow: 4px 4px 2px #eee;
background: #fff url(./images/amazonjs.png) no-repeat right bottom;
}
.amazonjs_item_side * { margin:0; padding: 0; }
.amazonjs_indicator {
display:block;
height:60px;
border:0;
background: transparent url(./images/ajax-loader.gif) no-repeat center 5px;
margin: 0 auto;
font-size:.8em;
text-align:center;
line-height:100px;
}
.amazonjs_item_side h4 {
clear:none; margin:0;border:0;
font-size:.9em; line-height:1.5em;
font-weight: bold;
text-shadow: 0 1px 0 white, 1px 2px 1px rgba(0, 0, 0, 0.15);
}
.amazonjs_item_side .amazonjs_image {
display:block;
border:0;
}
.amazonjs_item_side .amazonjs_info {
display:block;
padding-left:1em;
border:0;
}
.amazonjs_item_side .amazonjs_info ul {
list-style: none;
margin:0; padding:0;border:0;
}
.amazonjs_item_side .amazonjs_info ul li {
list-style: none;
font-size:.8em;
line-height:1.5em;
margin:0;border:0;
}
.amazonjs_item_side .amazonjs_info ul li b {
margin-right:.5em; color:#666; font-weight:normal;
}
この設定はとりあえず適当
JSは画像と文字を表示させるようにして、クラス名を標準のamazonjs_itemからamazonjs_item_sideに変更してSideという名前で登録
CSSはamazonjs_itemが入っていたところをとりあえずamazonjs_item_sideに変更したやつを全部コピって標準じゃ画像の横に表示されていた文字を下に持ってくるように変更
これで右のウィジェットのようになった。
ここまで変更して思ったけど、これだったら標準の画像の未表示のスクリプト引っ張ってくるだけでもあんまり変わりない…
まぁ、見た目はこっちのほうがスタイリッシュな気がするからいいか
本当は価格ぐらいまで表示させようかと思ったけど、現在価格が出てこない。
参考価格のほうが表示させたりする。あと、テンプレート拡張の使い方がおかしいのかレビューのリンク表示とかどうするのかよくわかんない。
とりあえずシンプルにまとめてみた。
載せたい商品は手動でテキストウィジェットを更新ｗ
[amazonjs asin=”B005EN6VOW” locale=”JP” tmpl=”Side” title=”LOGICOOL タブレット キーボード for iPad TK600″]
見たいな感じに入力する。
面倒だけどそんなに頻繁に入れ替えるつもりないからいいか
なんか、どんどん2chまとめみたいなアフィブログっぽくなってる気が…
そんなつもりはないんだけどなぁ
まぁ、そこまでお金稼ごうとは思ってないしサーバ代維持くらいできないかな見たいな淡い期待をもって更新してます。
よければ協力してくれたらうれしいです。
まぁ、こんな感じです。
もっといいプラグイン見つけたらまた紹介するね。
コメント