Custom Field Templateでフィールドに追加ボタンを出す

WordPressでカスタムフィールドを使用する場合、プラグインを使用すると思いますが、個人的に多用するのが「Custom Field Template」。

通常はあらかじめ設定したフィールドしかユーザー側では入力できないのですが、「Custom Field Template」を使って、フィールドをユーザーが追加できるようにしてみます。

フィールドに追加ボタンを設置する

テンプレートコンテンツ:　内の設定に、「multiple = true」と「multipleButton = true」を指定することで、フィールドに「追加」ボタンが表示されるようになります。

「multipul」と「multipleButton」の事例

[test]
type = text
size = 100
label = 追加する項目
multiple = true
multipleButton = true

「multipul」と「multipleButton」の出力事例

<?php if(have_posts()): while(have_posts()):the_post();
$test = post_custom('test');
 
foreach((array)$test as $var) {
?>
<div>追加する項目:<?php echo $var; ?></div>
<?php }
 
 endwhile; endif; ?>

フィールドをグループ化して、グループで追加できるようにする

記事ごとに数が違う任意のリンクを作成する時などに便利です。

Custom Field Templateの設定

[field0]
type = fieldset_open
legend = 関連リンク
multiple = true
multipleButton = true

[reference_link_text]
type = text
size = 80
label = リンクテキスト
blank = true

[reference_link_url]
type = text
size = 80
label = リンク先URL
blank = true

[field0]
type = fieldset_close

HTML側

<?php //関連リンク
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";
$customField = $wpdb->get_results($query, ARRAY_A);
$referenceField = array();
$referenceLinkUrl = array();
$referenceLinkText = array();
foreach( $customField as $row ){
 if( $row['meta_key'] == "field0" ){
  array_push( $referenceField, $row['meta_value'] );
 }
 if( $row['meta_key'] == "reference_link_url" ){
  array_push( $referenceLinkUrl, $row['meta_value'] );
 }
 if( $row['meta_key'] == "reference_link_text" ){
  array_push( $referenceLinkText, $row['meta_value'] );
 }
}
$length = $referenceField[0];
if(isset($referenceLinkUrl[0]) && !empty($referenceLinkUrl[0])){ ?>
<div class="custom-related">
<div class="panel panel-info">
<div class="panel-heading">関連リンク</div>
<ul class="list-group">
<?php
//表示
 for( $i = 0; $i < $length; $i ++ ){ ?>
<li><a href="<?php echo $referenceLinkUrl[$i];?>" title="<?php echo $referenceLinkText[$i]; ?>" target="_blank"><i class="fa fa-link"></i> <?php echo $referenceLinkText[$i]; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>

リンクなど「アンカーテキスト」「リンク先URL」の複数のカスタムフィールドを、グループ化することによって、ひとまとめに追加していくことができます。