カスタムフィールドのサムネイル

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

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

 

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

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

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

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

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

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

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

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

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

  1. WordPressへログインしてダッシュボード画面へいきます。
  2. 『プラグイン』メニューをマウスオーバーして表示される「新規追加」をクリックします。
  3. 『プラグインを追加』ページが開かれますので、「プラグインの検索」と書かれている入力フォームに『Smart Custom Fields』と入力してキーボードのエンターを押します。
  4. すると一番左端のカラムに『Smart Custom Fields』が出現しますので、『今すぐインストール』をクリックしてWordPress内にプラグインをインストールします。
  5. ボタンの表記が今すぐインストールから『インストール中...』と変わります。インストールが終わるまで待ちます。 インストールが完了したら表記が『有効化』に変わります。
  6. 『有効化』をクリックしてWordPressに『Smart Custom Fields』を適用します。
  7. WordPressのメニューに『Smart Custom Fields』が追加されたら導入完了です。

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

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

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

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

最終的なイメージ図

 

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

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

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

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

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

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

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

    ※名前は半角英数字にハイフン(-)とアンダーバー(_)が使用できます。

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

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

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

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

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

    表示条件の位置

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

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

    1. 『投稿』

      • 投稿タイプ別 (投稿・固定ページ・カスタム投稿タイプ)
      • 投稿 ID (カンマ区切りで複数指定可)
    2. 『プロフィール』

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

      • Administrator
      • Editor
      • Author
      • Contributor
      • Subscriber
    3. 『タクソノミー』

      • カテゴリー
      • タグ
      • カスタムタクソノミー
      • リンクカテゴリー
    4. 『オプションページ』

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

     

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

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

これでカスタムフィールド『今の気分設定』が追加されました。実際に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. カスタムフィールドの値を変更して、更新をクリックします。

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

まとめ

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

すべての人にインターネット
関連サービス