AmazonLink のサムネイルをデカくする

WP-Amazon は内外で最もよく使われていたプラグインと言ってもよく、僕もずっとこれを使ってきました。が、検索結果の表示数が最大でも３個と少なく、しかもページネーションしないため、ズバリの書名を入力しなければ検索結果に出てこないという、かなりストレスのたまる運用をしてきました。そこで、いつだったか忘れてしまいましたが、商品検索結果を10個に増やす方法を誰かのページで読み、しかも検索して MD で紹介するのは邦語の書籍に限っていたので、ずっと「本」だけを検索して11個の結果を表示するという使い方をしてきたのです。

しかし、今年に入って最新版の 2.1 が公開されてから、WP-Amazon の開発は止まってしまいました。これはこれで残念ですが、もっと困ったことに・・・洋書を検索しようとしても元に戻せなくなったのでした（笑。もちろん、WordPress 2.5.x でも、一つ前のバージョンである WP-Amazon 2.0 Beta 1.1 を手直しして使えばよいのですが、「本」だけでなく「洋書」を検索範囲に指定している方法が分からず（というか、フォームタグを JavaScript で出力している箇所は分かっているのですが、どう見ても select タグに他のエントリーがないので、詳しく見てはいませんが選択肢も AWS から読み込んでいるのでしょうね）、そのままにしてありました。

その後、このほど AmazonLink というプラグインがあることを知って、いずれは使えなくなるであろう WP-Amazon からの移行を決めました。導入は WP-Amazon と同じように簡単なので、WordPress のプラグインをふつうに追加できている方は特に問題なく使えるでしょう。しかし、試してみた当初は一つだけ気になる点があって、ここを自分の利用目的に合わせてカスタマイズしたという話が今回のテーマです。それは、サムネイルのサイズが小さいということでした。

AmazonLink の設定ページには、標準のサイズと小さいサイズを切り替えるオプションもついているのですが、どちらもアフィリエイトリンクを表示するときの、高さ75ピクセルくらいのサイズなのです。というか、大小の違いが殆ど分からないくらいだったので、いつも MD で使っている高さ 160 ピクセルのサムネイルに強制してみようと思ったのです。

まず、AmazonLink の 0.9.2 を使っている前提で、/plugins/AmazonLink/js/AmazonLink_post.js というファイルを開いて、94行目付近を探して下さい。

var itemTemplate = new Template(
“<tr><th class=’number’>#{index}</th>” +
“<td class=’itemImage’><a href=’#{detailUrl}’ target=’_blank’><img src=’#{imageUrl}’ width=’#{imageWidth}’ height=’#{imageHeight}’ alt=’商品イメージ’ /></a></td>” +
“<td class=’infomation’><a href=’#{detailUrl}’ target=’_blank’ title=’Amazon.co.jp の商品ページへ’>#{title}</a><br />” +
“<code title=’AmazonLink コード’>[amazon]#{asin}[/amazon]</code><!– <input type=’button’ value=’挿入’ name=’yo_amazonLink_insertCodeButton#{index}’ id=’yo_amazonLink_insertCodeButton#{index}’ title=’AmazonLink コードを挿入する’ /> –></td></tr>”
);

というコードがあります。上記のうち、強調した箇所を、

height=’160′ alt=’#{title}’

のように変更しました。つまり、サムネイルの高さを 160 ピクセルに強制するわけですが、版型によって横幅は変わりますので、width 属性は除外しました。もちろん、これはアクセシビリティの基準からすればよろしくないことなので、更に詰める必要はあります。また、alt 属性の値が「商品イメージ」というのは、確かに DVD や時計のサムネイルを使う人もいると思うので、汎用性はもたせてあると思いますが、同じ alt 属性値が一つのページにたくさんあるのは、これもアクセシビリティの基準からするとよろしくないと思われます。こちらは、書籍の画像だけに特化するという前提で、書籍のタイトルをそのまま使うことにしました。

次に、同じファイルの 122 行目あたりを見て頂くと、

if ( image )
{
imageUrl = image.URL;
imageWidth = image.Width["#text"];
imageHeight = image.Height["#text"];
}

という箇所があると思います。これは、画像のファイル名を合成している部分なのですが、アマゾンの商品画像ファイルのファイル名は最後に画像の高さが数字として入っていて、それ以外は同じという命名規則となっていまず。そこで、上記の箇所を、

if ( image )
{
imageUrl = image.URL;
var str = imageUrl.replace(/SL75_.jpg/, “SL160_.jpg”);
imageUrl = str;
imageWidth = image.Width["#text"];
imageHeight = 160;
}

のように変更しました。画像の高さは 160 ピクセルで固定し、ファイル名は imageUrl オブジェクトに replace() メソッドを使って、75 と 160 を置き換えただけです。

その他の変更点は、検索したいメディアを制限するだけなので、やってもやらなくてもよいでしょう。が、デフォルトだと不要なカテゴリーがあるかもしれませんので、/plugins/AmazonLink/AmazonLink.php の 503 行目あたりから始まる、カテゴリーの設定部分から不要な配列定義を取り除き、例えば僕が使っている場合だと、

function _dbxPost()
{
global $post;

$categories = array(
__(‘本’, $this->i18nDomain) => ‘Books’,
__(‘洋書’, $this->i18nDomain) => ‘ForeignBooks’,
__(‘エレクトロニクス’, $this->i18nDomain) => ‘Electronics’,
__(‘ソフトウェア’, $this->i18nDomain) => ‘Software’,
);

という具合にしてあります。検索するときにいちいちドロップダウンリストを上から下へと舐めるのが嫌だという方はお試し下さい。

以上のカスタマイズで、

のように大きなサムネイルをページに挿入できます。

ちなみに、検索結果の下に目当ての画像があったとき、その画像を本文の textarea まで持っていきたいのに、ドラッグしてブラウザのレンダリングペインの上端に来てもスクロールしないという問題があります。IE7 や Opera のように、ページ全体を縮小できる場合は、縮小したページで動かすという荒技もできるでしょうが、Firefox ではページ全体の拡縮は（プラグインを入れなければ）できないので、WP-Amazon のようにページの右端にあると便利ですね。

いまのところ、他の理由もあって WP-Lite というプラグインを導入し、編集画面で不要なフォームエリアを非表示にすることで、AmazonLink のフォームエリアがなるべく上に来てくれるようにしてあります。それでも、検索結果の下に来るとドラッグできませんから、そういうときは目当ての書名が正確に分かった時点で、その正確な書名を入力して検索結果の上位にくるようにしています。（ただし、WP-Lite を使うと記事を投稿するときにデフォルトで幾つかのカテゴリーが勝手に選ばれていたりするので、非表示設定にすると見えなくなるだけに要注意かもしれません）

それはそうと、編集画面の右カラムって、プレビューボタンや年月日のフォームしかなくてもったいないですよね。カテゴリーとか、コメントと ping のチェックボックスとかはこちらにできたらいいのになぁ。っていうか、2.3.x 系で可能だった、フォームフィールドのドラッグが 2.5.x 系ではできなくなってるのが辛い。