制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPressCustom Field Templateで投稿者がフィールドを追加できるようにする方法

Custom Field Templateで投稿者がフィールドを追加できるようにする方法

2013年11月26日WordPress プラグイン 
Custom Field Templateで投稿者がフィールドを追加できるようにする方法記事のアイキャッチ画像

WordPressの定番カスタムフィールドプラグイン『Custom Field Template』で投稿者がフィールドを自由に追加できるようにする方法を紹介します。これを知ってるのと知らないのじゃ出来ることの幅が大分違ってきます!!知らない人はチェックしてみてください。知ってる人もチェックしてみてください笑

まえがき

前回『Custom Field Templateの使い方[WordPress]』という記事で『Custom Field Template』の基本的な使い方は説明しました!今回は一歩進んで記事を投稿している人自身がフィールドを追加できるようにする方法を紹介します。これにより例えば投稿者に好きなだけカスタムフィールドで画像を登録してもらうといったことが可能になります。便利です。

「multipul」オプションと「multipleButton」オプション

テンプレートコンテンツの設定で「multiple = true」と「multipleButton = true」を指定するとフィールドに「追加」ボタンが表示されるようになり、投稿者がフィールドをいくらでも増やせるようになります。因みに「type = checkbox」のフィールドは「multipul」オプションと「multipleButton」オプションは対応していません。

「multipul」と「multipleButton」の設定

テンプレートコンテンツのコードはこのようになります。

[kataban]
type = text
size = 35
label = 型番
multiple = true
multipleButton = true

編集画面にはこのように表示されます。

multipleButtonの説明1

とりあえずフィールドが二つ用意された状態になります。
三つ以上増える場合、「追加」ボタンをクリックすることでフィールドを増やすことができます。

「multipul」と「multipleButton」を設定したフィールドの出力コード

「multipul」と「multipleButton」を設定して複数の値がある場合、「post_custom()」で取得する値は配列になります。
それをforeach文でechoしてやれば取りあえず表示できます。

<?php if(have_posts()): while(have_posts()):the_post();
$kataban = post_custom('kataban');

foreach((array)$kataban as $var) {
?>
<div>型番:<?php echo $var; ?></div>
<?php }

 endwhile; endif; ?>

カスタムフィールドをグループ化して、そのグループごと追加できるようにする

見出しが分かりづらいかもですが、いくつかのカスタムフィールドをひとくくりのグループにして、そのグループ単位で追加できるようにする方法です。
因みにグループの中に「type = checkbox」のフィールドは含めることができません。(上手く出力できないの)

「type = fieldset_open」と「type = fieldset_close」

グループ化の方法ですが、説明するよりコードを見たほうが早いのでどうぞ!

[field0]
type = fieldset_open
legend = カスタムフィールドのグループ化
multipul = true
multipleButton = true

[kataban]
type = text
size = 35
label = 型番
blank = true

[tantou]
type = radio
value = ことり # 田中 # 佐藤
default = ことり
label = 担当
blank = true

[zaiko]
type = select
value = 10 # 20 # 30
default = 20
label = 在庫
before = 在庫
after = 個
blank = true

[setsumei]
type = textarea
rows = 4
cols = 40
tinyMCE = true
htmlEditor = true
mediaButton = true
label = 商品説明
blank = true


[gazou]
type = file
mediaPicker = true
mediaRemove = true
label = 商品画像
blank = true

[pdf]
type = file
mediaPicker = true
mediaRemove = true
label = PDF
blank = true

[field0]
type = fieldset_close 

「type = fieldset_open」~「type = fieldset_close」までにグループ化したいフィールドのコードを入れていきます。
その時に気をつけて欲しいのが、グループ化する各フィールドには必ず「blank = true」を入れてください!!
これが超重要でこれを入れないと、出力する時にうまくグループ毎にまとまらずバラバラになっちゃいます。

2014.07.13 追記
グループ化するとグループ内の個々のフィールドに「multiple = true」「multipleButton = true」を使用できなくなります。ご注意ください。
これはコメントをいただいて気づきました。ゆきさんありがとうございます。

上のコードでフィールドを作ると編集画面はこんな感じになります。

