WordPress プラグイン

【WordPress】Smart Custom Fields(SCF)をヘッダーなど共通パーツで表示させる方法

Smart Custom Fields(SCF)って共通パーツでも使える?

Smart Custom Fieldsはカスタムフィールドのプラグインで、繰り返し機能が使えるとても便利なプラグインです。

同じく有名なカスタムフィールドのプラグインでAdvanced Custom Fields(ACF)がありますが、こちらは有料のアドオンを利用しないと繰り返し機能は使えません。

そんな便利なSmart Custom Fieldsですが、

  • 固定ページや投稿ページ(管理画面に表示)
  • ヘッダーや投稿一覧ページ(管理画面に非表示)

上記2つで表示方法が異なります。

一般的には管理画面に表示される固定ページなどで使用されるケースが多いかと思いますが、今回はヘッダーなどの共通パーツで表示させる方法をご紹介していきます(今回の方法で固定ページでも表示させることが出来ます)

Smart Custom Fieldsを共通パーツで使用する方法(オプションページ作成)

今回の手順は次のようになります。

  1. プラグインをインストール&有効化
  2. functions.phpにコード追記
  3. Smart Custom Fieldsの設定(オプションページ作成)
  4. 表示させたいファイル(header.phpなど)に表示させる為のコードを書く

今回のキモはオプションページの作成になります。

それでは順番に解説していきます。

 

Smart Custom Fieldsをインストール&有効化

まずはプラグインをインストール&有効化していきます。

管理画面のプラグイン→新規追加をクリックして、SCFと検索すると表示されます。

そして今すぐインストールをクリックすると有効化と表示が変わるので、そのまま有効化までします。

 

functions.phpにコード追記

次にfunctions.phpに以下のコードを書きます。

/**
 * @param string $page_title ページのtitle属性値
 * @param string $menu_title 管理画面のメニューに表示するタイトル
 * @param string $capability メニューを操作できる権限(manage_options とか)
 * @param string $menu_slug オプションページのスラッグ。ユニークな値にすること。
 * @param string|null $icon_url メニューに表示するアイコンの URL
 * @param int $position メニューの位置
 */
SCF::add_options_page( 'ページタイトル', 'メニュータイトル', 'manage_options', 'theme-options' );

こちらは公式ページに載っています。

オプションページの作成機能等を追加した Smart Custom Fields 2.1.0 を公開しました。 – モンキーレンチ

そして今回はこのように追記してみます。

/**
 * @param string $page_title ページのtitle属性値
 * @param string $menu_title 管理画面のメニューに表示するタイトル
 * @param string $capability メニューを操作できる権限(manage_options とか)
 * @param string $menu_slug オプションページのスラッグ。ユニークな値にすること。
 * @param string|null $icon_url メニューに表示するアイコンの URL
 * @param int $position メニューの位置
 */
SCF::add_options_page( '犬のHP', '犬情報', 'manage_options', 'theme-options' );

すると管理画面に犬情報というメニューが表示されました。

 

しかしまだ何も設定してないので、メニューが追加されただけです。

それではこれから設定をしていきます。

 

Smart Custom Fieldsの設定(オプションページ追加)

設定は管理画面のSmart Custom Fieldsの新規追加をクリックするとこちらが表示されます。

タイトルを入力したらフィールド追加をクリックします。

するとこちらが開くので、記入していきます。

必須なのはタイプと名前だけで、他は必要に応じて入力しましょう。

今回タイプは一番よく使いそうなテキストにしましたが、他にも画像やラジオボタンなども選択できます。

名前はphpファイルに書くので、英語にしておいた方がいいでしょう。

固定ページや投稿ページで表示させたい場合は右の表示条件(投稿)からページを指定しますが、今回は共通パーツで表示させたいのでオプションページを使用します。

なので入力が終わったら更新をクリックする前に、右下にあるオプションページのトグルボタンをONにしましょう。

そして犬情報を見るとこのように表示されます。

もし先ほどのオプションページのトグルボタンをONにしなかったら、こちらは表示されません。

