Smart Custom Fields愛用者が常用する全カスタムフィールド出力方法

私の仕事柄、WordPressでサイトを1からカスタマイズして作ったりリニューアルのメンテナンスやカスタマイズ仕直しの業務が多々あり、毎回非常にお世話になっているのが「Smart Custom Fields（SCF）（スマートカスタムフィールド）」なんです。

もちろん他にもお世話になっているWordPressのプラグインは多々ありますが、今回はスマートカスタムフィールドという超便利なプラグインの使い方を備忘録がてら書いてみます。

世界の駆け出しwebエンジニアの方々の役に立ててもらえればと思います。

今回はSmart Custom Fieldsのインストール方法は割愛して進めようと思います。

ある程度ワードプレスを使いこなしている方がこのページにたどり着いていると思うので。

では、はじめましょう。

テキストを出力する

<?php
$sample_text = scf::get('sample_text_fields’);
echo $sample_text;
?>

まずはテキストを出力してみましょう。

これがベースの書き方です。

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

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

これで一応は出力できますが、この書き方では改行が反映されません。

改行を適用させるには、

nl2br(); 

を使います。

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

真偽値を出力する

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

「いいえ（false）」を選んでいるときは何も出力されません。

具体的な使い方としては、

<?php
if($sample_authenticity){
	echo “「はい（true）」の場合こちらが出力されます。”;
}else{
	echo “「いいえ（false）」の場合こちらが出力されます。”;
}
?>

「echo」を使うと「” ”」で囲ってしますのでコードヒントが適用されなくなってしまいます。

echo を使いたくない場合は、こちらが使いやすいです。

<?php if($sample_authenticity){ //真偽値で「はい」を選んでいる場合 ?>
「はい（true）」の場合こちらが出力されます。
<?php }else{ //真偽値で「いいえ」を選んでいる場合 ?>
「いいえ（false）」の場合こちらが出力されます。
<?php } ?>

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

チェックボックスのカスタムフィールドを出力するのは少しややこしくなっています。

通常通り、下記のように書いてみると、

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

出力結果は

Array

です。

「Array」というのは「配列」という意味です。

配列の内容を出力する場合は「foreach」を使ってループして出力する、という方法を使います。

<?php
$sample_checkbox = scf::get('sample_checkbox');
$n = 0; //配列順を初期化
foreach($sample_checkbox as $fields ){ //ループ開始
	echo $sample_checkbox[$n]; //配列のn番目に入っているものを出力する
	$n++; //nに1を足したものをnに再び代入する
}
?>

これでカスタムフィールドで選択したチェックボックスの「キー」が出力されます。

ここで厄介なのが、

Smart Custom Fieldsでは「値」を出力することができない

ということです。

スマートカスタムフィールドではチェックボックスのフィールドでは「値」を出力できないので、どうしても値を出力したい場合は、

Advanced Custom Fields (ACF)

を使うと良いです。

ラジオボタンを出力する

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

これで実際に出力してみると、なんと、スマートカスタムフィールドで設定した「キー」が出力されます。

Smart Custom Fields（SCF）はどうしても「値」は出さしてくれないようです(笑)

ラジオボタンでも同様、

Advanced Custom Fields (ACF)

を使うと良いと思います👍

セレクトボックスを出力する

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

これまた、チェックボックス、ラジオボタンに続き、これで出力できてしまいます。

「Array」とか配列で出てきてくれると

<?php
var_dump($sample_selectbox);
?>

として配列の中身を調べて

「何が出力できるんだろう～？」

とわくわくするところだったんですが・・・

チェックボックス、ラジオボタンと同様、

Advanced Custom Fields (ACF)

を使うと良いと思います。

ファイルを出力する

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

このように書くと、2行目のそのままecho で出力すると、ファイルのIDが出力されます。

つまり、IDを使うphpタグを使える、ということです。

後で書きますが、スマートカスタムフィールドで「画像」を出力することができます。

そのときに使うのが

wp_get_attachment_image_src($sample_file);

を使うのですが、これは画像専用のタグです。

「ファイル」カスタムフィールドで画像をアップロードして選択しているならwp_get_attachment_image_srcを使うことができます。

ただしPDFやwordファイルなどを選択している場合は注意してください。

管理人はまだ試していませんのでなんとも言えませんが、、、

画像を出力する

スマートカスタムフィールドに限らずですが、カスタムフィールドで「画像」を選択した場合、<img>タグごと出力する方法と、URLを出力する方法があります。

ちなみに私は色々とカスタマイズしやすいのでURLを出力する方を毎回使っています。

画像のURLを出力する

<?php
$sample_image = SCF::get('sample_image');
$sample_image_URL = wp_get_attachment_image_src($sample_image,'full')[0];
echo $sample_image_URL;
?>

2行目の最後に

[0]

と書いているんですが、0にするとURLが出力されます。
これを変えると、URL以外の情報も出力することができます。

[1]

とすると、画像の横幅の数字のみが出力されます。

[2]

とすると、画像の縦幅の数字のみが出力されます。

[3]

とすると、bool(false)と出力されるんですが、正直何なのか分かっていません（笑）

ご存知の方がいればご教授願います・・・m(_ _)m

画像のaltを出力する

スマートカスタムフィールドで上記のように画像に関する情報は一部出力できますが、wp_get_attachment_image_src();ではalt（オルト）を出力できません。

altに関する情報が配列の中に入っていないのです・・・！！！

どうにか出力する方法を探し当てたので共有したいと思います。

<?php
$sample_image_data = get_post(SCF::get('sample_image'));
$sample_image_alt = get_post_meta($sample_image_data->ID, '_wp_attachment_image_alt', true );
echo $sample_image_alt;
?>

これで、スマートカスタムフィールドで登録した画像のalt（オルト）を出力できます。(￣▽￣;)

ポイントは「get_post」を使ってアップロードした画像の情報を取得している部分です。

「SCF:get」だけでは取得できる情報が限られているのでしょうね。

ともかく、altを出力できる記事をなかなか見つける事ができませんでしたので、同じように悩んでいるwebエンジニアの方はどうぞ使ってください！！

画像を<img>タグごと出力する

上で書いたものと似ていますが、

上で使っているのは wp_get_attachment_image_src(); ですが、

ここで使っているは wp_get_attachment_image(); です。

<?php
$sample_image = SCF::get('sample_image');
$sample_image_imgtag = wp_get_attachment_image($sample_image,'full');
echo $sample_image_imgtag;
?>

WYSIWYG（テキストエディタ）を出力する

WYSIWYGは、テキストエディタのことです。

WYSIWYGも下記のように書くと一応は出力できます。

<?php
$sample_wysiwyg = SCF::get('sample_wysiwyg');
echo $sample_wysiwyg;
?>

ただ、改行が反映されませんので、下記のように改行を反映する nl2br(); を使います。

<?php
echo nl2br($sample_wysiwyg);
?>

カラーピッカーを出力する

<?php
$sample_colorpicker = SCF::get('sample_colorpicker');
echo $sample_colorpicker;
?>

このように書くと、 #a5a5a5 のように「#」付きの色が出力されます。

実は当サイトTechStock（テックストック）でもカラーピッカーのカスタムフィールドを使っています。

本記事のタイトルを見てみてください。

背景色と文字色が付いていると思います。

この仕組みは、各記事にカラーピッカーをスマートカスタムフィールドで作り、背景色と文字色を選んで、

<div class="article_titArea" style="background: <?php echo SCF::get('sample_colorpicker01'); ?>;">
<h1 style="color: <?php echo SCF::get('sample_colorpicker02'); ?>">タイトル</h1>
</div>

といった感じで出力しています。

日付ピッカーを出力する

日付ピッカーも

<?php
echo $sample_date_picker = SCF::get('sample_date_picker');
?>

と記述すると出力できます。

ただ、デイトピッカーのフィールドを作るときに「日付形式」を設定する必要があります。

例えばこんな感じ。

yy/mm/dd（D）

この設定にして日付を選択すると

2020/04/16（木曜）

こんな風に出力されます。

これの「曜」が邪魔だなぁ～ということで、下記のようにして使うことが多いですね。

<?php
$sample_date_picker = SCF::get('sample_date_picker');
echo str_replace('曜','',$sample_date_picker );
?>

時刻付き日付ピッカーを出力する【準備中】

準備中ですので今しばらくお待ちください。。。

関連する投稿を出力する

「関連する投稿」では、デフォルトの投稿や固定ページ、カスタム投稿などから、記事を選択して出力することができます。

フィールドの設定で

• 投稿タイプ
• 選択できる個数

の設定を忘れないようにチェックしておきましょう。

そして、記事の中で関連する投稿を選択します。

今回は、「選択できる個数」を２にして投稿を２つ選択しました。

では、出力してみます。

<?php
echo $sample_related_posts = SCF::get('sample_related_posts');
?>

と書いてみましょう。

すると、出力されたのは、、、

Array

どうやら「関連する投稿」フィールドは配列で出力されるようですね！

では早速、var_dump(); で配列の中身を確認してみましょう！

<?php
$sample_related_posts = SCF::get('sample_related_posts');
var_dump($sample_related_posts);
?>

出力結果はこの通り。

array(2) { [0]=> string(2) "55" [1]=> string(2) "11" }

記事のIDが出力されました！

これを使って、このIDの記事の情報を取得・出力できます。

例えばこんな風に書くと、、、

<?php
$sample_related_posts = SCF::get('sample_related_posts');
foreach( $sample_related_posts as $loop ){
	$post = get_post($loop);
	echo $title = get_the_title($loop);
}
wp_reset_postdata();
?>

選択した記事のタイトルを出力できます。

記事のIDが分かるとタイトルだけでなくリンクや属するタームなど、おそらくすべての情報が取得できるのではないでしょうか。

非常に便利なフィールドなので今もよく使っています♪

関連するタームを出力する【準備中】

準備中ですので今しばらくお待ちください。。。

プラグインに依存しないカスタムフィールド出力方法

カスタムフィールド系プラグインはいくつかあり、それぞれで独自の出力関数が用意されていますが、統一した書き方でカスタムフィールドを出力することができます。

詳しくはこちらをご覧くださいm(__)m

【コピペ可】非プラグイン依存！カスタムフィールド出力の統一した書き方