Advance Custom Fieldsでカスタムフィールドを作成する手順を解説

カスタムフィールドは入力項目を追加できる機能です。記事を書く際にはタイトルと本文を入力するだけで十分です。

ただ商品の価格や特徴などを載せたページを作る際には、カスタムフィールドを使ったほうが情報の編集や管理がしやすくなります。今回はWordPressでカスタムフィールドを作成する方法を解説します。

カスタムフィールドの作成方法

カスタムフィールドはプラグインの「Advance Custom Fields」で簡単に作成できます。有効インストール数は200万以上と評判の高いプラグインです。今回はこの「Advance Custom Fields」を使ったカスタムフィールドの作成方法を解説します。

「Advance Custom Fields」をインストールして有効化する

まずは「プラグイン」の「新規追加」のページから、「Advance Custom Fields」をインストールして有効化させましょう。

有効化すると左側に「カスタムフィールド」が表示されます。

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

フィールドグループとはカスタムフィールドの集合体のようなものです。今回は飲食店のメニューの詳細ページを作成するにあたって、「写真」「価格」「カロリー」「特徴」の項目を作成していきます。

フィールドグループを作成するには、「カスタムフィールド」の「新規追加」をクリックしましょう。

「新規追加」をクリックすると、フィールドグループの作成画面に移ります。まずは次の画像のようにフィールドグループのタイトルを記入しましょう。今回はメニューの詳細ページを作成するので「メニューの詳細」と記入しました。

「このフィールドグループを表示する条件」では、どの編集ページでフィールドグループを表示するかの設定になります。

今回はカスタム投稿の「メニュー」の投稿ページで、カスタムフィールドグループを表示させたいので、「投稿タイプ」「等しい」「メニュー」で設定しています。

その他の設定画面ではデフォルトのままで特に問題はありません。何か調整したいときには設定してみてください。

カスタムフィールドの設定する

上記のようにカスタムフィールドを作成した後は、カスタムフィールドの設定をしていきましょう。まずは「フィールドを追加」をタップしましょう。

「フィールド」を追加をクリックすると、次のような画面が表示されます。このページにて「写真」「価格」「カロリー」「特徴」「予約」の5項目を作成していきます。

以下の画面はこのうちの「価格」のフィールドを作成している画面になります。

「フィールドラベル」は編集する際に表示される表記です。フィールド名は後にPHPコードから参照されるものなので、半角英数字で記載するのをおすすめします。

「フィールドタイプ」は入力する情報の種類を設定できます。「フィールドタイプ」の種類は次の画像のように多種多様にあります。

今回は「写真」「価格」「カロリー」「特徴」の4つを作成していますが、それぞれ次のようにフィールドタイプを設定しています。

・「写真(メニューの画像)」→「画像」

・「価格」→「テキスト」

・「カロリー」→「テキスト」

・「特徴」→「テキスト」

設定が終わったら「更新」をクリックしましょう。

「更新」をクリックしたら、カスタムフィールドを設定した投稿タイプのページを開いてみましょう。設定し終わったら、次の写真のように入力項目が表示されているはずです。

カスタムフィールドを表示する

カスタムフィールドの設定が完了したら、次はページにカスタムフィールドを表示させましょう。カスタムフィールドは専用の関数を使うと表示できます。

今回は写真とテキストを表示させる専用の関数を使います。写真とテキストを表示させたい箇所に記載しましょう。

写真を表示させる関数は次のとおりです。

 <?php
                    $pic = get_field('pic');
                    $pic_url = $pic['url'];
                    ?>
                    <img src="<?php echo $pic_url; ?>" alt="">

テキストを表示する関数は次のとおりです。

<?php the_field('price'); ?>

上記の関数には「price」と記載されていますが、これは先ほど設定したフィールド名になります。priceと表示されているので、価格のカスタムフィールドが表示されます。

次のコードは、上記の関数を使って編集したテンプレートファイルのコードです。参考にしてみてください。

<?php get_header(); ?>
<section class="mainvisual_menu">
    <h2 class="menu_title_2">メニュー紹介</h2>
</section>
<div class="menu-container">
    <div class="menu-box">
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <h1 class="menu-title"><?php the_title(); ?></h1>
                <div class="category-meta">
                    <div class="category"><?php the_category(); ?></div>
                    <time class="blog-meta" deta-time="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
                </div>
                <div class="menu-image">
                    <?php
                    $pic = get_field('pic');
                    $pic_url = $pic['url'];
                    ?>
                    <img src="<?php echo $pic_url; ?>" alt="">
                </div>
                <ul class="menu-content">
                    <li>
                        <div class="menu_price">価格</div>
                        <div class="menu_price_text"><?php the_field('price'); ?></div>
                    </li>
                    <li>
                        <div class="menu_cal">カロリー</div>
                        <div class="menu_cal_text"><?php the_field('kcal'); ?></div>
                    </li>
                    <li>
                        <div class="menu_feature">特徴</div>
                        <div class="menu_feature_text"><?php the_field('feature'); ?></div>
                    </li>
                </ul>
            <?php endwhile; ?>
        <?php endif; ?>
        <div class="menu-link">
            <div class="prev">前の記事：<?php previous_post_link(); ?></div>
            <div class="next">次の記事：<?php next_post_link(); ?></div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

CSSのコードは次のとおりです。

.menu-container {
  width          : 90%;
  margin         : 0 auto;
  display        : flex;
  justify-content: space-between;
 
  .menu-box {
    width: 100%;
 
    .menu-title {
      text-align: center;
      margin-top: 40px;
    }
 
    .category-meta {
      display        : flex;
      justify-content: space-between;
      flex-wrap      : wrap;
      margin-top     : 30px;
 
      .category {
        font-size: 14px;
 
        ul {
          display        : flex;
          justify-content: flex-start;
          flex           : wrap;
          margin-bottom  : 10px;
 
          li {
            margin-left: 5px;
            list-style : none;
 
            a {
              text-decoration: none;
              color          : #2b398a;
              border         : solid 1px #2b398a;
              padding        : 5px 10px;
              font-weight    : bold;
            }
          }
        }
      }
 
      .blog-meta {}
    }
 
    .menu-image {
      width     : 700px;
      height    : 500px;
      margin    : 0 auto;
      margin-top: 5px;
 
      img {
        width : 100%;
        height: 500px;
 
      }
    }
 
    .menu-content {
 
      width     : 600px;
      margin    : 0 auto;
      margin-top: 40px;
 
 
      li {
        width        : 600px;
        margin-top   : 20px;
        list-style   : none;
        display      : flex;
        border-bottom: 2px solid #080808;
 
        .menu_price {
          font-weight: bold;
          width      : 100px;
        }
 
        .menu_price_text {}
 
        .menu_cal {
          font-weight: bold;
          width      : 100px;
        }
 
        .menu_cal_text {}
 
        .menu_feature {
          font-weight: bold;
          width      : 100px;
        }
 
        .menu_feature_text {}
 
 
      }
    }
 
    .menu-link {
      display        : flex;
      justify-content: space-between;
      flex-wrap      : wrap;
      margin-top     : 30px;
      border-top     : solid 2px #ebebeb;
      padding-top    : 10px;
 
      .prev {
        a {
          text-decoration: none;
          color          : #000000;
        }
      }
 
      .next {
        a {
          text-decoration: none;
          color          : #000000;
        }
      }
    }
 
  }
}

上記のコードを使うと、以下のような表示になります。