初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

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

> WordPress

私の仕事柄、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では「値」を出力することができない

ということです。

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


を使うと良いです。

ラジオボタンを出力する

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

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

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

ラジオボタンでも同様、

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

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

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

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

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

<?php
var_dump($sample_selectbox);
?>

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

「何が出力できるんだろう~?」

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

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

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


ファイルを出力する

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

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

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

関連する投稿を出力する

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

フィールドの設定で

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

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

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

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


では、出力してみます。

<?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が分かるとタイトルだけでなくリンクや属するタームなど、おそらくすべての情報が取得できるのではないでしょうか。

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

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

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




“Smart Custom Fields愛用者が常用する全カスタムフィールド出力方法” への7件のフィードバック

  1. katsumi より:

    初めまして、こんにちは。
    Smart Custom Fieldsの記事を拝見しました。

    グループで回すときに上手くできなくて教えて頂きたいのですが、
    固定ページで10件ごとにページネーションを付けたいのです。
    現在のコードを入れておきます。
    ーーーーーーーーーーーーーーーーーーーーーーー
    = $kiji){
    break;}
    else{
    ?>
    <a href="?works=”>

    ID, ‘ichach’, true ); echo wp_get_attachment_image( $fields[‘ichach’], ‘175,131’ ); ?>

    ーーーーーーーーーーーーーーーーーーーーーーー

    お忙しいと思いますがよろしくお願いします。

    • techstock@admin より:

      質問ありがとうございます。
      Smart Custom Fields は繰り返し機能が無料で使えてとてもありがたいですよね!
      質問の内容についてですが、スマートカスタムフィールドの繰り返し機能を使ってコンテンツを出力する仕様で、出力したコンテンツを10件ごとにページネーションで次のページに続く、、、
      という仕様にしたい、ということで間違いないでしょうか。

      これは私も作ったことのない仕様ですね。
      よろしければ、もう少し詳しく教えていただけないでしょうか。
      お答えできるかどうかはわかりませんが・・・(汗)

      状況が詳しく分からないのでトンチンカンなことになるかもしれませんが、
      もし私なら、まず、CPT UI を使ってカスタム投稿(「sample」としておきます)を作ります。
      そして、カスタム投稿「sample」に記事を増やす要領でコンテンツを増やし、固定ページにカスタム投稿タイプ「sample」の記事一覧を出力します。
      ここで、10件ごとにページネーションを付ける仕様にすると思います。

      つまり、スマートカスタムフィールドの繰り返し機能でコンテンツを増やすのではなく、カスタム投稿タイプの記事としてコンテンツを増やす、ということです。
      いかがでしょうか。

  2. katsumi より:

    ご返信ありがとうございます。
    説明不足で申し訳ありません。

    実際のコードを投稿したのですが一部しか表示されないようです。汗

    現在までは記事一覧表示で100件以上表示させていましたが、スクロールが長くなるので、10件ごとにページネーションを付けたいのです。

    コードを見て頂きたいのですがどうすればいいでしょうか?

    • techstock@admin より:

      度々ありがとうございます。
      やはりそうでしたか。。。
      中途半端なソースだったのでもしやとは思っていました・・・
      解決策を探します・・・申し訳ありませんm(_ _;)m

      では、とても回りくどいやりかたになって恐縮なのですが、そのソースを張り付けただけの記事を作っていただくことは可能でしょうか。
      (その記事にはnoindex,nofollowを付けた方がいいですね。)
      それがもし可能であれば、大変お手数ですが、その記事のURLをまた当記事のコメント欄に張り付けていただいて、私がその記事を見に行ってソースを確認する・・・というのは・・・いかがでしょうか・・・

      それと、もう一つ可能であれば、おっしゃっていた100件以上の記事があって10件ごとにページネーションを付けたいそのページのURLも解決策の参考になるかもしれないのでお教えいただけますでしょうか。
      もちろん「可能であれば」ですので「イヤ!」ということでしたら大丈夫ですよ!^^;

  3. katsumi より:

    ありがとうございます。

    サイトに画像で貼り付けたので見てください。
    現在28件にして表示させています。

    http://www.web-support.info/?p=140

    宜しくお願いします。

    • techstock@admin より:

      ありがとうございます。
      確認させていただきます。
      返信がいつになるかちょっと予想が付きませんが改めてまた返信させていただきます。
      少々お待ちくださいm(_ _;)m

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です