11月
11
2011

【Custom Field Template】アフィリエイト商品ページの構築を高速化できるプラグイン

このエントリーをはてなブックマークに追加 著者: crow
custom_field

WordPressのカスタムフィールドは、とっつきにくい印象をもたれている方も多いかと思いますが、活用することで同じフォーマットのページをスムーズに作れるなどのメリットがあります。

たとえば、楽天で加湿器比較などの比較サイトを作りたい時、あるいはAmazonアソシエイトを使ったCDのレビューサイトを作成したいときなどに効果テキメンのプラグインをご紹介します。

【Custom Field Template】の導入

Custom Field TemplateはWordPressのダッシュボードメニューからプラグインの新規追加で検索&インストールが行えます。

もちろん、下記よりダウンロードしてインストールすることも可能です。

ダウンロード:Custom Field Template

インストールが無事に完了したら有効化して完了です。

【Custom Field Template】の使い方

カスタムフィールドテンプレートの設定

有効化が完了するとダッシュボードの設定内に「カスタムフィールドテンプレート」が現れますのでクリックします。

「カスタムフィールドテンプレートオプション」が開きます。

TEMPLATE #0 にデフォルトのテンプレートタイトルがついているかと思います。
テンプレートコンテンツに記述されているサンプルをお手本にして、CDのアフィリエイトに特化したTEMPLATE #1 を作成してみます。

新たに作成するTEMPLATE #1のテンプレートタイトルは「Amazonテンプレート」としました。
テンプレートコンテンツに入力した内容は

[タイトル] 
type = text 
label = CDタイトルの入力 
  
[標準価格] 
type = text 
  
[割引価格] 
type = text 
  
[発売日] 
type = text 

[発売元] 
type = text 

[アーティスト] 
type = text 

[送料込] 
type = text 
  
[品番] 
type = text 

[JANコード] 
type = text
size = 50
 
[収録時間] 
type = text 

[ジャンル] 
type = text 
 
[内容紹介]  
type = textarea
rows = 6
cols = 70
tinyMCE = true 
htmlEditor = true 
mediaButton = true  
  
[Amazon]
rows = 6
cols = 70
type = textarea   
  

としています。

ちなみに『type=○○』が何を表しているかというと、

・type = text
 1行程度のテキストを入力するのに適しているタイプです。

・type = textarea
 複数行のテキストを入力するのに適しているタイプです。
 『rows』や『cols』で入力欄の幅と高さをコントロールできます。

・size = ○○
 テキスト入力フォームの幅をコントロールできます。
 指定しなくても問題はありませんが、今回のケースでは
 JANコードが長くなりがちでしたので指定しています。

・label = ○○
 そのフォームにラベルを付けることができます。
 「ここにはこれを入力してください」とか注釈を付けておくと便利かも。

・tinyMCE = true
 そのテキスト入力フォームに「ビジュアルエディタ」を使えるようにするかを
 コントロールできます。デフォルトはfalseなので、使うなら「true」に。

・htmlEditor = true
 そのテキスト入力フォームに「htmlエディタ」を使えるようにするかを
 コントロールできます。デフォルトは「true」なのですが、「ビジュアルエディタ」を
 「true」にしているので、切り替えが可能なようにこちらも「true」に。

・mediaButton = true
 そのテキスト入力フォームに「メディアボタン」を使えるようにするかを
 コントロールできます。trueにすれば、そのフォームに画像や動画などを
 簡単に差し込めるようになります。

「オプションを更新」しましょう。

Shortcode formatの設定

次にショートコードフォーマットを設定します。

同じ画面の下の方へズズズイっとスクロールすると、ショートコードフォーマットの設定メニューが現れます。クリックすると展開するので、まずはポチっと。

FORMAT #0にサンプルが表示されています。
もし、ショートコード内にPHPも組み込みたい場合は、「PHPを使用する」にチェックを入れて、このメニューの一個下にある「PHP CODE」に入力して下さい。

それでは、新たにFORMAT #1を作成してみたいと思います。

内容はこんな感じ。

[Amazon]
<table id="spec">
  <tr>
    <th>タイトル</th>
    <td colspan="3"><strong>[タイトル]</strong></td>
  </tr>
  <tr>
    <th>標準価格</th>
    <td>[標準価格] (税込)</td>
    <th>割引価格</th>
    <td>[割引価格](税込)</td>
  </tr>
  <tr>
    <th>発売日</th>
    <td>[発売日]</td>
    <th>発売元</th>
    <td>[発売元]</td>
  </tr>
  <tr>
    <th>アーティスト</th>
    <td>[アーティスト]</td>
    <th>送料込</th>
    <td>[送料込]</td>
  </tr>
  <tr>
    <th>収録時間</th>
    <td>[収録時間]</td>
    <th>ジャンル</th>
    <td>[ジャンル]</td>
  </tr>
  <tr>
    <th>品番</th>
    <td>[品番]</td>
    <th>JANコード</th>
    <td>[JANコード]</td>
  </tr>
</table>
<p>※内容紹介</p>
<p>[内容紹介]</p>

「オプションを更新」しましょう。

※WordPressの自動整形を止めているので、上記サンプルでは<p>タグをわざわざ記述しています。

ついでにcssである程度見栄えを整えているので、cssのサンプルもペタっと

}

table#spec {
    width: 455px;
    border: 1px #E3E3E3 solid;
    border-spacing: 0;
}

table#spec th {
    width: 80px;
    padding: 5px;
    border: #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    background: #EFEFEF;
    line-height: 120%;
    text-align: center;
}
table#spec td {
    padding: 5px;
    border: 1px #E3E3E3 solid;
    border-width: 0 0 1px 1px;
    text-align: right;
}

カスタムフィールドテンプレートの入力

いよいよ設定したカステムフィールドテンプレートに入力していきます。

新規投稿から記事作成に参りましょう。

先ほど指定した「Amazonテンプレート」を読み込んで入力フィールドを呼び出します。

そして、上の図の要に各項目へ入力していきます。
今回はAmazonから直接コピペさせて頂きました。

最後のフィールドはご自身のAmazonアソシエイトタグを入力してください。

完了したら、右上の「保存」をクリック。

すると、上の「カスタムフィールド」へ入力した内容がセットされます。

完成までもうちょっとです!

カスタムフィールドの表示

記事投稿内に、セットしたカスタムフィールドを呼び出すには、下記のショートコードを利用します。

[cft format=1]

なので、投稿内の記述はこれだけ。

完成品をみてみましょう。

実際の表示

時間の割に、結構見栄えの良いのが出来たのではないでしょうか?

ちなみにWPtouchを導入しておけば、

ざっくりですがこんな風に表示されます。

テーマ自体を弄れば、もっと訴求力のあるページに仕上げられますね。

提示させて頂いたサンプルコードは今すぐにでも使えますので、商品レビューなどのアフィリエイトサイトの構築などに役立ててみてください。

※プラグインについては、投稿時のVersionにて確認・記事の投稿を行っております。

5 Comments コメントを投稿する!

Thank you for your Comment! to 人気のWordPressプラグイン一覧~2013年

Trackback URL

無関係な内容や、内容のないと管理人が判断したものは承認いたしません。