Smart Custom Fieldsの使い方【カスタムフィールド繰り返し出力】
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」を使えばテキストだけでなく、画像の繰り返し出力もできます。
無料で利用できるので、ぜひ試してみてください！
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら