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

投稿者: | 2011/05/30

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

 

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

 

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時点)

 


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

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



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

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

 

関連記事