【WordPress】Smart Custom Fields(SCF)でカスタムフィールドを出力する

【WordPress】Smart Custom Fields(SCF)でカスタムフィールドを出力する

WordPressのプラグイン「Smart Custom Fields(SCF)」のカスタムフィールドの出力方法をご紹介します。

WordPressのプラグインの中で最近のお気に入りが「Smart Custom Fields(SCF)」です。

カスタムフィールドを管理するプラグインです。
入力を指定できるフィールドタイプも豊富で、繰り返しの処理なんかもこれ一つで充分対応出来ます。
最近、ほぼ必須なくらい案件で使ってます。

案件でよく使う出力するためのコードをご紹介します。

テキストを出力

// Smart Custom Fields の値を呼びだす
// SCF::get( '設定した名前' )
<?php 
$text= SCF::get( 'text' );
echo $text;
?>

画像のURLを取得してimgタグに出力する

<?php 
// SCF::get_post_meta($post->ID, '設定した名前', 画像サイズ)
 $img = get_post_meta($post->ID, 'img', true);
?>
<img src="<?php echo wp_get_attachment_url($img) ?>">

Smart Custom Fields(SCF)でよく使うのが画像を繰り返して使う場面が多いので、
画像のグループ名(img_group)を取得して画像ごと(img)出力します。



画像を繰り返し出力する

<?php 
// SCF::get( '繰り返すグループ名' )
 $img_group = SCF::get( 'img_group' );

foreach ( $img_group as $fields ) {

// get_post_meta($post->ID, '設定した名前', 画像サイズ);
$img = get_post_meta($post->ID, 'img', true);
$imageItem = wp_get_attachment_image_src($img, 'thumbnail');
?>

<img src="<?php echo wp_get_attachment_url($imageItem[0]) ;?>">

<?php } ?>

もし、カスタムフィールドが任意で、出力する項目ごと消したい場合は、empty関数を使って項目ごと消せます。

項目が空だった場合は表示させない

投稿画面から値が入力されてない場合は「div」ごと表示しないようにします。

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

<?php if(!empty($text)):?>
    <div>
        <?php echo $text; ?>
    </div>
<?php endif;?>


画像を呼び出し
<?php $img = get_post_meta($post->ID, 'img', true);?>

<?php if(!empty($img)):?>
    <div>
        <img src="<?php echo wp_get_attachment_url($img) ?>">
    </div>
<?php endif;?>


画像を呼び出し(繰り返し時)
グループ配列を呼び出して、ファイル名がない場合は出力しない処理
<?php $img_group = SCF::get( '繰り返すグループ名' );?>
<?php $img_group = SCF::get( 'img_group' );?>

<?php if(!empty($field_group[0]['img'])):?>
    <div>
        <?php
        foreach ( $field_group as $fields ) {
            $imageItem = wp_get_attachment_image_src($fields['img'], 'thumbnail');
            ?>
            <img src="<?php echo $imageItem[0];?>">
            <?php } ?>
        </div>
<?php endif;?>

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース