Suzuki Blog Written by Yuki Suzuki

Smart Custom Fieldsの使い方【カスタムフィールド繰り返し出力】

WordPress

web制作者「カスタムフィールドの繰り返し出力をwebサイトに取り入れたいんだけど、やり方がわからない…できれば無料で実現できる方法を知りたい!」

こんにちは!スズキです。

今回はSmart Custom Fieldsの使い方を紹介します。

Smart Custom FieldsとはWordPressプラグインの一つです。

こちらを利用すれば、カスタムフィールドの繰り返し出力ができます。

画像を使いながら、説明していきます!

この記事の内容

  • カスタムフィールドとは
  • Smart Custom Fieldsの使い方
  • まとめ

スポンサードサーチ

カスタムフィールドとは

使い方の前に、カスタムフィールドについて簡単に説明していきます。

カスタムフィールドとは、「記事タイトル」と「本文」以外の情報を追加して、記事に表示させる機能のことです。

カスタムフィールドを利用することで「オススメの商品」や「今日の天気」など、本文では管理しにくい情報を表示させることができます。

カスタムフィールド自体はWordPressに標準で用意されていますが、プラグインを使えばさらに便利になります!

Smart Custom Fieldsはカスタムフィールドを管理するプラグインの一つです。

Smart Custom Fieldsの使い方

それではSmart Custom Fieldsの使い方を説明していきます。

手順は以下の通りです。

  • インストールと有効化
  • カスタムフィールドの作成
  • 投稿画面にて入力、更新
  • テーマファイルの編集

インストールと有効化

まずはインストールと有効化を行います。

WordPressにログインし、プラグインの新規追加画面を開いてください。

「Smart Custom Fields」と入力し、検索します。

検索結果に「Smart Custom Fields」が表示されるので、「インストール」をクリックします。

インストールできたら、続けて「有効化」をクリックします。

左のメニューに「Smart Custom Fields」が表示されればOKです。

カスタムフィールドの作成

次にカスタムフィールドを作成します。

メニューから「Smart Custom Fields」の新規追加をクリックします。

まずはタイトルを入力し、「フィールド追加」をクリックします。

編集画面が表示されたら、「繰り返し」をチェックします。

すると、「グループ名」の入力欄が表示されるので、入力します。

次に「タイプ」と「名前」を入力しましょう。

今回はテキストタイプを選択しています。

ちなみに、この3つは必須項目で、「グループ名」と「名前」は後のテーマファイルの編集の際に使用します。

他の項目に関してはそのままでもいいのですが、「ラベル」は投稿画面での名前になるので、ここは入力してもいいと思います。

最後に右側の表示条件をチェックします。

カスタムフィールドを投稿ページに表示する場合は「投稿」を、固定ページに表示する場合は「固定ページ」をチェックします。

両方にチェックすることもできます。

ここまで入力できたら、「公開」をクリックしましょう。

「Smart Custom Fields」の一覧に作成したカスタムフィールドのタイトルが表示されていればOKです。

投稿画面にて入力、更新

次に、カスタムフィールドを表示させたいページの投稿画面に移動します。

すると、先程作成したカスタムフィールドのタイトルが追加されていると思います。

表示させたいテキストを入力して、更新ボタンをクリックしましょう。

ちなみ「+」ボタンをクリックすると、入力欄を増やすことができます。

テーマファイルの編集

これだけでは、カスタムフィールドを表示させることはできません。

最後にテーマファイルの編集を行います。

表示させたいページのテーマファイルを開いて、表示させたい箇所に以下のコードを書いてください。


<?php $test_data = SCF::get('test'); ?>
<?php foreach ($test_data as $fields ) :?>
 <p><?php echo $fields['test-text']; ?></p>
<?php endforeach ?>

簡単に解説します。

まず、一行目の

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

で「test」という名前のグループを呼び出しています。

そして、foreachを使うことでカスタムフィールドの繰り返し出力を実現しています。

foreach内の

<?php echo $fields['test-text']; ?>

で「test-text」という名前のカスタムフィールドを出力しています。

カスタムフィールドを複数用意している場合は、その分だけforeach内に追記してください。

以上で繰り返し出力ができます。

ページを確認してみましょう!

スポンサードサーチ

まとめ

いかがでしたか。

「Smart Custom Fields」を使えばテキストだけでなく、画像の繰り返し出力もできます。

無料で利用できるので、ぜひ試してみてください!

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks