フィールド別
値の出力方法

通常のリンクとして表示

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

SNSなどのURLを判定してアイコン付きで表示

<?php
$url = CFS()->get( 'url' );

// URLのホスト名を見て、表示するアイコンとラベルを切り替えます。
// icon_classはFont Awesomeの例です。SVGや画像アイコンに置き換えても構いません。
$host       = strtolower( (string) wp_parse_url( $url, PHP_URL_HOST ) );
$host       = preg_replace( '/^www\./', '', $host );
$service    = 'website';
$icon_class = 'fa-solid fa-link';
$label      = 'Webサイト';

if ( false !== strpos( $host, 'instagram.com' ) ) {
  $service    = 'instagram';
  $icon_class = 'fa-brands fa-instagram';
  $label      = 'Instagram';
} elseif ( false !== strpos( $host, 'x.com' ) || false !== strpos( $host, 'twitter.com' ) ) {
  $service    = 'x';
  $icon_class = 'fa-brands fa-x-twitter';
  $label      = 'X';
} elseif ( false !== strpos( $host, 'facebook.com' ) ) {
  $service    = 'facebook';
  $icon_class = 'fa-brands fa-facebook-f';
  $label      = 'Facebook';
} elseif ( false !== strpos( $host, 'youtube.com' ) || false !== strpos( $host, 'youtu.be' ) ) {
  $service    = 'youtube';
  $icon_class = 'fa-brands fa-youtube';
  $label      = 'YouTube';
} elseif ( false !== strpos( $host, 'line.me' ) || false !== strpos( $host, 'lin.ee' ) ) {
  $service    = 'line';
  $icon_class = 'fa-brands fa-line';
  $label      = 'LINE';
}

if ( $url ) :
?>
  <a class="social-link social-link--<?php echo esc_attr( $service ); ?>"
     href="<?php echo esc_url( $url ); ?>"
     target="_blank"
     rel="noopener">
    <i class="<?php echo esc_attr( $icon_class ); ?>" aria-hidden="true"></i>
    <span><?php echo esc_html( $label ); ?></span>
  </a>
<?php endif; ?>

URLフィールドは保存値としてURL文字列を返します。出力時にドメインを判定すれば、SNSリンクだけアイコンやCSSクラスを切り替えられます。

<?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を自由に追加できます。非表示側の値も保持されるため、子フィールドだけを無条件で出力しないようにしてください。

<?php
$link = CFS()->get( 'hyperlink' ); // 「PHP Array」設定
if ( ! empty( $link['url'] ) ) :
?>
  <a href="<?php echo esc_url( $link['url'] ); ?>"
     target="<?php echo esc_attr( $link['target'] ?? '_self' ); ?>">
    <?php echo esc_html( $link['text'] ?: $link['url'] ); ?>
  </a>
<?php endif; ?>

返り値設定が「HTML」の場合はリンクHTMLが返ります。細かく制御できる「PHP Array」がおすすめです。

<?php
// ファイルフィールドの「Return Value」は「Attachment ID」に設定します。
$attachment_id = (int) CFS()->get( 'file' );
$file_url      = wp_get_attachment_url( $attachment_id );
$mime_type     = get_post_mime_type( $attachment_id );
$file_type     = wp_check_filetype( $file_url );
$extension     = strtolower( $file_type['ext'] ?? '' );
$label         = get_the_title( $attachment_id ) ?: basename( (string) $file_url );

// 初期値は、どの種別にも当てはまらない汎用ファイル用です。
$icon_label    = 'FILE';
$icon_class    = 'file';

