仕事で使える！WordPressでカスタムフィールドを自作する方法を徹底解説(サンプルコード付き)

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressでカスタムフィールドを自作する方法を徹底解説していきたいと思います。

WordPressでカスタムフィールドを実装するといえば、普通は一般に公開配布されているカスタムフィールドのプラグインを使うのが一般的かと思いますが、自作することも可能です。

当記事では、カスタムフィールドを自作すべき場面やメリット、実装方法などを徹底的に解説いたしますので、よろしければお仕事などにお役立ていただければと思います。

カスタムフィールドとは

カスタムフィールド（メタフィールドとも呼びます）とは、WordPressの投稿ページ（記事ページ）や固定ページなどに独自のデータを追加するための機能のことをいいます。

WordPressでは通常、投稿ページや固定ページには「ページタイトル」「ページ本文」「サムネイル画像」「カテゴリー」「タグ」といった本当に最低限の基本的なデータしか入力できせん。

これだと、例えばもし商品ページなどのように情報が多いページを複数記事ページのように作成しなければいけない時に、「ページタイトル」「ページ本文」だけだと「商品価格」や「商品画像」、「商品説明」などのデータを管理することが難しくなってしまいます。

そこでカスタムフィールドの登場です。
カスタムフィールドを利用することによって、任意のデータ入力枠追加して独自のデータを記事ページや固定ページに追加できるようにできます。

カスタムフィールドには「テキスト」「テキストエリア」「画像」「チェックボックス」「セレクトボックス」「色ボックス」などなど様々なデータ形式で設定することが可能です。

カスタムフィールドをもっと詳しく知りたい方は以下の記事でご確認いただけますので、よろしければご活用ください。

ちなみにカスタムフィールドは以下のデータタイプで実装が可能です。

• 投稿（記事ページ）
• 固定ページ
• ユーザー
• カテゴリー・タグ
• カスタム投稿タイプ
• カスタムタクソノミー
• コメント
• メディア（添付ファイル）
• ウィジェット
• ナビゲーションメニュー

それぞれ実装する内容によって出力する関数などが変わってはきますが（get_post_meta()関数、get_user_meta()関数、get_term_meta()関数など）、いずれも同じカスタムフィールドではあるので、実装方法はどれも似ているので、いずれかの実装方法がわかればほかの項目もイメージがつきやすくなるかと思います。

Web制作におけるカスタムフィールドのおすすめの流儀

Web制作におけるカスタムフィールドのおすすめの流儀について、これまで5年以上WordPressを利用したテーマカスタマイズ（Webサイト制作）をおこなってきた筆者の経験を踏まえて皆さんへ共有したいと思います。

まず結論としては、「基本的にカスタムフィールドを実装するならプラグインを使う」ことをおすすめいたします。

理由は、カスタムフィールドを自作するのは柔軟性や拡張性が高く実装できるのですが、Web制作においてはそこまでするのはオーバースペックすぎるので、無駄に工数がかかってしまいコストが高くなってしまうからです。

また、プラグインを使った方が管理が簡単でかつ非常に効率的であり、メンテナンスなどを考えても安全性を考えてもプラグインの方が適切であり、クライアント側もエンジニア側も双方にメリットがあります。

そのため、カスタムフィールドの実装ではプラグインを導入して実装して管理画面から項目を設定できるなどして、エンジニア開発側ではページに表示する実装のみに工数をかけるようにしましょう。

カスタムフィールドを自作すべき場面

先ほどカスタムフィールドの実装の流儀について解説しましたが、「じゃあどんな時に自作したら良いの？」と疑問に思われた方もいらっしゃるかと思います。

筆者が考える自作で実装すべき場面としては以外が考えられると思います。

• 公開・配布するテーマやプラグインを開発する場合
• 一般のカスタムフィールドプラグインの仕様に縛られたくない場合
• 独自のデータ入力のUIや処理を実装したい場合
• クライアントからカスタマイズの要望があったとき

おすすめする流儀を踏まえた上で、上記の場面があればカスタムフィールドを自作することは非常に有効かと思います。

