Wordpress

WordPress 一番簡単なカスタムフィールドの作成と表示方法

2014-05-15

コーポレートサイトや企業のブログでは、一般的なブログ（タイトルと本文だけ）と違い、ある程度固定されたフォーマットやコンテンツで各記事ごとに違った値を表示することがあります。

例えばスタッフ紹介などはレイアウトはどのページも同じで、名前や役職欄がスタッフごとに異なります。このような場合にWordpressのデフォルト投稿で実装しようとすると、本文にレイアウト用コードを書き込むなどクライアントさん側で変更するのが難しくなってしまいます。

そこで是非活用したいのが、カスタムフィールド。先ほどのようなスタッフ情報も、本文とは別の入力欄を作ることで投稿ごとに異なった値に対応することができます。

この記事と合わせて以下の記事もおすすめです。
WordPress カスタム投稿の作成と表示方法
 WordPress カスタムタクソノミーの作成と表示方法

WordPressのカスタムフィールド設定方法

WordPressプラグインTypesのインストール

まず最初に、カスタムフィールドを簡単に設定できるTypesというプラグインをインストールします。このプラグインを使うことでカスタムフィールドの他にカスタム投稿やカスタムタクソノミーも作成することができます。

インストール方法は通常のプラグインと同じ。Wordpressの管理画面からプラグインの新規追加を選択し、Typesで検索してプラグインをインストールします。詳細はこちら

Typesでカスタムフィールドを設定する方法

Typesのインストールができたら、次はカスタムフィールドを設定します。Wordpressの管理画面メニューからTypesのCustomFieldsを選択します。

設定画面に移動したらCustom Fieldsグループ追加ボタンを押してカスタムフィールドを作成します。

ここからカスタムフィールドの設定をしていきます。まずはグループ名を設定します。とくにルールはないので分かりやすい名前をつけます。ここではスタッフ情報のフィールドを追加したいと思います。

次はグループの使用条件などを設定します。Typesで作成したカスタムフィールドをどの投稿タイプ、分類、テンプレートで使用するかを選択することができます。ここではカスタム投稿タイプの作成で作ったニュースに追加します。

その下のスタイルエディターではCSSスタイルを設定できます。テンプレート側のCSSでも変更できるのでここは何もしなくて良いでしょう。

最後に必要なフィールドを作成していきます。スタッフ情報を追加したいので、スタッフの顔写真、名前、趣味、メールアドレスを入れてみます。

右にある利用可能なカスタムフィールドから必要なフィールドをクリックして選択し、グループに追加していきます。

では設定していきましょう。まずは画像から。フィールド名は分かりやすい名前を入れます。ここは日本語でOK。次の段にスラグを入力、ここは英語で。その下の詳細は説明文を入れておきます。

その下のラジオボタンのところは複数データを入れる必要があるかどうかを選択します。ここではスタッフの顔写真１枚なので値は１つだけを選択。その下のチェックボックスでは必須項目かどうかを選択できるのでチェックを入れます。

次は名前フィールドを作成します。右のボックスからシングルラインをクリックしてフィールドを作成。先ほどと同じ要領で入力していきます。

次は趣味のフィールドです。ここもテキストなのでシングルラインを選択。趣味は複数あるので複数ラインでも可能ですが、ここではシングルラインで複数インスタンスを許可を選択しました。

最後にメールアドレスの設定です。こちらも同じように設定していきます。メールアドレスはチェックを入れるとバリデーションが可能です。

作成できたら下にある保存ボタンを押して保存します。

WordPressのカスタムフィールドを表示する方法

ここまででWordpressのTypesプラグインを使ってカスタムフィールドを作成できました。ここからはフィールドへの投稿とデータの取得、表示を行います。

カスタムフィールドに投稿する方法

まずはカスタムフィールドに投稿してみます。先ほど作成したグループの条件で、どの投稿タイプにフィールドを追加するかを選択しました。そこで選択した投稿で新規作成を行います。すると、本文の下にカスタムフィールドが追加されています。

