【WordPressプラグイン】Smart Custom Fields (SCF) 出力方法一覧

Smart Custom Fields

様々なカスタムフィールドを手軽に使い倒せて、【 繰り返しフィールド 】や【 オプションページ 】まで搭載されている「Smart Custom Fields(スマートカスタムフィールド)」。

こちらのページでは、細かい説明はなしで
「Smart Custom Fields」の出力方法を一挙ご案内します。

出力方法をササっと確認したい時にどうぞ^^

[基本のキ] フィールドの呼び出し方

「Smart Custom Fields(スマートカスタムフィールド)」は、フィールドタイプに関わらず、専用のコードで最初にカスタムフィールドを呼び出します。

以下のご説明では、「フィールド名 = myfield」としています。
ご自身のフィールド名に置き換え、表示したい場所に記載してください。

投稿に設置した場合

フィールドの呼び出し方
scf::get_option( ‘フィールド名’ )

▼ 基本の呼び出し方

$myfield = scf::get('myfield');

カスタムフィールド「myfield」の値を
scf::get( ‘myfield’ ) で呼び出して$myfield に代入します。

オプションページに設置した場合

フィールドの呼び出し方
scf::get_option_meta( ‘オプションページID’ , ‘フィールド名’ )

▼ 基本の呼び出し方 ( オプションページID = option-id とします)

$myfield = scf::get_option_meta('option-id', 'myfield');

オプションページ「option-id」にある、カスタムフィールド「myfield」の値を
scf::get_option_meta(‘option-id’, ‘myfield’) で呼び出して$myfield に代入します。

設置場所によって変わるのはフィールドの呼び出し方だけ。
呼び出した後 「$myfield(あれこれして) echoする 」やり方は同じです^^

入力した内容(値)をそのまま出力

以下のご説明では、「フィールド名 = myfield」としています。
ご自身のフィールド名に置き換え、表示したい場所に記載してください。

[テキスト] を出力する

<?php $myfield = scf::get('myfield'); echo $myfield; ?>

これが基本形になります。

[テキストエリア] を出力する

改行無しで書き出す

<?php $myfield = scf::get('myfield'); echo sanitize_text_field( $myfield ); ?>

基本形のままでも書き出せますが、sanitize_text_field() を使う事でタグや余分な空白を削除します

改行を反映して書き出す

<?php $myfield = scf::get('myfield'); echo nl2br( $myfield ); ?>

nl2br() 改行をそのまま書き出します。

[WYSIWYG (エディタ)] を出力する

<?php $myfield = scf::get('myfield'); echo $myfield; ?>

基本形のままです。
エディタで付けられた改行(タグ)があるので「nl2br()」は使わないで
くださいね。

[カラーピッカー(色)] を出力する

<?php $myfield = scf::get('myfield'); echo $myfield; ?>

基本形のままです。
カラーピッカーは、#カラーコードで書き出すので、そのまま使えます^^

[画像] を出力する

画像の出力方法はいくつかあるので、必要に応じて使い分けて下さい。

画像を<img>タグごと書き出す

<?php 
	$myfield = scf::get('myfield'); 
	echo wp_get_attachment_image( $myfield, '画像サイズ' ); 
?>

wp_get_attachment_image <img>タグごと書き出します。
画像サイズ‘ (thumbnail, medium, large 等) 指定しないと thumbnail で書き出されます。

[▼ 出力結果 ]

<img width="○px" height="○px" src="サイズに合わせた画像url" alt="登録alt" />

このように、丸ごと書き出してくれます。サイズ指定もできて、とっても便利~^^

画像のURL(サイズ指定なし) を書き出す

<?php 
	$myfield = scf::get('myfield'); 
	echo wp_get_attachment_url( $myfield ); 
?>

wp_get_attachment_url() 画像urlを呼び出します。
※ wp_get_attachment_thumb_url() にするとサムネイルのurlを呼び出してくれ
ます^^

[▼ 使い方 ]

<img src="<?php $myfield = scf::get('myfield'); echo wp_get_attachment_url( $myfield ); ?>" alt="">

のように使います。
サイズ指定はできないので、サイズ指定の不要な場合や画像urlだけを取り出したい場合に。

画像のURL(サイズ指定あり), width, height, を書き出す

<?php 
	$myfield = scf::get('myfield'); 
	$myfield = wp_get_attachment_image_src( $myfield, '画像サイズ' );
	echo $myfield[0]; 
?>

wp_get_attachment_image_src() 画像データを呼び出します。
▲の配列 — [0] => url, [1] => width, [2] => height

‘画像サイズ’ (thumbnail, medium, large 等) 指定しないと thumbnail で書き出されます。

[▼ 使い方 ]

<?php 
	$myfield = scf::get('myfield'); 
	$myfield = wp_get_attachment_image_src( $myfield, '画像サイズ' ); 
?> 
<img src="<?php echo $myfield[0]; ?>" width="<?php echo $myfield[1]; ?>" height="<?php echo $myfield[2]; ?>" alt="" />

のように使います。
サイズ指定をしたい場合や特定サイズのデータが必要な場合に^^;;

