wordpress acf/scf設定方法テンプレート不要！WordPressでカスタムフィールドを簡単表示する方法（ACF/SCF活用）

WordPressでサイト構築をしていると、「価格」や「開催日」など独自の情報を投稿に追加したいという場面に出くわすことが多いはずです。
そういったケースで役立つのが「カスタムフィールド」ですが、多くの方がその表示部分（テンプレートの編集）でつまずいて断念してしまいます。

そこで今回は、テンプレートファイルを編集せずに、投稿画面にカスタムフィールドを表示する方法を紹介します！

カスタムフィールドとは？

通常のWordPress投稿には「タイトル」「本文」「カテゴリー」などの基本的な項目しかありません。
しかし、たとえば「料金」や「会場名」「日付」など投稿ごとに独自の項目を追加したいときに使うのが、カスタムフィールドです。

ACFとSCFの違いは？

ACF（Advanced Custom Fields）

WordPressで最も利用されているカスタムフィールド管理プラグインです。多機能かつユーザーフレンドリーなUIが魅力です。

SCF（Secure Custom Fields）

ACFの互換性を持った別プラグインで、ACFを元に派生して誕生しました。
ACFを運営するWP EngineとWordPress開発者との方針の違いから生まれた背景がありますが、元が同じである為大きな違いはありません。（今後違いが顕著になっていくかもですが）。

SCFをインストールしよう

今回はSCFプラグインをインストールしてハンズオンしていきます！（あんまりSCFで解説しているサイトがなかったので）

WordPress管理画面 > プラグイン > 新規追加
「SCF」や「Secure Custom Fields」で検索
「Secure Custom Fields」をインストール・有効化

※ Advanced Custom Fieldsでも構いませんが、検証してませんのでもしかしたら動かなかったすみません。

フィールドグループを作成する

管理画面に「SCF」というメニューが追加されているのでクリック
「フィールドグループ」 > 「新規追加」

グループ名を「Test」などに設定
「text」フィールドを作成（フィールド名は text）
「変更内容を保存」

投稿画面で表示するためのショートコードを追加

次に、functions.php に以下のコードを追加します。
これは、カスタムフィールドの内容をショートコードで表示する処理です。

add_shortcode('scf', function ($atts) {
	$atts = shortcode_atts([
		'field' => '',
		'post_id' => get_the_ID(),
	], $atts, 'scf');

	if (!$atts['field']) return '';

	$field = $atts['field'];

	$output = '';
	if ($field == 'text') {
		$data = get_field($atts['field'], $atts['post_id']);
		$output .= '<p>' . esc_html($data) . '</p>';
	}
	return $output;
});

※ テーマファイルエディタが使用できないテーマの場合、FTPなどで直接 functions.php を編集してください。