作成し、使ってみて、どうしてこれを今まで。。と思うほどには便利でした。 このブログではこういう形では使わないと思いますが、違う形でこのプラグインで何か作成してみたいなと思います。
作成結果イメージ
※ 実際に作成したものです。

プラグイン『Custom Field Template』
これを作成するために、『Custom Field Template』というプラグインを使用しました。
『Custom Field Template』の導入
プラグインの新規追加で『Custom Field Template』を検索してインストールして有効化する。
『Custom Field Template』の使い方
有効化が完了するとダッシュボードの設定内に「カスタムフィールドテンプレート」が現れますのでクリックします。

「カスタムフィールドテンプレートオプション」が開きます。 TEMPLATE #0、テンプレートタイトル:デフォルトというのがあるかと思います。
これをお手本にして、Kindleのアフィリエイトに特化したTEMPLATE #1 を作成します。 新たに作成するTEMPLATE #1のテンプレートタイトルは「Amazon Kindle テンプレート」としました。(1のところ)

テンプレートコンテンツに入力した内容は(2のところ)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
[NO] type = text label = 1 [タイトル] type = text label = 本タイトルの入力 [紙の本の価格] type = text [Kindle 価格] type = text [OFF] type = text [発売日] type = text [著者] type = text [内容紹介] type = textarea rows = 6 cols = 70 tinyMCE = true htmlEditor = true mediaButton = true [Amazon] rows = 6 cols = 70 type = textarea |
としました。
項目 | 内容 |
---|---|
type = text | 1行程度のテキストを入力するのに適しているタイプです。 |
type = textarea | 複数行のテキストを入力するのに適しているタイプです。 |
label = | そのフォームにラベルを付けることができます。 |
tinyMCE = true | そのテキスト入力フォームに「ビジュアルエディタ」を使えるようにするかをコントロールできます。デフォルトはfalseなので、使うなら「true」に。 |
htmlEditor = true | そのテキスト入力フォームに「htmlエディタ」を使えるようにするかをコントロールできます。 デフォルトは「true」なのですが、「ビジュアルエディタ」を「true」にしているので、切り替えが可能なようにこちらも「true」に。 |
mediaButton = true | そのテキスト入力フォームに「メディアボタン」を使えるようにするかをコントロールできます。trueにすれば、そのフォームに画像や動画などを簡単に差し込めるようになります。 |
入力が完了したら、「オプションを更新」します。
Shortcode formatの設定
次にショートコードフォーマットを設定します。
同じ画面の下の方へスクロールすると、ショートコードフォーマットの設定メニューが現れます。クリックすると展開するので、まずはポチっと。

ここも先ほどと同じようにサンプルとしてFORMAT #0があります。 では、新たにFORMAT #1を作成していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="amazonAfi"> <h3>[タイトル]</h3> <span class="amazonAfi-image">[Amazon] </span> <div class="amazonAfimain"> <p>紙の本の価格: <del>[紙の本の価格]</del></p> <p>Kindle 価格: <span class="price">[Kindle 価格]</span></p> <p>OFF: <span class="priceoff">[OFF] </span></p> <p>発売日: [発売日]</p> <p>著者: [著者] </p> <div class="amazonAficontent"> ※ 内容紹介 <p>[内容紹介]</p> </div></div></div> |
cssである程度見栄えを整えて
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
#amazonAfi { width: 100%; overflow: hidden; margin-bottom: 30px; } #amazonAfi h3 a { color: #C03; } #amazonAfi h3 a:hover { text-decoration: underline; } #amazonAfi span.amazonAfi-image{ float: left; padding: 0 30px 10px 0; border: 1px solid #DDD; } #amazonAfi p{ margin: 0 5px 0 0; } #amazonAfi .#amazonAficontent { width: 100%; overflow: hidden; margin-bottom: 20px; } ##amazonAfi span.price{ color: red; } ##amazonAfi span.priceoff{ font-weight: bold; } |
カスタムフィールドテンプレートの入力
いよいよ設定したカステムフィールドテンプレートに入力していきます。 新規投稿から記事作成画面へ行き、下へ少しスクロールすると、カスタムフィールドテンプレートというのがありますので、そこから先ほど作成した「Amazon Kindle テンプレート」を読み込んで入力フィールドを呼び出します。

そして、上の図のように各項目へ入力していきます。 最後のフィールドのAmazonというところには、ご自身のAmazonアソシエイトタグを入力します。
完了したら、右上の「保存」をクリック。
カスタムフィールドの表示
記事投稿内に、セットしたカスタムフィールドを呼び出すには、下記のショートコードを利用します。(今回は、Format#1を使用するので)
1 |
[cft format=1] |

さいごに
今回は、このような使い方をしましたが普通に自社の商品紹介でも使えます。これをもっと上手に使えるアイデアがあれば。。 あと、このプラグイン結構機能が多いです。思ったよりたくさんいろいろなことが出来るプラグインだと思います。
Pingback: 【ショートコードを使う方法がおすすめです】WordPressのカスタムフィールドテンプレートプラグインのショートコードで画像を出力する方法()