[日付ピッカー(時刻あり,なし)] を出力する

日付ピッカーは、しっかり設定しておけば、利用も書き出しも超簡単!!
投稿での入力はカレンダー選択。全角文字などの心配もありません\(^o^)/

<?php $myfield = scf::get('myfield'); echo $myfield; ?>

出力コードは基本形のままでOK。
時刻の有無、日付形式など設定した形式通りに書き出してくれます^^

[ラジオボタン、セレクト] を出力する

選択結果(値)が1個だけの [ラジオボタン、セレクト] は基本形でOK^^。

「値だけ登録」や「キー=>値 のkeyを書出す」場合

<?php $myfield = scf::get('myfield'); echo $myfield; ?>

基本形のままで選択した値を吐き出してくれます。

「キー=>値」key以外の内容を書出したい場合

<?php $myfield = scf::get('myfield');
	if($myfield == 'key1'){ '実際に書き出したい内容 1'; } 
	elseif($myfield == 'key2'){ '実際に書き出したい内容 2'; } 
	elseif($myfield == 'key3'){ '実際に書き出したい内容 3'; } 
	elseif($myfield == 'key4'){ '実際に書き出したい内容 4'; } 
echo $field; ?>

▲ if文で「keyに対応した内容」を指定します。

ラジオボタンでの分岐方法(例) »

Chip: [checkbox,ラジオボタン,セレクト] のキーと値

「Smart Custom Fields(スマートカスタムフィールド)」は、複数の選択肢を持つフォーム部品は「key」しか保持していません。

「key」とは異なる内容を書き出したい場合は、書き出す側のテンプレートに直接登録する必要があります。

単純に値を書き出したいなら「key=値」で登録

SFCは「値」だけでOK^^
「値」を直接登録するので、メンテナンスも簡単です。「文字量が多い」「選択肢にできない」など積極的な理由がなければ「値」だけ登録をお勧めします。

「キー」と「値」に分けて登録したい場合

「keyと値、両方を利用したい」という場合もあるかもしれませんが、、SFCは「値」を保持しません。設定時の値は「選択用ラベル」と割り切りましょう^^;;

複数の値を持つフィールドを出力

「チェックボックス」「繰り返しフィールド」「関連記事」など複数の値を持てるフィールドは「値」を配列として格納 】します。
グループ や フィールドを呼び出してから foreach で中の値を取り出します。

[チェックボックス] を出力する

「値だけ」や「keyを書出す」場合

<?php 
$myfield = scf::get('myfield'); foreach( $myfield as $field ){ 
	echo $field; 
} ?>

複数選択している場合は「選択した値全て」を書き出します^^

「キー => 値」で登録している場合

<?php 
$myfield = scf::get('myfield'); foreach( $myfield as $field ){ 
	if($field == 'key1'){ '実際に書き出したい内容 1'; } 
	elseif($field == 'key2'){ '実際に書き出したい内容 2'; } 
	elseif($field == 'key3'){ '実際に書き出したい内容 3'; } 
	elseif($field == 'key4'){ '実際に書き出したい内容 4'; } 
	echo $field; 
} ?>

foreach で配列に入っているkeyを取り出し、keyに対応した内容を書き出します。
「key=>値」で登録した値は実際の書き出しには関わりません。

[関連する投稿] を出力する

【 関連する投稿 】は、選択した投稿の「ID」を格納しますので、「投稿ID」で呼び出せる「投稿タイトル」「投稿のURL」など投稿に関するオブジェクト(データ)は、ほぼ網羅できます^^

▼ フィールド名は ‘relat‘ とします

<?php 
$relat = scf::get('relat'); foreach ($relat as $field) { 
	echo $field; // ← 投稿ID 
  //▼ 投稿IDで呼べるオブジェクトの例 
	echo get_the_title($field); 
	echo get_permalink($field); 
	echo get_the_excerpt($field);
  //▼ get_post(投稿ID)->オブジェクト; もOK 
	echo get_post($field)->post_date; 
} ?> 

相性がある??かも。上記以外の呼び出しはご自身でお試しくださいm(__)m

[関連するターム] を出力する

【 関連するターム】は、選択したカテゴリーの「ID」を格納しますので、「カテゴリーID」で呼び出せる「タイトル」「URL」などカテゴリーに関するオブジェクト(データ)は、ほぼ網羅できます^^

▼ フィールド名は ‘term‘ とします

<?php 
$term = scf::get('term'); foreach ($term as $field) {
	echo $field ;  // ← カテゴリーID 
  //▼ カテゴリーIDで呼べるオブジェクトの例 
	echo get_category_link($field); 
	echo get_the_category_by_ID($field); 
  //▼ get_category(ID)->オブジェクト; もOK 
	echo get_category($field)->name; 
	echo get_category($field)->slug; 
} ?> 

相性がある??かも。上記以外の呼び出しコードはご自身でお試しくださいm(__)m

[繰り返しフィールド] を出力する

複数のフィールドを持つグループを、使う人自身で「追加・削除・順序変更」できる【繰り返しフィールド】。幅広い用途に使えて本当に便利!!!