// 拡張子やMIMEタイプに応じて、表示ラベルとCSSクラスを切り替えます。
if ( 'pdf' === $extension ) {
  $icon_label = 'PDF';
  $icon_class = 'pdf';
} elseif ( 0 === strpos( (string) $mime_type, 'image/' ) ) {
  $icon_label = 'IMG';
  $icon_class = 'image';
} elseif ( 0 === strpos( (string) $mime_type, 'audio/' ) ) {
  $icon_label = 'AUDIO';
  $icon_class = 'audio';
} elseif ( 0 === strpos( (string) $mime_type, 'video/' ) ) {
  $icon_label = 'VIDEO';
  $icon_class = 'video';
} elseif ( in_array( $extension, array( 'zip', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx' ), true ) ) {
  $icon_label = strtoupper( $extension );
  $icon_class = $extension;
}

if ( $file_url ) :
?>
  <!-- data属性を出しておくと、CSSやJavaScript側でもファイル種別を利用できます。 -->
  <a class="download-link download-link--<?php echo esc_attr( $extension ); ?>"
     href="<?php echo esc_url( $file_url ); ?>"
     data-file-ext="<?php echo esc_attr( $extension ); ?>"
     data-file-mime="<?php echo esc_attr( $mime_type ); ?>">
    <!-- このspanをSVGやFont Awesomeなど、サイトのアイコン表示に差し替えます。 -->
    <span class="file-icon file-icon--<?php echo esc_attr( $icon_class ); ?>" aria-hidden="true">
      <?php echo esc_html( $icon_label ); ?>
    </span>
    <span><?php echo esc_html( $label ); ?></span>
  </a>
<?php endif; ?>

PDF、画像、音声、動画、Officeファイルなどを分岐して、種別ごとに表示ラベルやCSSクラスを変える例です。data-file-ext や data-file-mime も出しておくと、CSSやJavaScript側でもファイル種別を扱いやすくなります。

返り値はフィールドの「Return Value」設定で変わります。Image Data は画像ID、選択サイズのURL、thumbnail_url、large_url、full_url、modal_url、alt、caption、各サイズ情報を含む配列です。Attachment IDs はID配列、Image URLs はURL配列、Gallery HTML は生成済みHTMLを返します。

Image Data返却で自前出力

<?php foreach ( (array) CFS()->get( 'gallery' ) as $image ) : ?>
  <figure>
    <a href="<?php echo esc_url( $image['modal_url'] ?? $image['full_url'] ?? $image['url'] ?? '' ); ?>"
       data-gallery-item
       data-caption="<?php echo esc_attr( $image['caption'] ?? '' ); ?>">
      <img src="<?php echo esc_url( $image['url'] ?? '' ); ?>"
           alt="<?php echo esc_attr( $image['alt'] ?? '' ); ?>">
    </a>
    <?php if ( ! empty( $image['caption'] ) ) : ?>
      <figcaption><?php echo esc_html( $image['caption'] ); ?></figcaption>
    <?php endif; ?>
  </figure>
<?php endforeach; ?>

Gallery HTML返却でデフォルトHTMLを利用

<?php
$allowed = wp_kses_allowed_html( 'post' );
$allowed['div']['data-columns'] = true;
$allowed['div']['style'] = true;
$allowed['figure'] = array( 'class' => true );
$allowed['figcaption'] = array();
$allowed['a']['data-atshift-cfs-gallery-item'] = true;
$allowed['a']['data-image-id'] = true;
$allowed['a']['data-full-url'] = true;
$allowed['a']['data-caption'] = true;
$allowed['a']['data-alt'] = true;

echo wp_kses( CFS()->get( 'gallery' ), $allowed );
?>

モーダルや独自のスライダーを作る場合は、Image Data返却を選ぶと自由に組み立てやすくなります。Gallery HTML返却では、画像リンクにモーダル向けの data-atshift-cfs-gallery-item と関連data属性が付きます。

<?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 );
?>

ショートコードの実行結果を表示

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

保存されたショートコード文字列を確認

<?php
$shortcode = CFS()->get( 'form_shortcode', false, array( 'format' => 'raw' ) );
echo esc_html( $shortcode );
?>

CFS()->get() は保存されたショートコードを実行した結果を返します。ショートコード入力のロール制御は投稿編集画面で入力欄を表示するかどうかの制御で、保存済みの値をテーマで出力するときには別途そのロールを求めません。出力するショートコードは信頼できるものに限定し、必要に応じてショートコード側または wp_kses() で許可するHTMLを調整してください。

許可された iframe 埋め込みを表示

<?php
// 埋め込みコードフィールドは、保存時に許可された埋め込み元の iframe だけを残します。
// 出力時もiframeに必要なタグと属性だけを許可します。
$allowed = array(
  'iframe' => array(
    'src'             => true,
    'width'           => true,
    'height'          => true,
    'title'           => true,
    'class'           => true,
    'style'           => true,
    'loading'         => true,
    'allow'           => true,
    'allowfullscreen' => true,
    'frameborder'     => true,
    'referrerpolicy'  => true,
    'aria-label'      => true,
  ),
);

echo wp_kses( CFS()->get( 'embed_code' ), $allowed );
?>

Google Maps、YouTube、Vimeo、OpenStreetMap、Google カレンダー、Google フォーム、Spotify、SoundCloud など、フィールド設定で許可した iframe 埋め込み元を表示するためのフィールドです。script を使用する埋め込みコードは対象外です。

標準カテゴリー名を表示

<?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(), 'category' );
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) {
    $url = get_term_link( $term );
    if ( ! is_wp_error( $url ) ) {
      echo '<a href="' . esc_url( $url ) . '">' . esc_html( $term->name ) . '</a>';
    }
  }
}
?>

グローバルカテゴリー名を表示（Shared Taxonomy）

<?php
$terms = get_the_terms( get_the_ID(), 'global_category' ); // 実際のtaxonomy名へ変更
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) echo esc_html( $term->name );
}
?>

グローバルカテゴリーをリンク付きで表示（Shared Taxonomy）

<?php
$terms = get_the_terms( get_the_ID(), 'global_category' ); // 実際のtaxonomy名へ変更
if ( $terms && ! is_wp_error( $terms ) ) {
  foreach ( $terms as $term ) {
    $url = get_term_link( $term );
    if ( ! is_wp_error( $url ) ) {
      echo '<a href="' . esc_url( $url ) . '">' . esc_html( $term->name ) . '</a>';
    }
  }
}
?>

投稿カテゴリー (標準 / グローバル) はCFS専用メタではなく、選択したtaxonomyのWordPressタームとして保存されます。テーマ側では get_the_terms() など標準テンプレート関数で扱うのが基本です。