デフォルトでチワワと設定しましたが、ここは変更可能です。

手順とメモの違いはよく分かりませんが、メモの方が少しフォントが小さく色が薄いくらいですね(手順の改行は無効になります)

そしてこれを繰り返しで使いたい場合は、先ほどの設定画面に戻って繰り返しのトグルボタンをONにします

そしてグループ名を入力したら更新ボタンをクリックします(ここも英語がいいと思います)

そして再び犬情報に戻ると、3つのボタンが増えています。

ここで+をクリックすれば項目が増えます。

削除したい場合は×をクリックすれば消せます。

また3本線はドラッグして項目の順番を入れ替えることが出来ます。

仮に数が決まっていても後から追加・削除したいという事になるかも知れないので、最初から繰り返しはONにしておいてもいいかと思います。

 

表示させたい共通パーツにコードを書く

例えばheader.phpの表示させたい場所に次のコードを書きます。

<?php
 $fields = SCF::get_option_meta( 'theme-options', 'グループ名' );
 foreach ( $fields as $field_name => $fields_value ) {
?>
<div class="text-box">
 <?php echo $fields_value['名前']; ?>
</div>
<?php } ?>

ここで変更する箇所は先ほど設定したグループ名名前になります。

<?php
 $fields = SCF::get_option_meta( 'theme-options', 'dog-event' );
 foreach ( $fields as $field_name => $fields_value ) {
?>
<div class="text-box">
 <?php echo $fields_value['dog-type']; ?>
</div>
<?php } ?>

これで先ほど入力したチワワというテキストが表示されます。

テキストのみ表示させるだけであればこれでOKです。

 

画像を表示させる方法

先ほどはテキストでしたが、画像の表示もよく使うと思います。

設定画面のサブフィールドを追加をクリックすると項目を追加出来るので、今度はタイプを画像にして更新します。

ラベルや名前はテキストと同じですが、画像はプレビューサイズが指定できます。

これはあまり大きいと確認しにくいので、小さくていいかと思います。

そして画像を表示させる場合は先ほどの名前「dog-type」を変更するだけでは表示されないので、以下のように書きます。

<?php
 $img = SCF::get_option_meta( 'theme-options', 'dog-event(グループ名)' );
 foreach ($img as $fields ) {
 $imgurl = wp_get_attachment_image_src($fields['dog-img(画像の名前)'] , 'full');
?>
<div class="img-box">
 <img src="<?php echo $imgurl[0]; ?>" width="<?php echo $imgurl[1]; ?>"
height="<?php echo $imgurl[2]; ?>">
</div>
<?php } ?>

ちょっと紛らわしいですが、画像の名前はファイル名の事ではなく、先ほど設定した名前の項目になります。

しかしこれでは画像しか表示されないので、同じフィールドのテキストも表示させたい場合はこのように書きます。

<?php
 $img = SCF::get_option_meta( 'theme-options', 'dog-event' );
 foreach ($img as $fields ) {
 $imgurl = wp_get_attachment_image_src($fields['dog-img'] , 'full');
?>
<div class="container">
 <div class="text-box">
  <?php echo $fields['dog-type']; ?>
 </div>
 <div class="img-box">
  <img src="<?php echo $imgurl[0]; ?>" width="<?php echo $imgurl[1]; ?>"
height="<?php echo $imgurl[2]; ?>">
 </div>
</div>
<?php } ?>

classを付けたdivタグに関してはなくても表示はされますが、ないとコーディングしにくいと思うので書きました。

ココに注意

プラグインを無効化するときはfunctions.phpやheader.phpなど、書いたコードを先に消しましょう。先にプラグインを無効化するとエラーが出ます。

 

まとめ:Smart Custom Fieldsを共通パーツで表示させることは可能!

あまりヘッダーやフッターでカスタムフィールドを使う機会はないかも知れませんが、いざ使う場面が来たときに

あれ?固定ページ以外でどうやって表示させるんだ??

となったので、覚えておくといいかと思います。

-WordPress, プラグイン