multipleButtonの説明2

「legend」オプションの値は好きなものを入れてください!
「blank = true」は忘れないでくださいね。

グループ化したカスタムフィールドの出力

普通のテキストフィールドとか画像とかPDFをアップした場合等だいたいの状況を想定したコードのせときますね。

<?php
if (have_posts()) : while (have_posts()) : the_post();

global $wpdb;
$query = "SELECT meta_id,post_id,meta_key,meta_value FROM $wpdb->postmeta WHERE post_id = $post->ID ORDER BY meta_id ASC";
$cf = $wpdb->get_results($query, ARRAY_A);

$kataban = array();
$syurui = array();
$tantou = array();
$zaiko = array();
$setsumei = array();
$gazou = array();
$pdf = array();

foreach( $cf as $row ){
	if( $row['meta_key'] == "kataban" ){
		array_push( $kataban, $row['meta_value'] );
	}
	if( $row['meta_key'] == "syurui" ){
		array_push( $syurui, $row['meta_value'] );
	}
	if( $row['meta_key'] == "tantou" ){
		array_push( $tantou, $row['meta_value'] );
	}
	if( $row['meta_key'] == "zaiko" ){
		array_push( $zaiko, $row['meta_value'] );
	}
	if( $row['meta_key'] == "setsumei" ){
		array_push( $setsumei, $row['meta_value'] );
	}
	if( $row['meta_key'] == "gazou" ){
		array_push( $gazou, $row['meta_value'] );
	}
	if( $row['meta_key'] == "pdf" ){
		array_push( $pdf, $row['meta_value'] );
	}
}

$length = count( $kataban );

for( $i = 0; $i < $length; $i ++ ){
//画像取得
$gazou_sp = wp_get_attachment_image_src($gazou[$i],'full' );
//PDF取得
$file = wp_get_attachment_url($pdf[$i]);

 ?>
<?php if($kataban[$i] !='') { ?>

<div>型番:<?php echo $kataban[$i]; ?></div>
<div>種類:<?php echo $syurui[$i]; ?><?php foreach($syurui[$i]  as $val){
if ($val === end($syurui[$i])) {
echo $val;
    }else{
echo $val.", ";
}
} ?>
</div>
<div>担当:<?php echo $tantou[$i]; ?></div>
<div>在庫:<?php echo $zaiko[$i]; ?></div>
<div>商品説明:<?php echo wpautop($setsumei[$i]); ?></div>
<div>商品画像:<img src="<?php echo $gazou_sp[0]; ?>" alt="<?php the_title(); ?>" /></div>
<div>PDF:<a href="<?php echo $file; ?>" target="_blank">PDF</a></div>
<?php }}
endwhile; endif;
?>

このコードはフォーラムの「Custom Field Templateグループ化時、バラバラに表示されてしまう」を参考に作成しました!
DBから直接データを取得することにより、ちゃんとグループごとに値を取得できず変な順番になったりチグハグになってしまうという巷で流行の現象を回避しています。
もっとうまい書き方があったら是非是非教えてください!!

まとめ

『Custom Field Template』はホントに便利です。
カスタムフィールド周りはこのプラグイン入れとけば大丈夫です。

ただ、一点挙げるとしたら「カテゴリにカスタムフィールドを付けれない」という点ですかね。
結構カテゴリ毎に画像を登録できるようにしたいとかあるので是非この機能をつけて欲しいです!!
とはいえ、投稿周りのカスタムフィールドに関しては最高です!!
Custom Field Templateの使い方[WordPress]」とこの記事に書いてある機能で大抵の状況には対応できると思います!!

