Text and values

文字・数値フィールド

オレンジ文字の部分は設定したフィールド名称と入れ替えます。緑の文字はエスケープです。

単一行テキスト

文字列
<?php echo esc_html( CFS()->get( 'text' ) ); ?>

テキストエリア

文字列
<?php
$value = CFS()->get( 'textarea' );
echo nl2br( esc_html( $value ) );
?>

改行をHTMLの改行として表示する例です。

WYSIWYGエディター

HTML文字列
<?php echo wp_kses_post( CFS()->get( 'wysiwyg' ) ); ?>

電話番号

文字列

電話番号のみ表示

<?php echo esc_html( CFS()->get( 'phone' ) ); ?>

電話をかけるリンクとして表示

<?php $phone = CFS()->get( 'phone' ); ?>
<a href="tel:<?php echo esc_attr( $phone ); ?>">
  <?php echo esc_html( $phone ); ?>
</a>

メールアドレス

文字列

メールアドレスのみ表示

<?php echo esc_html( antispambot( CFS()->get( 'email' ) ) ); ?>

メールを送るリンクとして表示

<?php $email = CFS()->get( 'email' ); ?>
<a href="mailto:<?php echo esc_attr( antispambot( $email ) ); ?>">
  <?php echo esc_html( antispambot( $email ) ); ?>
</a>

URL

文字列
<?php $url = CFS()->get( 'url' ); ?>
<a href="<?php echo esc_url( $url ); ?>">リンク</a>

数値

文字列
<?php echo esc_html( CFS()->get( 'number' ) ); ?>

日付

文字列

保存された形式のまま表示

<?php echo esc_html( CFS()->get( 'date' ) ); ?>

曜日を付けて表示

<?php
$date = CFS()->get( 'date' );
if ( $date ) {
  echo esc_html( wp_date( 'Y年n月j日(D)', strtotime( $date ) ) );
}
?>

wp_date() の曜日はWordPressのサイト言語に合わせて表示されます。保存形式に応じてフォーマットを調整してください。

時刻

文字列

24時間表記

<?php
$time = CFS()->get( 'time' );
if ( $time ) {
  echo esc_html( wp_date( 'H:i', strtotime( $time ) ) );
}
?>

AM / PM表記

<?php
$time = CFS()->get( 'time' );
if ( $time ) {
  echo esc_html( wp_date( 'g:i A', strtotime( $time ) ) );
}
?>

カラー

文字列
<?php $color = sanitize_hex_color( CFS()->get( 'color' ) ); ?>
<span style="color:<?php echo esc_attr( $color ); ?>">色付き文字</span>

Choices

選択フィールド

オレンジ文字の部分は設定したフィールド名称と入れ替えます。緑の文字はエスケープです。

セレクト (ドロップダウンメニュー)

配列
<?php foreach ( (array) CFS()->get( 'select' ) as $value ) : ?>
  <span><?php echo esc_html( $value ); ?></span>
<?php endforeach; ?>

単一選択の設定でも配列で返ります。

チェックボックス

配列
<ul>
<?php foreach ( (array) CFS()->get( 'checkbox' ) as $value ) : ?>
  <li><?php echo esc_html( $value ); ?></li>
<?php endforeach; ?>
</ul>

ラジオボタン

文字列
<?php echo esc_html( CFS()->get( 'radio' ) ); ?>

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

真偽値相当
<?php if ( CFS()->get( 'true_false' ) ) : ?>
  <span>有効</span>
<?php endif; ?>

条件分岐グループ

選択値の文字列
<?php
$choice = CFS()->get( 'conditional_choice' );
?>

<?php if ( 'select1' === $choice ) : ?>
  <div>
    <p><?php echo esc_html( CFS()->get( 'field1' ) ); ?></p>
    <p><?php echo esc_html( CFS()->get( 'field2' ) ); ?></p>
  </div>

<?php elseif ( 'select2' === $choice ) : ?>
  <div>
    <p><?php echo esc_html( CFS()->get( 'field3' ) ); ?></p>
    <p><?php echo esc_html( CFS()->get( 'field4' ) ); ?></p>
  </div>
<?php endif; ?>

条件分岐グループのフィールド名で現在の選択値を取得し、その値に応じて子フィールドを出力します。PHPタグの間には、見出し・画像・文章などのHTMLを自由に追加できます。非表示側の値も保持されるため、子フィールドだけを無条件で出力しないようにしてください。

Links and media

リンク・ファイル

オレンジ文字の部分は設定したフィールド名称と入れ替えます。緑の文字はエスケープです。

ファイル(URLを返す)

URL文字列
<?php $file_url = CFS()->get( 'file' ); ?>
<a href="<?php echo esc_url( $file_url ); ?>">ダウンロード</a>