カスタムフィールドを自作するメリット

ここではカスタムフィールドを自作するメリットについて解説いたします。

メリットを知ることで、いざカスタムフィールドを実装する際に果たして自作で実装すべきかを検討する材料になるかと思います。

筆者が考えるメリットは以下になります。

• 一般のカスタムフィールドプラグインに依存せずに機能を追加できる
• 独自のデータ入力UIを実装できる
• プラグインと違い外部要因（開発終了など）の影響を受けずらい

それぞれの内容からわかると思いますが、ご自身でWordPressのテーマやプラグインを開発するときなどにメリットが大きいかと思います。

カスタムフィールドを自作する実装方法

それでは早速、カスタムフィールドを自作する実装方法について解説いたします。

まずは以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
// カスタムフィールドを追加する関数
function add_custom_meta_box() {
    add_meta_box(
        'custom_meta_box',          // メタボックスのID
        'カスタム情報',               // メタボックスのタイトル
        'custom_meta_box_callback', // コールバック関数
        'post',                     // どの投稿タイプに表示するか
        'normal',                   // メタボックスの位置
        'high'                      // 優先度
    );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

// メタボックス内の内容を表示するコールバック関数
function custom_meta_box_callback($post) {
    // ノンスの生成
    wp_nonce_field('custom_meta_box_nonce_action', 'custom_meta_box_nonce');
    
    // カスタムフィールドの値を取得
    $custom_field_value = get_post_meta($post->ID, '_custom_field_key', true);
    ?>
    <label for="custom_field">カスタムフィールドの値:</label>
    <input type="text" id="custom_field" name="custom_field" value="<?php echo esc_attr($custom_field_value); ?>" />
    <?php
}

// カスタムフィールドを保存する関数
function save_custom_meta_box_data($post_id) {
    // 自動保存を無視
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

    // セキュリティチェック（nonceを利用）
    if (!isset($_POST['custom_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_meta_box_nonce'], 'custom_meta_box_nonce_action')) {
        return;
    }

    // カスタムフィールドの値を保存
    if (isset($_POST['custom_field'])) {
        update_post_meta($post_id, '_custom_field_key', sanitize_text_field($_POST['custom_field']));
    }
}
add_action('save_post', 'save_custom_meta_box_data');

上記コードは、投稿ページの編集画面にテキストフィールドを追加する実装コードになります。

ペーストしていただきましたら、管理画面左メニュー「投稿」から追加済みの記事か新規追加をクリックしていただき、記事ページの編集画面を開いてください。

開いていただくと、下図のように、画面下に「カスタム情報」というタイトルでテキストのカスタムフィールドを追加されていることが確認できるかと思います。

確認できたら、試しにご自身で適当に文字を入力して「下書き保存」か「公開」をクリックしていただくと、保存もできているかと思います。

上記のコードは、WordPressのカスタムメタボックス（カスタムフィールド）を投稿編集画面に追加し、そのデータを保存するための処理を実装しています。

こちらのコードはカスタムフィールドを実装するためのベースとなるコードになりまして、以下の内容で実装する形になります。

• カスタムフィールドの追加
• カスタムメタボックスの編集画面UIの表示
• カスタムフィールドデータの保存
• セキュリティ対策

それぞれ解説いたします。

カスタムフィールドの追加

コード中の独自に定義したadd_custom_meta_box()関数は、カスタムフィールドを投稿編集画面に追加する役割を担います。
add_meta_boxeフックとadd_meta_box()関数を使って、カスタムフィールドのID、タイトル、コールバック関数、表示する投稿タイプなどを設定します。

この例では、カスタムフィールドのタイトルを「カスタム情報」として、投稿（post）に表示されるよう指定しています。また、メタボックスの位置は「normal」に設定され、優先度は「high」です。

これにより、投稿編集画面でカスタムフィールド情報が高い優先度で表示されます。

カスタムメタボックスの編集画面UIの表示

コード中の独自に定義したcustom_meta_box_callback()関数は、add_meta_box()関数のパラメータに指定する関数で、カスタムメタボックスの編集画面UIの表示する役割を担います。
この関数では、カスタムフィールドの値を取得し、ユーザーが編集できるテキストボックスを表示します。

取得するカスタムフィールドの値は、get_post_meta()関数を使って取得され、既に入力されている値があればそれがフォームに表示されます。また、セキュリティを確保するために、wp_nonce_field()関数を使ってnonce（セキュリティトークン）を生成し、フォームが正当なリクエストであることを確認します。

カスタムフィールドデータの保存

save_custom_meta_box_data()関数は、投稿が保存されるときにカスタムフィールドのデータを保存する役割を担います。
この関数はsave_postアクションフックを使って呼び出され、保存される前にいくつかのチェックが行われます。

まず、自動保存を無視するために DOING_AUTOSAVE を確認し、次にnonceが正しいかを確認するために wp_verify_nonce()関数を使います。

最後に、フォームで入力されたデータが正しい場合に、update_post_meta()関数を使ってデータを保存します。また、sanitize_text_field()関数を使ってユーザーが入力したデータを安全な形式に整えています。

セキュリティ対策

カスタムフィールドの保存時にはセキュリティ対策が重要です。

特に、nonceを使用してフォーム送信が正当なものであるか確認し、悪意のあるアクセスからデータを守ります。また、ユーザーが入力したデータに対して sanitize_text_field()関数を使ってサニタイズ（無害化）処理を行うことで、不正なデータが保存されないようにしています。

保存した内容をページに表示する方法

管理画面へ自作のカスタムフィールドを追加したら、つぎはサイトのページ上に保存した内容を表示してみましょう。

まずは下図のように適当に何か文字を保存しておいてください。

保存したら、次は以下のコードをsingle.phpなど記事詳細ページ関連のPHPテンプレートに適当にコピー＆ペーストしてください。

<?php
// 投稿のカスタムフィールドを取得
$custom_field_value = get_post_meta(get_the_ID(), '_custom_field_key', true);

// カスタムフィールドが設定されている場合に表示
if (!empty($custom_field_value)) {
    echo '<p>カスタムフィールドの値： ' . esc_html($custom_field_value) . '</p>';
} else {
    echo '<p>カスタムフィールドは設定されていません。</p>';
}

ペーストしたら、保存した記事ページのURLへアクセスしてみてください。

アクセスすると、下図のようにコードをペーストした位置に保存したテキストが表示されているのが確認できたかと思います。

上図のように、保存したカスタムフィールドの内容を出力するためには、get_post_meta()関数を使用して投稿のカスタムフィールドを取得し、表示することができます。

このように、割と簡単にカスタムフィールドを自作することができます。

自作できるカスタムフィールドのデータ形式

自作できるカスタムフィールドのデータ形式はテキストのみならず、他にも数値や日時、trueかfalseかのブール値、画像（画像ID）など様々なデータ形式で自作することが可能です。

以下に、自作できるデータ形式として表でおまとめいたしましたので、よろしければご活用ください。

ちなみに当記事で掲載したサンプルコードは、カスタムフィールドを安全に追加・保存する方法を提供し、WordPressの投稿編集画面に追加された情報を管理するための基盤を作ります。

ここまででカスタムフィールドを自作する方法の流れの解説は終わりです。お疲れ様でした！

まとめ

今回は、WordPressでカスタムフィールドを自作する方法について徹底的に解説しました。
通常、カスタムフィールドは一般的に公開されているプラグインを使用するのが一般的ですが、場合によっては自作することでより柔軟にカスタマイズが可能です。

この記事では、カスタムフィールドを自作すべき場面やそのメリット、実装方法について詳しく説明しました。自作することによって、特定の要件に応じたフィールドを作成でき、サイトの管理や運用を効率化することができます。

今回の内容が、実際の仕事やプロジェクトに役立つヒントとなれば幸いです。カスタムフィールドの自作を検討されている方は、ぜひ参考にしていただければと思います。