簡単にサイトやブログが作成できるWordPress（ワードプレス）。
WordPressでは、記事を投稿する際に『カスタムフィールド』という任意の情報を追加できる機能があります。
こちらを使用すれば、更新の人的ミスが減り、詳しくない人でも記事を更新できるようになります。
そんなカスタムフィールドの中でも人気のあるプラグイン
「Smart Custom Fields（SCF）」をご紹介致します。（バージョン 4.1.2）
「Smart Custom Fields（SCF）」の利点
「Smart Custom Fields（SCF）」では、簡単にカスタムフィールドを追加できる他、以前は有料オプションのプラグインが主流だった繰り返し機能が初めから備わっていて、しかも無料で使用可能なプラグインです。
今回は初級として、インストールからカスタムフィールドの追加・表示までを解説したいと思います。
「Smart Custom Fields（SCF）」のインストール
まずは、インストールの手順です。
これは他のプラグインを追加する時と同様の手順です。
①WordPressへログインしてダッシュボード画面へ移動し、メニューバーから【プラグイン】→【新規追加】を選択します。
➁入力フォームにSmart Custom Fieldsと入力して検索すると、左上に出てくるので「今すぐインストール」からインストールして下さい。
③インストール後は、「インストール中…」から「有効化」に変わるので、クリックし有効化にして下さい。有効化後はメニューに『Smart Custom Fields』が追加され、先ほどのボタンが「有効」という文字に変わります。（画像参照）
カスタムフィールドを設定し投稿ページから利用
Smart Custom Fieldsには標準でテキストや画像など様々なフィールドがあります。
今回は投稿に毎回表示する「天気」のテキストフィールドを追加したいと思います。
①メニューバーから【Smart Custom Fields】→【新規追加】を選択すると、新規追加ページになります。タイトルは仮に「日記テンプレート」と設定し、フィールド追加ボタンから、テキストフィールドを追加します。
➁タイプはテキストフィールドを追加したいので「テキスト」ラベルには分かりやすいように「天気」、説明文はカスタムフィールドの入力欄において表示させることができる文字列なので、「今日の天気を書いてください。」と記述しました。
上記のように入力すると公開後は以下の画像のようなカスタムフィールドが表示されます。
③表示条件のところで、表示させたいカスタムフィールドを選択し、【公開】をクリックすると適用されます。
④投稿ページへ移動し、下に先ほど追加した日記テンプレートの天気の項目があればここまで完了です。
カスタムフィールドをウェブサイトで表示
先ほど、日記テンプレートが出力され入力できるようになりましたが
ここに入力し、更新ボタンをクリックしてもウェブサイトには表示されません。
次は、先ほど追加した日記テンプレートの天気をウェブサイトで表示したいと思います。
ウェブサイトで表示するためには、Wordpressのテーマファイルを編集する必要があります。
今回、テーマファイルはデフォルトで入っていて最初に設定されている『Twenty Seventeen』なので
投稿タイプ『投稿』を表示するファイル、content.phpを編集することになります。
content.phpの場所は以下の通りです。
html/wp-content/themes/twentyseventeen/template-parts/post/content.php
①content.phpの73行目辺りに画像のような記述をします。
記述内容を説明するとSCF::getはSmart Custom Fieldsで
作成したカスタムフィールドを呼び出すための記述となります。
そして、呼び出したいカスタムフィールドの名前（weather）を記述し変数に格納します。
$変数 = SCF::get(‘カスタムフィールド名’);と覚えてください。
PHPのechoで出力することができるので、先ほどの格納した変数$weatherを出力します。
➁今日の天気を入力して更新し、ページに今日の天気が表示されていたら完了です。
まとめ
今回はSmart Custom Fieldsのインストールから、表示までを説明いたしました。
基礎ですが、開発を行う中で最初に躓く所だと思います。
様々なCMSがある中でも、WordPressは幅広いカスタムが可能なオープンソースです。
プラグインを効果的に使い、是非開発に役立てて下さい！ではまた！