ファイル(IDを返す)

添付ファイルID
<?php
$attachment_id = (int) CFS()->get( 'file' );
echo wp_get_attachment_image( $attachment_id, 'large' );
?>

返り値はフィールドの「Return Value」設定でURLまたはIDに変わります。

コード表示

HTML文字列
<?php
// wp_kses() で出力を許可するHTMLタグと属性を設定します。
// true は、その属性の使用を許可する指定です。
$allowed = array(
  'div' => array( 'class' => true ), // divタグとclass属性を許可
  'span' => array( 'class' => true ), // spanタグとclass属性を許可
  'pre' => array(), // preタグを許可(属性は許可しない)
  'code' => array( 'class' => true ), // codeタグとclass属性を許可
  'button' => array( // buttonタグと以下の属性を許可
    'type' => true, 'class' => true, // type・class属性
    'data-label' => true, 'data-copied' => true, // data属性
  ),
);
echo wp_kses( CFS()->get( 'code_view' ), $allowed );
?>

Repeating values

ループ

オレンジ文字の部分は設定したフィールド名称と入れ替えます。緑の文字はエスケープです。

ループ (複製フィールド)

行データの配列
<?php foreach ( (array) CFS()->get( 'items' ) as $row ) : ?>
  <article>
    <h3><?php echo esc_html( $row['title'] ?? '' ); ?></h3>
    <p><?php echo nl2br( esc_html( $row['description'] ?? '' ) ); ?></p>
  </article>
<?php endforeach; ?>

各行はサブフィールド名をキーにした配列です。サブフィールドの種類に合わせて個別にエスケープします。

入れ子のループ (複製フィールド)

行データ内の配列
<?php foreach ( (array) CFS()->get( 'sections' ) as $section ) : ?>
  <section>
    <h2><?php echo esc_html( $section['heading'] ?? '' ); ?></h2>

    <ul>
    <?php foreach ( (array) ( $section['items'] ?? array() ) as $item ) : ?>
      <li>
        <strong><?php echo esc_html( $item['title'] ?? '' ); ?></strong>
        <p><?php echo nl2br( esc_html( $item['description'] ?? '' ) ); ?></p>
      </li>
    <?php endforeach; ?>
    </ul>
  </section>
<?php endforeach; ?>

sections が親ループ、親ループ内の items が子ループです。子ループは CFS()->get() ではなく、親行の配列から取得します。

WordPress native

WordPress標準データ

投稿カテゴリー

ターム
<?php
$terms = get_the_terms( get_the_ID(), 'category' );
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) echo esc_html( $term->name );
}
?>

投稿タグ

ターム
<?php
$terms = get_the_terms( get_the_ID(), 'post_tag' );
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) echo esc_html( $term->name );
}
?>

Values from another post

別の投稿・固定ページからフィールド値を取得

オレンジ文字の部分は設定したフィールド名称、投稿タイプ名と入れ替えます。緑の文字はエスケープです。

投稿IDを指定して取得

投稿ID
<?php
$post_id = 123;
echo esc_html( CFS()->get( 'field_name', $post_id ) );
?>

CFS()->get() の第2引数へ投稿IDを渡すと、現在表示中の投稿に関係なく、その投稿・固定ページ・カスタム投稿タイプのフィールド値を取得できます。

投稿タイプから1件取得して表示

カスタム投稿
<?php
$post_ids = get_posts( array(
  'post_type'      => 'news', // post またはカスタム投稿タイプを指定
  'posts_per_page' => 1,
  'post_status'    => 'publish',
  'orderby'        => 'date',
  'order'          => 'DESC',
  'fields'         => 'ids',
) );

if ( $post_ids ) :
  $post_id = (int) $post_ids[0];
?>
  <h4><?php echo esc_html(
    CFS()->get( 'text', $post_id )
  ); ?></h4>

  <p><?php echo nl2br( esc_html(
    CFS()->get( 'textarea', $post_id )
  ) ); ?></p>
<?php else : ?>
  <p>データがありません。</p>
<?php endif; ?>

CFSの値だけを取得する場合は setup_postdata()wp_reset_postdata() は不要です。投稿タイトルなどのテンプレートタグも使う場合は、通常のWordPressループとして投稿データをセットしてください。

Layout only

配置専用フィールド

タブ・横並びグループ・アコーディオン

管理画面上で入力欄を整理するためのフィールドです。これら自体は値を保存せず、CFS()->get() で出力する値はありません。内側に配置した各フィールドを、それぞれのフィールド名で取得してください。条件分岐グループは選択値を保存するため、上の選択フィールド欄を参照してください。