とにかくこんなスバラなプラグインを作成してくれてありがロン。
イイネ!

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • ゆき

    カスタムフィールドテンプレートの記事が大変わかりやすく、いつも参考にさせて頂いております。

    ひとつだけ質問させてください。

    上記でfieldsetとmultipleを同時に使用していますが、fieldsetを使用して囲むとどうしてもmultipleButtonでtrueにした追加ボタンが表示されないような気がします。
    こちらでは、

    [kataban]
    type = text
    size = 35
    label = 型番
    multiple = true
    multipleButton = true
    blank = true

    と書かれていますが、2枚目の画像では「型番」の項目にmultipleButton = trueと設定したはずの「追加」ボタンは表示されていません。実際には動作しているのでしょうか。
    お答え頂けると幸いです。

    • kotoriblog

      ゆきさん

      こんばんは!
      コメントありがとうございます。
      そして返事が遅れてしまいごめんなさい><

      >と書かれていますが、2枚目の画像では「型番」の項目にmultipleButton = trueと設定したはずの「追加」ボタンは表示されていません。実際には動作しているのでしょうか。

      ↑これは単純にKoToRiのミステイク(消し忘れ)でした。そして検証してみたところグループ化すると、個々のmultipleButton = trueは有効になりません。

      ゆきさんがコメントしてくれなかったら間違いを犯したままでした。
      どうもありがとうございました。

      • ゆき

        ずっとそこでつまづいていたので、スッキリしました。
        お忙しい所、検証までして頂き誠にありがとうございました!

  • まいまい

    グループ化が出来て大変助かっています。
    質問です。
    この場合、未投稿なら非表示をよくあるソースでやってみたのですが、全部消えてしまいました。
    入れ方が違うのでしょうか。

    担当:

  • まいまい

    すみません、ソースをそのまま入れたら変な投稿になってしまいました。
    消し方が分からなかったのでそのままになっています。

    その後いろいろとやってみたら分かりました。
    よく出ているソースはifの後にpost_customが付いているのですがこれだと全部消えてしまいました。
    <?php if(post_custom($tantou[$i])): ?>
    <div>担当:<?php echo $tantou[$i]; ?></div>
    <?php endif;?>
    post_customなしでこれだけで良いんですね
    <?php if($tantou[$i]):?>

    全角入れてみたのでこれで上手く投稿できるでしょうか?

    • kotoriblog

      まいまいさん
      返事が遅れてしまい申し訳ありません。
      解決されたようでよかったです。

      グループ化の場合は、配列として値を変数に格納するので「post_custom」いらないですね。少なくとも紹介してるコードでは。
      ただ最近はAdvanced Custom Fieldsのほうが色々使えるので、そっちを使ってみてもいいかもです。
      /wordpress/advanced-custom-fields/

      • まいまい

        kotoriblogさま
        返信ありがとうございます。
        やっとカスタムフィールドテンプレートに慣れてきたところなので、新しいのは又の機会にしたいと思います。
        ところで、もう一つ質問です。
        グループ化したラジオボタンで
        Aを選んだら赤文字
        Bを選んだら青文字
        にしたいのですが、どうしたらよいのでしょうか?

        • まいまい

          kotoriblogさま
          毎回お騒がせしてすみません。ここへ投稿するまでは相当悩んでから投稿しているのですが、投稿した後フッとひらめくんです。
          >グループ化の場合は、配列として値を変数に格納するので
          ココがポイントですね。

          <?php $tai = $tanto[$i]; ?>
          <?php if ($tai == ‘A’) : ?><span class=”red”>A</span><?php endif; ?>
          <?php if ($tai == ‘B’) : ?><pan class=”blue”>B</span><?php endif; ?>

  • まいまい

    kotoriblogさま1年ぶりに投稿させて頂きます。
    実はカスタムフィールドテンプレートをずっと使っていたのですが、今年になってWordPressを4.7以上にバージョンアップしたらTinyMCE Advancedのプラグインがカスタムフィールド内で上手く作動しなくなりました。
    カスタムフィールドテンプレートはもうバージョンアップしていないのでkotoriblogさまのご指示通りAdvanced Custom Fieldsへ切り替えた方が良いみたいです。
    こんな事になるのなら1年前に頑張ってやってみれば良かったです(;O;)

    • kotoriblog

      まいまいさん
      お久しぶりです。1年ぶりのコメント嬉しいです。ありがとうございます。
      Advanced Custom Fieldsはメチャクチャ使いやすいので各フィールドの出力方法さえ覚えてしまえば楽勝で使えます!!!使い勝手が非常によく感動ものです!使い方は下記記事を参考にしていただければと思います!!
      /wordpress/advanced-custom-fields/