この機能の為に「Smart Custom Fields」を使うって人も多いですよね^^


▲ 例として、この登録をコードにします。
⇒ グループ = site
⇒ フィールド[サイト名] = name, フィールド[アドレス] = url 

▼ 基本のコード

<?php 
$site = SCF::get('site'); foreach ( $site as $fields ) { 
	echo $fields['url']; 
	echo $fields['name']; 
} ?>

$site の中で 2つのフィールドを呼び出し echo しているだけです^^

例: 実際のコードと出力結果

基本のコードだけではイメージがわきにくいと思うので、、、

if( !empty( $site[0][‘name’] )) { 処理 }
で【 1個目の「サイト名」に記入がある時だけ 】処理を開始するようにします

▼呼び出しコードの例

<?php $site = SCF::get('site'); if( !empty( $site[0]['name'] )) { ?> 
<ul>
<?php foreach ( $site as $fields ) { ?> 
<li><cite&gt;<a href="<?php echo esc_url( $fields['url'] ); ?>" target="_blank" rel="noopener" /> 
	<?php echo esc_html( $fields['name'] ); ?> 
</a></cite></li> 
<?php } ?> 
</ul>
<?php } ?> 

▼ 出力結果▼

<ul> 
<li><cite><a href="https://どこか.com/p=1234/" target="_blank" rel="noopener" /> 
	○○について
</a></cite></li> 
<li><cite><a href="https://ここか.jp/△△△/" target="_blank" rel="noopener" />  
	△△△の基本 
</a></cite></li> 
</ul>

 

条件分岐で出力する [未入力、二択(真偽値)、複数条件]

表示非表示など、条件付きの分岐が簡単にできるカスタムフィールド。
使う人自身が選べる事で、利便性や安全性が一気に上がります^^

未入力ならタグごと非表示に

カスタムフィールド自体は記入がなければ、何も書き出しませんが、、、

フィールドの値を削除したら [ 装飾や余白を含んだ<div> ] などのタグが残ってしまった。。。あるあるですよね ><

こんな時は「empty() = 空要素」を使って分岐。
( ! = not ) なので「 !empty() = 空じゃない 」になります^^v

例えばこんなコード

<div class="myclass">
	<?php $myfield = scf::get('myfield'); echo $myfield; ?> データ削除予定 
</div>

空欄にしたらタグごと非表示

<?php $myfield = scf::get('myfield'); if( !empty( $myfield )){ ?>
<div class="myclass">
	<?php echo $myfield; ?> 
</div> 
<?php } ?>

先にフィールド(myfield)を呼び出し if( !empty( $myfield )){  処理  } で、出力内容(echo ~&タグなど)を囲います。
フィールド(myfield) が空欄だと、{ } 内の処理(書き出し) は一切行いません。

使用不使用を二択で選択する (真偽値)

「今は使わないから非表示」 でも 「また必要になるからデータは残したい」などは【真偽値】を使って二択に。使う人自身で安全に操作できて、とっても便利♪

▼ フィールド名 = mycheck

例えばこんなコード

<div class="banner">
	<img src="banner画像.jpg" alt="近日公開" /> 
</div>

登録はそのままで必要な時だけ表示したい!!

<?php $myfield = scf::get('mycheck'); if( $mycheck ){ ?>
<div class="banner">
	<img src="banner画像.jpg" alt="近日公開" /> 
</div>
<?php } ?>

チェックフィールド(mycheck)を呼び出し  if( $mycheck ){  処理 } で、出力データを囲います。真偽値で分岐させ、 (false) を選ぶと { } 内の処理(書き出し) は一切行いません。

複数の選択肢から選ぶ (ラジオボタン)

ラジオボタン基本の出力方法 »

複数の選択肢を用意して、選択によって作動や表示を変える場合は (ラジオボタン)が便利^^


▲ フィールド名 = mycheck
[ key0=>Banner-0, key1=>Banner-1, key2=>Banner-2, key3=>バナーなし ]とします

例えばこんなコード ↓「バナーなし」を選んだら全部非表示

<div class="banner">
	<img src="banner画像.jpg" alt="" /> ←選択した画像を表示
</div>

<?php $myfield = scf::get('mycheck'); if( $mycheck <> 'key3' ){ 
	echo '<div class="banner">'; 
	if( $mycheck == 'key1' ){  
		echo '<img src="banner-1の画像.jpg" alt="" />'; 
	} elseif( $mycheck == 'key2' ){ 
		echo '<img src="banner-2の画像.jpg" alt="" />'; 
	} else { 
		echo '<img src="banner-0の画像.jpg" alt="" />'; 
	}  
	echo '</div>'; 
} ?>

if( $mycheck <> ‘key3’ ){ 処理 } ← key3 でなかったら { } 内の処理に進み、keyに合わせた画像をラッパーと一緒に出力します。
※ラジオボタンは配列なので ( <> 不一致 ) を利用しています。

 

コメント

ご意見ご感想お待ちしてます。

CAPTCHA


ありがとうございます。
コメントは承認後に掲載されます