今回はタイトルに名前、本文にスタッフの紹介文を入れます。カスタムフィールドも通常の投稿のように画像やテキストを入れていきます。趣味のところは複数ある場合、別の趣味を追加するボタンで必要な分だけ追加できます。

カスタムフィールドのデータを本文から表示する方法

では、投稿した値を本文から表示してみます。

本文の上にあるTアイコンをクリックして表示したいフィールドを選択するとショートコードの挿入パネルが開きます。

ここで必要な設定を行い、ショートコードを挿入を選択すれば、本文にカスタムフィールドの値が表示されます。

しかしこの場合、通常のテキストのように並んで表示されることになり、レイアウトを変更したい場合は本文に直接コードを書くなどしなければなりません。

これではカスタムフィールドを作成した意味がなく、最初から本文のみで作るのと何も変わりません。そこで、テンプレート側であらかじめレイアウトを組んでおき、そこにカスタムフィールドの値を流してみたいと思います。

カスタムフィールドのデータをテンプレートから表示する方法

現在の投稿のカスタムフィールドの値を取得するには、Wordpressのループの中で以下のコードを設置します。

<?php 
  // 現在の投稿のカスタムフィールド情報を全て取得
  $custom_fields = get_post_custom();

  // []内はカスタムフィールドのスラグ、フィールドの値を変数に格納する
  $staff_image = $custom_fields['wpcf-staff_image'];

  $staff_name = $custom_fields['wpcf-staff_name'];

  $staff_hobby = $custom_fields['wpcf-staff_hobby'];

  $staff_mail = $custom_fields['wpcf-staff_mail'];

?>

全てのカスタムフィールド情報を取得した後、各変数に分けています。値は配列になっているので注意して下さい。データを取得できたらあとはいつものようにechoなどを使って出力すればOKです。

趣味のように値が複数設定されている場合はforeachで取得します。テンプレートはWordPress カスタム投稿の作り方で作ったものを使用しました。

single-news.php

<?php get_header(); ?>

<section id="primary" class="site-content">
    <div id="content" role="main">

    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>

        <h1><?php the_title();?></h1>

        <div class="post">

            <?php 
              // 現在の投稿のカスタムフィールド情報を全て取得
              $custom_fields = get_post_custom();

              // []内はカスタムフィールドのスラグ、フィールドの値を変数に格納する
              $staff_image = $custom_fields['wpcf-staff_image'];

              $staff_name = $custom_fields['wpcf-staff_name'];

              $staff_hobby = $custom_fields['wpcf-staff_hobby'];

              $staff_mail = $custom_fields['wpcf-staff_mail'];

            ?>
            <div class="row">
                <div class="col-xs-4">
                    <img src="<?php echo $staff_image[0]; ?>" alt="">
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li><?php echo $staff_name[0]; ?></li>
                        <li><?php echo $staff_mail[0]; ?></li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <? if($staff_hobby) : foreach ( $staff_hobby as $key => $hobby ) :?>

                            <li><?php echo $hobby; ?></li>

                <?php endforeach; endif; ?>
                    </ul>
                </div>
            </div>


            <div class="post_body"><?php the_content(); ?></div>

        </div>

    <?php endwhile; endif; ?>

    </div><!-- #content -->
</section><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

表示してみるとこんな感じ。レイアウトはBootstrapでカラムを作り、CSSで少し修正しています。

今回はBootstrapのカラムを使って簡単にレイアウトしましたが、キチンとデザインすればどのようなレイアウトでも出力することが可能です。

まとめ

この記事ではWordpressのTypesプラグインを使って簡単にカスタムフィールドを設定し、データの表示を行いました。テンプレートからデータを出力することで、自由なレイアウトで投稿画面から簡単に記事の投稿ができます。

Typesではカスタムフィールドの他にカスタム投稿とカスタムタクソノミーも設定することができます。合わせてご覧ください。

WordPress カスタム投稿の作成と表示方法
 WordPress カスタムタクソノミーの作成と表示方法

最後までご覧いただきありがとうございました:)