WordPress プラグイン Custom Field Templateの使い方


ビギナーにはちょっとわかりにくい「カスタムフィールド」。
使い方によってはとても便利な機能なのです。基本的な使用方法は「カスタムフィールド」の入力項目の「名前」と「値」を 追加して、この「メタデータ」を取得して表示します。
使い方の例)・・カスタムフィールドでサムネイル表示

 

カスタムフィールドテンプレートを使用すると下記のようなAmazonのリンクも簡単にできます。

Webデザイナーのための WordPress入門 3.x対応 テーマカスタマイズからCMSサイト構築まで (Books for Web Creative)

WordPressデザインブック3.x対応

 

Custom Field Templateのダウンロード

Custom Field Templateプラグインは 同じフォーマットでの入力が多い場合には便利なプラグインです。

  • ダウンロード: Custom Field Template plugin
  • 解凍後、ファイルをFTPで/wp-content/plugins/のディレクトリにアップロード。
  • 設定方法: 管理画面>設定>カスタムフィールドテンプレート

Custom Field Templateの使い方

投稿画面で予め登録したフォームを読込み、オリジナルのカスタムフィールドの入力欄に入力。
そしてその入力欄の内容(メタデータ)をテンプレートに反映させ表示させます。
(ショートコードの利用とテンプレートの投稿画面での切り替えが可能)

ではさっそく作成しておいたカスタム投稿タイプの投稿で使用してみましょう。

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

管理画面>設定>カスタムフィールドテンプレートから設定を行います。
一番目の”カスタムフィールドテンプレートオプション”に入力フォームのテンプレートの登録
四番目の”「cft」and「cftsearch」ShortCode Format”に表示用のテンプレートの登録

他の設定項目もありますが基本的にはこの二つの設定だけでOKです。 カスタムフィールドテンプレートオプションの「TEMPLATE #0」にはデフォルトのテンプレートが登録されていますが必要なければ無効または上書。ここで登録したフォーム(テンプレート)は投稿画面で読み込む事ができます。

例)「TEMPLATE #1」に「販売店」という名前のテンプレートを登録

  1. 「テンプレートタイトル」入力「例:販売店」
  2. 「カスタムポストタイプ (カンマ区切り)」内にカスタムポストタイプ名「例:store」を入力
  3. 「テンプレートコンテンツ」を入力(以下例)
[住所]
type = text
size = 50
label = 住所の入力

[店名]
type = text
size = 25

[電話]
type = text
size = 25

[店長]
type = text
size = 25

[ホームページ]
type = text
size = 35

[概要] 
type = textarea
rows = 10
cols = 150
tinyMCE = true
htmlEditor = true
mediaButton = true 

[画像] 
type = textarea
rows = 6
cols = 90
mediaButton = true 
label = ← 一番左側のアイコンをクリックすると画像をアップロードできます(size: 120px×120px)

[取扱商品]
type = text
size = 35

[最終更新日]
type = text
size = 35
date=true

上記のように登録すればカスタムポストタイプの投稿画面のカスタムフィールドテンプレートで「販売店」というフォーム(テンプレート)を読み込む事ができます。

表示画面

例)設定”「cft」and「cftsearch」ShortCode Format”の「FORMAT #1」にテンプレートを登録

<div id="cft-box">
<div class="wrapper-cft">
	<div class="wrapper-left">[画像]</div>
	<div class="wrapper-right">
		<table>
			<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>URL</th>
				<td>[ホームページ]</td>
			</tr>
			<tr>
				<th>概要</th>
				<td colspan="3">[概要]</td>
			</tr>
			<tr>
				<th>取扱商品</th>
				<td colspan="3"><?php echo  get_the_term_list( $post->ID, 'product', '', ', ', '' ); ?>[取扱商品]</td>
			</tr>
		</table>
	</div>

</div><!-- /end wrapper-cft -->
</div><!-- /end CFT -->

また、設定時に”PHPを使用する”にチェックを入れるとPHPが使用できます。上記では「取扱商品」の表示に使用しています。 参照)関数リファレンス/get the term list – WordPress Codex 日本語版

上記の「FORMAT #1」のショートコードは「cft format=1」になりますので、投稿入力欄にショートコードを入力

表示画面サンプル

上記サンプルのように同じレイアウトで項目に入力をする場合などテンプレートを作成しておく事で、次回からの入力作業が簡単になります。

WordPress 3.x デザイン&カスタマイズ スタイルブック

新品価格
¥2,940 から
(2012/2/7 02:10時点)

iPhone Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

新品価格
¥2,499 から
(2012/2/7 02:13時点)

 

HTML5 CANVAS & CSS3 デザインガイド (DESIGN GUIDE)

新品価格
¥2,709から
(2012/2/7 02:06時点)

標準HTML5タグリファレンス (WEB PROFESSIONAL)

新品価格
¥2,205から
(2012/2/7 01:53時点)

 

関連記事

9 コメント» WordPress プラグイン Custom Field Templateの使い方

  1. […] 使用方法の参考にしたサイト: カメぞうのメモ書き http://39kn.com/2011/05/30/5486/ tweetmeme_url = 'http://kozo.style.coocan.jp/aragorn/?p=621&#039;;tweetmeme_source = 'KozoTsu';tweetmeme_style = 'compact'; 未分類 none […]

  2. […] ってもらう時は管理画面ライクなインターフェイスにしたいのでプラグインのカスタムフィールド・テンプレートを使ってます。 使い方はこちらが詳しいです。 http://39kn.com/2011/05/30/5486/ […]

  3. […] 次に入れたのが、「Custom Field Template」こちらは「WordPressで「カスタム投稿」と「カスタムフィールドテンプレート」と「WordPress プラグイン Custom Field Templateの使い方」この二つの記事を参考にして入れ込んでみました。 […]

  4. […] カスタムフィールドのテンプレートプラグイン 投稿日: 2012/08/03 作成者: gangdise Custom Field Templateプラグインは 同じフォーマットでの入力が多い場合には便利。 こちらのページを参考にしました。 http://39kn.com/2011/05/30/5486/ […]

  5. […]  Wordpressで同一のフィールド内容で記事を書くときに便利なのが「Custom Field Template」です。 使い方はちょっと難しいですが、テンプレートを作ってしまえばデータ入力が簡単に行えるようになります。 ここでの使い方は割愛しますが、こちらのサイトを参考にしてください。「カメぞうのメモ書き」 商品紹介や店舗紹介などで使えそうですね^^ […]

  6. […] 参考:WordPress プラグイン Custom Field Templateの使い方 – […]

コメントを残す

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

*