Custom Field Suite を使って入力を簡単に!【初心者向けのカスタムフィールド用プラグイン】

WordPress では標準でカスタムフィールドを利用することもできるんですけど、プラグインを導入することでより便利に使うことができます。

単純にブログを投稿するだけなら全く必要のないシステムですが、毎日同じような入力をする場合には便利です

そこで、今回はプラグイン「Custom Field Suite」について紹介していきましょう。

Custom Field Suite で表示できる項目

Custom Field Suite

Custom Field Suiteのプラグインを有効にすると、以下の項目を選択することができます。

追加できるフィールド項目
  • 単一行テキスト
  • テキストエリア
  • リッチエディタ
  • ハイパーリンク
  • 日付フォーマット
  • カラーピッカー
  • 真/偽(簡易チェックボックス)
  • セレクト(ドロップダウンリスト)
  • 関連ポスト選択
  • Term
  • ユーザー
  • ファイルのアップロード
  • ループ(複製フィールド)
  • タブ

人気のプラグインAdvanced Custom Fieldsと比べるとだいぶ項目が少ないのですが、それだけシンプルに使えるので初心者向きではありますね。

内容には「ラベル」と「名前」、その項目を「必須項目」とするかの選択とデフォルト値を設定することができます。

配置ルールを設定する

Custom Field Suite

「配置ルール」では、そのフィールドをどの管理画面上に表示するのかを選択することができます。固定ページだけに表示さたり、ユーザーを絞ったりすることもできます。

エクストラを設定する

Custom Field Suite

「エクストラ」はあまり利用することがないかもしれませんが、「カスタムフィールド」を表示される位置などを設定することができます。

フィールドに入力する内容

カスタムフィールドを初めて利用する人の場合、何をどう入力していったら良いのか分かりにくいですよね。

では、メインのフィールドを簡単に説明します。

単一行テキストでの例

Custom Field Suite

おそらく一番使うことになるのが「単一行テキスト」。ここでは、短い文や単語を表示する時に使うフィールドになります。

ではまず、全てのフィールドに言える部分になりますが、「ラベル」と「名前」の項目を理解しておく必要があります

「ラベル」に入力した内容は、管理画面で文字を入力する欄に表示されるものになります。そして、「名前」は PHP の編集時に組み込む必要な項目となるので、必ず「半角英数字」か「アンダースコア」のみで入力する必要があります。

例えば、「ラベル」には「商品」と入力して、「名前」には「product」としたりですね。

個人ブログでは必要ないかもしれませんが、複数の人が入力をする環境の場合では「バリデーション」にチェックを入れることで、入力漏れを防ぐことができます。

「概要」も個人だけの使用では必要ないかもしれませんが、そのフィールドに何を入力すれば良いのか説明文を入れることができます。

セレクトでの例

Custom Field Suite

複数の選択肢からどれかを1つ選ぶような項目を作るには「セレクト」を使うことで、ドロップダウンリストを作ることができます。もちろん、1つだけではなく複数選択をすることもできます。

選択肢の入力欄には項目を1行づつ入れていくのですが、もしプルダウンに表示する文字と実際にサイトに表示させる文字が異なる場合には「:(コロン)」を使って「実際の表示:管理画面の表示」と入力してください。

タブの例

Custom Field Suite

あまりにも入力項目が多い場合には、「タブ」を使って項目を分かりやすくすることもできます。

テンプレートをページに入れ込む

「フィールド」の入力が完了しただけではどこにも表示されないので、次はその項目を表示させたい「投稿ページ」や「固定ページ」などの PHP にテンプレートを追加します。

基本的には single.php などを編集することになるので、もし自作の WordPress テーマではない場合には「子テーマ」を作ってから編集しましょう

カスタムフィールドの内容を入れ込みたい場所を記述内から見つけ、下記のテンプレートを追加してください。そして必要項目には、フィールドの「名前」に設定した英数字へと変更してください。(例えば、「first_name」と「product」など)

単一行テキストの場合

PHP
<?php
echo CFS()->get( 'first_name' );

テキストエリアの場合

PHP
<?php
echo CFS()->get( 'first_name' );

リッチエディタの場合

PHP
<?php
echo CFS()->get( 'first_name' );

ハイパーリンクの場合

「HTML」を選択した場合

PHP
<?php
echo CFS()->get( 'the_hyperlink' );

「PHP」を選択した場合

PHP
<?php
$link = CFS()->get( 'the_hyperlink' );
/*
    Returns:
    array(
        'url' => 'http://google.com',
        'text' => 'Visit Google',
        'target' => '_blank'
    )
*/

日付フォーマットの場合

「2015-10-31」のような表記の場合

PHP
<?php
echo CFS()->get( 'my_date' );

「October 31, 2015」のような表記の場合

PHP
<?php
echo date( 'F j, Y', strtotime( CFS()->get('my_date') ) );

カラーピッカーの場合

PHP
<?php
echo CFS()->get( 'my_color' );

真/偽(簡易チェックボックス)の場合

PHP
<?php
echo CFS()->get( 'is_valid' );

セレクト(ドロップダウンリスト)の場合

PHP
<?php
$values = CFS()->get( 'my_select' );
foreach ( $values as $key => $label ) {
    echo $label;
}

関連ポスト選択の場合

PHP
<?php
$values = CFS()->get( 'related_posts' );
foreach ( $values as $post_id ) {
    $the_post = get_post( $post_id );
    echo $the_post->post_title;
}

Termの場合

PHP
<?php
$values = CFS()->get( 'field_terms' );
foreach ( $values as $term_id ) {
    $the_term = get_term($term_id);
    echo $the_term->name;
}

ユーザーの場合

PHP
<?php
$values = CFS()->get( 'field_users' );
foreach ( $values as $user_id ) {
    $the_user = get_user_by( 'id', $user_id );
    echo $the_user->user_login;
}

ファイルのアップロードの場合

PHP
<?php
echo CFS()->get( 'my_file' );

ループ(複製フィールド)の場合

PHP
<?php
/*
    A loop field named "gallery" with sub-fields "slide_title" and "upload"
    Loop fields return an associative array containing *ALL* sub-fields and their values
    NOTE: Values of sub-loop fields are returned when using get() on the parent loop!
*/
$fields = CFS()->get( 'gallery' );
foreach ( $fields as $field ) {
    echo $field['slide_title'];
    echo $field['upload'];
}

さいごに

WordPress というか、HTML などに慣れていない人にとっては通常の投稿画面では少しストレスになるかもしれません。そんな人のために、入力する手間を省くためにカスタムフィールドはとても便利です。

もし同じような項目を何度も入力する作業があるサイトの場合には、プラグイン「Custom Field Suite」を使ってみてくださいね。

Custom Field Suite で複数選択した時にカンマを入れる方法【コピペでOK】