サイドバーにAmazonのリンクをランダムに表示する

サイドバーの「FAVORITE ITEMS」の部分には以前から、お気に入りのものや最近買ったものなどを載せています。これまでは Amazon純正のウィジェットを貼り付けていたんですが、どうもこれを利用するとページ末尾に不明な空白部分が現れてしまいデザインが崩れてしまいます。
というわけで、純正ウィジェットの使用を止めて、テーマ作成ついでにPHPで少し工夫して表示するようにしてみました。

  • Amazonのリンクは画像だけにする。
  • タイトルやコメントを表示できるようにする。
  • 関連記事があればリンクを追加する。
  • 登録してあるアイテムの中から3つをランダムに表示する。

という感じで、書いてみたコードが以下になります。

<?php
$amz_lnk[] = 'Amazonのリンクなど表示したいHTMLタグ';
$amz_ttl[] = 'タイトル';
$amz_pst[] = '記事URL';
$amz_dsc[] = 'コメント';

//$amz_lnk[] = '';
//$amz_ttl[] = '';
//$amz_pst[] = null;
//$amz_dsc[] = null;

// ランダムに3つを抽出して表示する
$amzlinks = range(0,count($amz_lnk)-1);
shuffle($amzlinks);
foreach(array_slice($amzlinks,0,3) as $num){
   echo '<div class="amazon-item">';
   echo $amz_lnk[$num] . '<br />';
   echo '<span class="amazon-title">' . esc_html($amz_ttl[$num]) . '</span><br />';
   if($amz_dsc[$num]){
      echo '<span class="amazon-desc">' . esc_html($amz_dsc[$num]) . '</span>';
   }
   if($amz_pst[$num]){
      echo ' <a href="' . home_url($amz_pst[$num]) . '" class="amazon-post">→関連記事はこちら</a>';
   }
   echo "</div>\n";
}
?>

$amz_lnk[] に、Amazon公式サイトで作成した画像リンクや、リンク作成サービスで作成したHTMLタグをシングルクォーテーションで括って定義します。(タグ内にシングルクォーテーションが含まれていないこと)
$amz_ttl[] には表示したいタイトル文字列を定義。
関連記事があれば $amz_pst[] にURLを書いておくとリンクタグを出力します。URLはブログのルートからのパスだけ("http://ドメイン/"以降の部分)とします。なければnullを入れておきます。
$amz_dsc[] にはコメントや説明文を書きます。なければnullを入れておきます。

$amz_lnk[]~$amz_dsc[] までをひとかたまりにして、いくつでも登録しておくことができ、その中からランダムに3つだけ選択して表示されます。
15行目の「3」を変更すると表示したい項目数を変更することができます。

ちなみに当ブログでは上のコードを sidebar-amazon.php というファイルで作成して、sidebar.php から以下のように呼び出しています。

<?php get_template_part('sidebar-amazon'); ?>

あ、ウィジェットを使用している場合は前後のタグ追加など、テーマに合わせて修正が必要と思います。
当ブログの新しいテーマではウィジェットを使っていないため、直接コードを書くようにしましたが、プラグイン&ウィジェット化して項目の情報をDBに保存するようにしても面白いかもしれませんね。
まとまった時間ができたらやってみようかな…


COMMENT

コメントをどうぞ

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)