おすすめページを作成

WordPress , ,

興味のあるものや購入したものをAmazonインスタントストアでテーマ毎にまとめ、おすすめページとして一覧として表示できるようにしました。

Amazonインスタントストアを表示させる上で色々悩んだ。

当初は、AmazonインスタントストアをWordpressの固定ページにiframeで埋め込みテーマ毎にページを作成しようと考えていました。

ただ、ここで問題。

以前の記事になりますが、Amazonインスタントストアは、PCやスマホでの表示が使いわけが大変難しい。これを解決するために、レスポンシブ化を行いましたが、縦表示をピクセルで指定しないといけないという問題がありました。

Amazonのインスタントストアをレスポンシブ化

妥協のレイアウトにした

そこで、考えたのがインスタントストアのウィジェットを表示させること。わざわざインスタントストアをそのまま表示させるのではなく、ウィジェットとして一部を表示させるということ

インスタントストアウィジェット

このウィジェットは、表示の大きさをある程度指定することができます。

ウィジェット表示設定

そこで、300×250サイズで表示させることにしてみました。このサイズであれば、スマホでも見切れるということはなくなるだろうと踏みました。

ただの画像であれば、表示の際に大きさが調整されるのですが、このウィジェットはうまく調整されない・・・おそらくCSSあたりをいじればどうにかなるんだろうと思うのですが。めんどくさい。

そんなこともあり、ウィジェットで表示させたのがこんな感じです。

ウィジェット表示

ブロック毎にわかれていい感じです。
とりあえずという感じで、各テーマのタイトルは、普通に文字を打ち込んでいますが、WEBアイコンなどで調整しようと考えています。

実際に購入しているものもあるのでプラグインでレビューの記事表示

ここで、実際に使ったことがあったり、購入しているものに関しては、記事を書いたりしているのでレビューの記事のみを表示するために「Recent Posts Widget Extended」を使いました。

したのような感じになりました。さらに、表示順に関しては、時系列にすると過去の記事が見れない問題があるので、とりあえずランダム表示に設定しています。

レビュー表示

是非、おすすめページをごらんください。

 

Sponsored Link

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA