WordPressのカスタムフィールド入門 (Smart Custom Fields使用)

2017/08/25 19:45
LINE

WordPressには様々な利用方法があります。扱う内容・商品によっては、以下のような悩みを持っている人は多くいらっしゃるのではないでしょうか?

  • WordPressで商品ページの更新を楽にしたい
  • WordPressが詳しくない人でも記事を更新できるようにしたい
  • 表の更新をエディタを使わずに行いたい
  • キャンペーン用の画像スライダーを管理画面で更新したい

これらの悩みは、もしかしたらWordPressの『カスタムフィールド』によって解決できるかもしれません。

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

WordPressには、記事を投稿する際に『カスタムフィールド』という任意の情報を追加できる機能があります。

このカスタムフィールドを上手く活用すれば、レイアウトを整えるのが面倒な商品ページの更新をすばやく対応できるようになったり、WordPressのエディターでは難しいデザイン性の高い画像ギャラリーを管理画面で管理できたりなど、投稿の利便性や自由度をより高めることができます。

しかしカスタムフィールドを初めて導入するとなると、導入の多様さもあって何から手を付けていけばいいのか分からないものです。そこで今回はカスタムフィールドの導入を、比較的簡単にできるように分かりやすさを意識して解説しようと思います。

事前準備 (プラグイン『Smart Custom Fields』の導入)

WordPressのカスタムフィールドを標準のまま使用するとなると、少し使い勝手に難があります。今回は分かりやすさを重視したいので、この記事ではすぐにカスタムフィールドを使えるように、『Smart Custom Fields』というカスタムフィールドの管理を行うWordPressプラグインを利用して、カスタムフィールドの解説を行ってまいります。

『Smart Custom Fields』のインストール

すでにSmart Custom Fieldsがインストールされているならこの章は無視してかまいません。まだインストールをしていなければWordPressへインストールしましょう。以下でインストール手順を解説します。

①WordPressへログインしてダッシュボード画面へいきます。

②『プラグイン』メニューをマウスオーバーして表示される「新規追加」をクリックします。

Wordpressのプラグインから新規をクリック

③『プラグインを追加』ページが開かれますので、「プラグインの検索」と書かれている入力フォームに『Smart Custom Fields』と入力してキーボードのエンターを押します。

④すると一番左端のカラムに『Smart Custom Fields』が出現しますので、『今すぐインストール』をクリックしてWordPress内にプラグインをインストールします。

今すぐインストールをクリック

⑤ボタンの表記が今すぐインストールから『インストール中…』と変わります。インストールが終わるまで待ちます。 インストールが完了したら表記が『有効化』に変わります。

⑥『有効化』をクリックしてWordPressに『Smart Custom Fields』を適用します。

⑦WordPressのメニューに『Smart Custom Fields』が追加されたら導入完了です。

入門. カスタムフィールドでテキストフォームを追加する

例として『今の気分』というカスタムフィールドを投稿画面に追加してみましょう。Smart Custom Fieldsには標準で様々な入力フォームをサポートしています。その中でもよく使うであろうテキストフォームをまずは追加してみます。

今回はWordPressの公式テーマ『Twenty Seventeen』を使用して説明していきます。最終的なイメージ図は以下です。

カスタムフィールド『今の気分設定』の最終イメージ図

テキストフォームのカスタムフィールドを作成

では早速Smart Custom Fieldsを経由してテキストフォームのカスタムフィールドを作成します。

①WordPressメニューに追加された『Smart Custom Fields』をマウスオーバーして表示される「新規追加」をクリックします。

Smart Custom Fieldsから「新規追加」をクリック

②新規追加ページになりました。このページでカスタムフィールドを登録することができます。右側にもいろいろ見慣れないメニューが存在しますが、真ん中のメイン画面から見ていきます。以下のような入力欄がありますので、まずはタイトルを入力しましょう。今回は仮に『今の気分設定』とします。

新規追加ページ

③次はいよいよカスタムフィールドを設定します。『カスタムフィールド』項目にある『フィールド追加』をクリックします。

④以下の画像のように入力項目がいくつか表示されます。

タイプと名前の項目

必須項目は『タイプ』と『名前』になります。タイプはフィールド追加時に初期値としてテキストが追加されるようになっています。今回はタイプをテキスト、名前を仮に『test-text』と付けます。

⑤『ラベル』は必須ではありませんが、分かりやすいように『今の気分』と付けます。こちらは特に文字列の指定はありません。

⑥『デフォルト』はカスタムフィールドに予め指定しておく値を設定することができます。『説明文』『注記』はカスタムフィールドの入力欄において表示させることができる文字列です。せっかくですので値を入力してどういう挙動になるのか試してみます。仮に以下の値を入れます。

  • デフォルト … 『ふつう』
  • 説明文 … 『今の気分を記事に表示することができます。』
  • 注記 … 『※何も記入しなければふつうと表示されます。』

全て入力すると以下画像のようになると思います。

画面右側に条件表示がある

⑦問題がなければ、次は『表示条件』を設定します。

表示条件は右側のサイドメニューにあります。表示条件を設定することによって、カスタムフィールドを利用・表示する範囲を指定することができます。

Smart Custom Fieldsの管理画面に用意されたカスタムフィールドの表示条件には以下の4つがあります。

Point 1

投稿

・投稿タイプ別 (投稿・固定ページ・カスタム投稿タイプ)
・投稿 ID (カンマ区切りで複数指定可)

Point 2

プロフィール

ユーザーの権限によって表示条件を設定できます。

・Administrator
・Editor
・Author
・Contributor
・Subscriber

Point 3

タクソノミー

・カテゴリー
・タグ
・カスタムタクソノミー
・リンクカテゴリー

Point 4

オプションページ

カスタムフィールドを管理画面のメニューとして加えることができます。

今回は投稿タイプ『投稿』だけに使用したいので、『表示条件 (投稿)』から投稿タイプの『投稿』にチェックを入れます。

投稿にチェック、公開をクリック

⑧最後に『公開』ボタンを押してカスタムフィールドを作成します。

これでカスタムフィールド『今の気分設定』が追加されました。実際にWordPressから投稿画面を確認し、以下画像のように追加したカスタムフィールドが表示されていればOKです。

下に今の気分設定

もし表示されていなかった場合、表示設定が間違っている可能性がありますので、改めて確認してみましょう。

カスタムフィールドをウェブサイトに表示できるようにする

カスタムフィールドは作成しただけではウェブサイトに表示されません。表示させるにはWordPressのテーマファイルを編集する必要があります。

Smart Custom Fieldsにはカスタムフィールドを呼び出すためのコードが用意されていますので、今回はそれを使用してWordPressのテーマファイルに手を加えます。

該当するテーマファイルを探す

ここがカスタムフィールドを導入する上で初学者がもっとも引っかかるポイントだと思います。自分でテーマを作成しているのであれば投稿ページを構成するテーマファイルの場所はすぐに分かると思いますが、そうでなければ自分で探す必要があります。

WordPrsss標準であればsingle.phpに当たる部分が、投稿タイプ『投稿』を表示するテーマファイルですので、まずはそれを探してみましょう。

『Twenty Seventeen』の場合、single.phpは存在しますが、さらにsingle.phpで読み込まれているcontent.phpを編集しなければ上の画像のような表示位置にできないため、content.phpを編集することになります。

content.phpのあるディレクトリ

content.phpの場所は以下の通りです。

~/wp-content/themes/twentyseventeen/template-parts/post/content.php

テーマファイルを編集する

では実際にテーマファイルを編集してみます。『Twenty Seventeen』の場合は、~/template-parts/post/content.phpの69〜75行目付近にソースコードを記述すれば、上記画像のように表示されます。該当する行のソースコードを抜き出してみます。

content.phpの69〜75行目抜き出し


    <?php
    if ( is_single() ) {
      twentyseventeen_entry_footer();
    }
    ?>
  
  </article><!-- #post-## -->
  

Smart Custom Fieldsの専用コードを使用してカスタムフィールドを表示させるコードは以下となります。


    <?php
    $test_text = SCF::get('test-text');
    ?>
    <p><?php echo '今の気分:' . $test_text; ?></p>
    

SCF::getがSmart Custom Fieldsで作成したカスタムフィールドを呼び出すための記述となります。 書式を簡単に説明すると、$変数 = SCF::get(‘カスタムフィールド名’);という形となり、先ほどWordPressで追加したカスタムフィールドの名前を『カスタムフィールド名』に入れることで、変数にカスタムフィールドを格納することができます。そして4行目でPHPのechoを使用して変数の値を出力しています。

ではcontent.phpに、カスタムフィールドを表示させるコードを追加します。
最終的なコードは以下のようになります。

最終的なコード


      <?php
      if ( is_single() ) {
        twentyseventeen_entry_footer();
      }
      ?>
      <?php
      $test_text = SCF::get('test-text');
      ?>
      <p><?php echo '今の気分:' . $test_text; ?></p>
    
    </article><!-- #post-## -->
    

これでカスタムフィールドを使用する準備が全て完了しました。

実際に使用してみる

WordPress投稿画面を開き、カスタムフィールドを変更して更新してみましょう。 以下画像は、新規でインストールしたWordPressに初めから入っている『Hello World』の投稿でテストしたものです。

①カスタムフィールドの値を変更して、更新をクリックします。

カスタムフィールド値を変更し更新をクリック

②ページにも反映されているのが分かります。

反映されたページ

まとめ

今回は1つのカスタムフィールドを追加する手順に絞って解説させていただきました。使いこなせればWordPrssの投稿を、商品詳細や不動産の物件紹介ページの更新システムにもカスタマイズすることが可能です。次回はそういったより実践的なカスタマイズを記事にしたいと考えておりますのでご期待ください。

この記事を書いた人

SEOタイムズ 編集部

SEO対策実績「20,000社」を超えるGMOソリューションパートナー株式会社がインハウスSEOに取り組む企業様・個人に向けSEO情報を発信。

"Web初心者にもわかりやすく"をコンセプトにSEO対策情報をお届けします。

ランキング

  • 週間
  • 月間
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
3
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
4
AIツールとは?おすすめのAIツール27選をジャンル別にご紹介
2023/05/15 12:00
SEO対策
5
CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」
2021/11/15 13:46
web
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
1
【Illustratorのパターンの作り方】初心者でも簡単!パターンの基本を教えます!
2022/03/25 11:00
web
2
CSSでかっこいいアニメーションを作ろう!~animationの基本~
2022/07/08 18:34
web
#コーディング
3
【GA4】平均エンゲージメント時間とは?定義と滞在時間との違いを徹底解説
2023/02/27 12:00
SEOツール
#アナリティクス
4
CSSの基本!横並びなどフレキシブルに対応する「Flexボックス」
2021/11/15 13:46
web
5
重ね言葉、知らないうちに使っていませんか?
2022/11/22 12:00
web
#ライティング

SEOタイムズとは?

SEOタイムズとは?

SEOタイムズは、Webマーケティングに取り組むWeb担当者向けのSEO対策特化型の情報メディアです。テーマは「SEO開拓者のバイブル」。

"初心者にもわかりやすく"をコンセプトに、SEO対策に関する有益な情報を発信しています。
20,000社以上の幅広い業種の集客支援実績から得られた経験とノウハウをベースに最新の情報をお届けします!

今すぐ出来るSEO対策情報も満載。あなたのWebマーケティング戦略を成功に導きます。