WordPress − カスタムフィールドの値をサイドバーに
Posted on | 1月 16, 2012 | No Comments
ちまちまとWordpressの改造をしては自己満足に浸っている今日この頃です。
サイドバーに置いていたAmazonのウィジェットなんですが、こうした形で商品類をリスト化してサイドバーに載せられるようなプラグインないかなぁと探していたんですがなかなかなくて…
リスト変更するのにいちいちAmazonにログインするのが面倒なんですよね。
以前使ってたBlognのモジュールにZonuというアマゾンアソシエイト支援ツールがあったのですが(Amazon APIの都合からか今は動作しない模様)、こういうのWordpressでもないかなぁと思いつつ探してたのですがなかなかみつからず、かと言って自作なんてスキルはないし(–;)
あれこれググってるうちに、既存のツールとちょっとした改造でなんとなくそれっぽいことが出来そうなことが判明。
使うのは前回メモったプラグイン「Amazon Reloaded for WordPress」とWordpressのカスタムフィールドと言う機能。
プラグインの方は投稿フォームにAmazonのリンクを挿入出来るプラグインなら何でもいいんですけどね。
現在サイドバーに表示させてるAmazonリンクがそれです。
↓こういうやつ

まあ、前置き長かったけど続きにメモメモ↓
「Amazon Reloaded for WordPress」の設置方法に関しては以前の記事やら関連サイト等を参考にと言うことで割愛。
- Amazonリンクの一覧ページを載せる管理画面的なページを作成
ブログ記事・固定ページのどちらでもいいけど一覧ページを非表示にする際の手間を考えて固定ページに設定。
固定ページを新規で作成し「WordPress – 特定ページを非表示」でメモったように非表示に設定。 - カスタムフィールドの設定
投稿編集画面の「カスタムフィールド」を設定。
「名前」を新規追加。とりあえずamazon_listと命名。カスタムフィールドが表示されない場合、画面上部にある「表示オプション」をクリックして「カスタムフィールド」の項目にチェック。
- 「Amazon Reloaded for WordPress」で検索した内容をカスタムフィールドに入力
プラグインから直接カスタムフィールドには行かないようなので、投稿画面に入力された内容をコピペ。
「カスタムフィールドを追加」でいくつでも指定出来るので好きなだけどうぞ(^^;)
とりあえず、投稿画面の側の準備は終了。
次はテーマを編集。
使用するwordpressのテンプレートタグは
カスタムフィールドを表示させる「get_post_custom_values」と特定のカテゴリorページを表示させる「query_posts」。
- リストを表示するテンプレートを編集
現在使用してるElements of SEOのテーマで右サイドバーのテンプレート「r_sidebar.php」を編集しました。
で、表示させる場所に下記のコードを追加。<ul id="ama_list"> <?php $posts = query_posts('page_id=◯◯'); foreach($posts as $post): $ama_values = get_post_custom_values('amazon_list'); shuffle($ama_values); $ama_post = array_rand($ama_values,5); foreach ( $ama_post as $amakey) { echo "<li>$ama_values[$amakey]</li>"; } endforeach; ?> </ul>query_posts('page_id=◯◯');で1で作った固定ページのIDを指定。
get_post_custom_values('amazon_list');では2で作ったカスタムフィールドの名前を指定。
表示させる件数はarray_rand($ama_values,5);の数字の部分を変更。上記のコードだとカスタムフィールドの「amazon_list」に入力した値からランダムに5件を順番をシャッフルして表示させてます。
管理画面的に使わないでブログ記事のカスタムフィールドに直接リンクを入力してってもいいんでしょうけどね。
それだと表示させたくなくなったアイテムを探すのが面倒そうだなと思ったので、一括管理の方向でやってみることにしました。
Amazonのリンクでなくても、画像とかを入力してランダムで表示させるとか…?そう言った使い方もできそう。
他にうまい使用例が思いつきませんが(^^;)
とりあえず動いてるのでいいかな…といった感じです。
Comments
Leave a Reply






