プラグインを利用せずにAmazonアソシエイトリンクの設置する
ウィジェット作成 + Ajax + 遅延読み
サイドバーにAmazonアソシエイトの商品リンクを載せることにした。
Webエンジニアブログは、WordPressの技術よりの情報を中心にオープンソースソフトウェアの使い方に関する記事を主要なコンテンツとしているので、技術系書籍の商品リンクを画像で載せることにした。
ウィジェット作成
テーマに直接変更を加えずに、オリジナルのサイドバーウィジェットを作成しYoutube動画を表示する方法は既に記事にしてある。
WordPress YouTube動画を表示するサイドバーウィジェットを追加
リンク先の記事を参考にすれば、HTMLの知識は必要になるが、意外と簡単にオリジナルのサイドバーを作成できることを知ることができる。
Amazonの商品リンクを表示するサイドバーウィジェットについては、HTMLの枠だけを表示し、内側の商品リンクについてはAjaxで取得することにした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function amazon_widget() {$content = <<< EOF<aside> <p class="form-allowed-tags">本</p> <div id="amazon" class="gallery gallery-columns-1"> </div></aside>EOF; echo $content;}wp_register_sidebar_widget( 'ama_widget', 'Amazon Widget', 'amazon_widget'); |
divに割り当てたid属性をキーにして非同期でAmazonの商品リンクをレンダリングすることになる。
Ajax
WordPressには、Ajax専用のインタフェースが用意されているので、それを利用すると効率的にWordPressにAjaxを統合できる。Webエンジニアブログでは、以前Ajaxインタフェースについて書いたことがある。
上のリンクの記事では、ソーシャルボタンのHTMLコードをWordPressのAjaxインタフェース経由で取得し表示する方法について書いてある。
Amazonアソシエイトの商品リンクもソーシャルボタン同様にHTMLで表現されるため、リンク先の記事を応用し商品リンクをAjaxで取得し非同期化するためのノウハウを得ることができる。
WordPressのAjaxについての純粋な記事として
という記事もあるので参考にして頂きたい。
ランダム処理
Ajax経由で商品データを取得する際には、事前にAmazonの商品リンクを配列で定義しておいて、その中から5をランダムに選択して、Ajaxレスポンスとして返すようにした。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $amazon_url = array( 'url1', 'url2', 'url3');// 配列の中からランダムにキーを5つ取得$rand_keys = array_rand($amazon_url, 5);// 部分HTMLの生成処理$c = count($rand_keys);for( $i = 0; $c > $i; $i++ ){ $amazon .= '<figure class="gallery-item">'; $amazon .= $amazon_url[$rand_keys[$i]]; $amazon .= '</figure>';} |
$amazonには、Ajaxでレスポンスするための部分HTMLが格納される。そのため、$amazonをjson化してレスポンする感じになる。
遅延読み
フロント側では、部分HTMLの遅延読みを行い、閲覧ユーザーの表示体感速度を軽減するように工夫をした。遅延読みについても、
上のリンクで記事にしてあるので、参考にして頂きたい。
今回は、
1 2 3 | setTimeout(function(){ $('#amazon').append(response.amazon);}, 1000); |
amazonというid属性が割り振られたHTMLに、Ajax経由でレスポンスされた部分HTMLを埋め込む処理をフロント側で行う処理を追加した。
setTimeoutを利用することで、レンダリングを遅延させることができ、その結果ブラウザの表示速度を改善することが出来る。