WordPressのユーザーでカスタムフィールドを自作で実装する方法を徹底解説(サンプルコード付き)

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

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

ユーザーとはWordPressに標準で搭載されているいわゆる管理画面にログインするためのアカウント機能になりますが、当記事では、このユーザーに独自のカスタムフィールドをプラグインなしで自作で実装する方法について解説いたします。

WordPressで本格的な会員サイトを作りたいという方にもご活用いただける内容となっておりますので、よろしければぜひ繰り返しお仕事などでお使いいただけましたら幸いです。

ユーザーとは

ユーザーとは、WordPressサイトにアクセス（ログイン）する人に対して、異なる権限や役割を持たせるための仕組みのことを言います。

ユーザーはそれぞれアカウントを持ち、ログインすることで記事の投稿や編集、コメントの管理、サイト全体の設定など、割り当てられた権限に応じた操作を行うことができます。

WordPressには「管理者」「編集者」「投稿者」「寄稿者」「購読者」といった標準的なユーザー権限グループ（ロール）があり、たとえば「管理者」はすべての操作が可能ですが、「購読者」はコメントの投稿やプロフィールの編集といった限定的な操作のみが許可されています。

また、ユーザーごとにプロフィール情報（名前、メールアドレス、自己紹介、SNSリンクなど）を設定できるほか、プラグインやコードを書いてカスタマイズを行えば、独自のカスタムフィールド（役職や所属など）を追加することも可能です。

ちなみに、WordPressでしばしば会員サイト（会員登録サイト・会員制サイト）を作ることがあるかと思いますが、会員サイトとして自作する場合もプラグインで機能を導入する場合も、どちらもこのWordPressに搭載されているユーザーの機能を利用して作ることになります。

つまり、ユーザー機能は、何もWordPress管理画面にログインして作業するだけのためにあるとは限らないということです。

今回の実装の内容は、WordPressで会員サイトを作る際にとても相性の良い実装内容となっておりますので、もしWordPressで会員サイトを作る場合は、当記事とあわせて以下の記事もご一緒にご活用いただけましたらプラグインなしで実装できるかと思います。

当記事の内容は、ブログとしてユーザープロフィールに追加データ項目を増やしたい場合にももちろん有効な実装になりますのでご安心ください。

カスタムフィールドとは

今回はユーザーのカスタムフィールドを実装するという内容になるため、カスタムフィールドについて事前に確認しておきましょう。

カスタムフィールドとは、投稿ページや固定ページ、ユーザー、コメントなどに独自のデータを追加する仕組みのことを言います。

例えば、WordPressでは通常、投稿ページや固定ページにタイトルや本文、カテゴリーなどあらかじめ決まったデータを入力したり設定することができますが、独自に保存できるデータを別で用意したい場合があります。

今回はユーザーのカスタムフィールドになるので、例えば、ユーザーの性別や職業、所有しているSNSアカウントのURL、住所などを新たなデータ項目として実装することが可能です。

当記事で実装する内容のイメージとしては下図のような感じです。

もしカスタムフィールドについてより詳しく知りたい方は、以下の記事をご確認いただけましたら幸いです。

ユーザーのカスタムフィールド実装方法

それでは早速、ユーザーのカスタムフィールドの実装方法を解説いたします。

ここでは実装として以下を行いたいと思います。

• 自分のユーザープロフィール画面にカスタムフィールドを追加
• 他のユーザーのプロフィール画面にカスタムフィールドを追加
• 自分のユーザープロフィールのカスタムフィールドを保存
• 他のユーザーのプロフィールのカスタムフィールドを保存

そして、上記それぞれを実装しているソースコードが以下になります。実装する際は、以下のコードをfunctions.phpにそのままコピー＆ペーストしてください。

<?php
// ユーザープロフィール画面にカスタムフィールドを追加
function add_custom_user_field($user) {
    ?>
    <h3>追加情報</h3>
    <table class="form-table">
        <tr>
            <th><label for="custom_field">カスタムフィールド</label></th>
            <td>
                <input type="text" name="custom_field" id="custom_field" value="<?php echo esc_attr(get_user_meta($user->ID, 'custom_field', true)); ?>" class="regular-text" />
                <p class="description">ここにカスタムデータを入力できます。</p>
            </td>
        </tr>
    </table>
    <?php
}
add_action('show_user_profile', 'add_custom_user_field'); // 自分のプロフィール画面
add_action('edit_user_profile', 'add_custom_user_field'); // 他のユーザーの編集画面

// ユーザープロフィールのカスタムフィールドを保存
function save_custom_user_field($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    update_user_meta($user_id, 'custom_field', sanitize_text_field($_POST['custom_field']));
}
add_action('personal_options_update', 'save_custom_user_field'); // 自分のプロフィール
add_action('edit_user_profile_update', 'save_custom_user_field'); // 他のユーザーの編集

上記コードは、WordPressのユーザープロフィール編集画面に「カスタムフィールド」という入力欄を追加し、その値を保存・表示するものです。

show_user_profileフックとedit_user_profileフックで、自分と他人のプロフィール画面（管理画面）に入力欄を表示し、personal_options_updateフックとedit_user_profile_updateフックで保存処理を行います。入力された値はデータベースに保存され、次回編集時に再表示されます。

ペーストが完了したら、WordPress管理画面左メニュー「ユーザー」→「プロフィール」をご確認ください。

すると、下図のように「カスタムフィールド」という項目名で独自のテキストを入力できるUIが追加されていることを確認できるかと思います。

はい、もうこれでタグにカスタムフィールドを追加することができました。お疲れ様でした！

思ったより簡単だったかと思います。

ちなみに先ほどのコードでは以下の4つのフックを使用しております。

• show_user_profile
• edit_user_profile
• personal_options_update
• edit_user_profile_update

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

show_user_profile

show_user_profileフックは、管理画面の「プロフィール」ページを表示する際に発火します。
自分自身のプロフィール編集画面でカスタムフィールドなどの項目を追加表示したい場合に使います。

edit_user_profile

edit_user_profileフックは、他のユーザーのプロフィールを管理者が編集する画面で発火します。
管理者が閲覧・編集する他のユーザープロフィール画面にカスタム項目を追加する際に使います。

personal_options_update

personal_options_updateフックは、自分自身のプロフィールを保存して更新する際に発火します。
送信されたカスタムフィールドの値などを保存する処理をこのタイミングで実行できます。

edit_user_profile_update

edit_user_profile_updateフックは、管理者が他のユーザーのプロフィールを更新したときに発火します。
他のユーザーのプロフィールに関するカスタムフィールドのデータの保存処理を行うのに使用されます。

追加したカスタムフィールドの表示

追加したカスタムフィールドの表示の実装方法についても解説いたします。

実装において入力と出力はセットになるので、ここでしっかりおさえておきましょう。

ここでは、シンプルに保存したデータを表示する実装方法について解説したいと思います。

以下のコードをご自身のテーマのお好きなPHPテンプレートファイルの表示したい箇所にコピー＆ペーストしてください。

<?php
$user_id = get_current_user_id(); // 現在のユーザーIDを取得
$custom_value = get_user_meta($user_id, 'custom_field', true);
echo "カスタムフィールドの値：" . esc_html($custom_value);

上記コードは、現在ログインしているユーザーのカスタムフィールドの値を取得して表示する処理になります。

まず、get_current_user_id()関数を使って現在ログイン中のユーザーのIDを取得しています。次に、そのIDを元にget_user_meta()関数を使い、ユーザーに登録されている「custom_field」というメタデータ（カスタムフィールド）の値を取得しています。

このとき、第三引数にtrueを指定しているため、単一の値として取得されます。そして最後に、取得した値を esc_html() 関数でエスケープ処理したうえで、「カスタムフィールドの値：」という文字列とともに画面に出力します。

このコードは、WordPressでユーザーごとのカスタム情報を扱いたいときに使える基本的な書き方になりますので、他にユーザーのカスタムフィールドを独自実装している場合も利用できるコードとなっております。

get_current_user_id()関数について詳しく知りたければ以下の記事をご確認ください。

また、get_user_meta()関数について詳しく知りたければ以下の記事をご確認ください。

ユーザーの独自のプロフィール項目の実装方法

次に、ユーザーの独自のプロフィール項目の実装方法について解説いたします。

プロフィール項目とは、以下の「連絡先情報」の部分を指しており、WordPressのデフォルトでは「メール（必須）」と「サイト」の2つがあるかと思いますが、ここにさらに追加でテキストフィールドを追加するイメージになります。

こちらの実装のメリットは、ユーザーの所有するSNSのURLを保存する項目の追加だったり、住所や郵便番号などのメタ情報を違和感ない形で実装することが可能です。

それでは早速実装してみましょう。

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

<?php
// ユーザープロフィールの項目をカスタマイズする関数
function customize_user_profile_fields($fields)
{
    // 新しい項目を追加します
    $fields['twitter'] = 'Twitter';
    $fields['facebook'] = 'Facebook';
    $fields['instagram'] = 'Instagram';
    $fields['linkedin'] = 'LinkedIn';
    $fields['youtube'] = 'YouTube';
    $fields['github'] = 'GitHub';
    $fields['note'] = 'Note';
    $fields['position'] = '役職';

    // 更新した項目を返します
    return $fields;
}
// user_contactmethods フィルターを使用してユーザープロフィールの項目をカスタマイズします
add_filter('user_contactmethods', 'customize_user_profile_fields', 10, 1);

上記コードは、WordPressのユーザープロフィール画面に表示される「連絡先情報」欄に、TwitterやInstagramなどのSNS項目や役職（position）を追加するコードになります。

user_contactmethodsフックを使い、フックする関数内で加工した配列を返すことで、表示される入力欄を自由にカスタマイズしています。

ペーストが完了したら、WordPress管理画面左メニュー「ユーザー」→「プロフィール」をご確認ください。

すると、下図のように配列で追加した内容で独自のテキストを入力できるUIが追加されていることを確認できるかと思います。

これで実装は完了です。お疲れ様でした！

先ほど解説した通常のカスタムフィールドの実装と、こちらのプロフィール項目の実装の2つをうまく使い分けていただいて、運営者が使いやすい形で実装いただけましたら幸いです。

ちなみに先ほどのコードではuser_contactmethodsフックを使用しております。フックについて知っておくと何かとメリットがあるためuser_contactmethodsについて解説いたします。

user_contactmethods

user_contactmethodsフックは、ユーザープロフィール画面に表示される「連絡先情報」欄をカスタマイズするためのフィルターフックになります。

フックする関数内で任意の項目を追加して加工した配列を返すことで、表示される入力欄を自由にカスタマイズすることが可能です。

ユーザーの独自のプロフィール項目の表示

プロフィール項目の保存処理の実装ができたら、次は表示の実装方法について解説いたします。

以下のコードをauthor.phpもしくはその他のheader.phpやsidebar.phpなどのPHPテンプレートファイルにコピー＆ペーストしてください。

<?php
// 現在のページのユーザーIDを取得
$author_id = get_queried_object_id();

// ユーザーIDが取得できない場合は、ログイン中のユーザーを使用
if (!$author_id) {
    $author_id = get_current_user_id();
}

// ユーザー情報を取得
$position  = get_the_author_meta('position', $author_id);
$twitter   = get_the_author_meta('twitter', $author_id);
$facebook  = get_the_author_meta('facebook', $author_id);
$instagram = get_the_author_meta('instagram', $author_id);
$linkedin  = get_the_author_meta('linkedin', $author_id);
$youtube   = get_the_author_meta('youtube', $author_id);
$github    = get_the_author_meta('github', $author_id);
$note      = get_the_author_meta('note', $author_id);

// 出力（値がある場合のみ）
echo '<div class="author-profile">';
if ($position) {
    echo "<p><b>役職:</b> " . esc_html($position) . "</p>";
}
if ($twitter) {
    echo '<p><b>Twitter:</b> <a href="' . esc_url($twitter) . '" target="_blank">' . esc_html($twitter) . '</a></p>';
}
if ($facebook) {
    echo '<p><b>Facebook:</b> <a href="' . esc_url($facebook) . '" target="_blank">' . esc_html($facebook) . '</a></p>';
}
if ($instagram) {
    echo '<p><b>Instagram:</b> <a href="' . esc_url($instagram) . '" target="_blank">' . esc_html($instagram) . '</a></p>';
}
if ($linkedin) {
    echo '<p><b>LinkedIn:</b> <a href="' . esc_url($linkedin) . '" target="_blank">' . esc_html($linkedin) . '</a></p>';
}
if ($youtube) {
    echo '<p><b>YouTube:</b> <a href="' . esc_url($youtube) . '" target="_blank">' . esc_html($youtube) . '</a></p>';
}
if ($github) {
    echo '<p><b>GitHub:</b> <a href="' . esc_url($github) . '" target="_blank">' . esc_html($github) . '</a></p>';
}
if ($note) {
    echo '<p><b>Note:</b> <a href="' . esc_url($note) . '" target="_blank">' . esc_html($note) . '</a></p>';
}
echo '</div>';

上記コードは、WordPressでユーザーのプロフィール情報を取得し、画面に表示するためのコードです。

まず、現在のページが著者ページであれば、そのユーザーのIDを取得します。もし著者ページではなく、ユーザーIDが取得できない場合には、代わりに現在ログインしているユーザーのIDを使います。

次に、そのユーザーIDを使って、WordPressに保存されているカスタムプロフィール情報（今回実装した「役職」「Twitter」「Facebook」「Instagram」「LinkedIn」「YouTube」「GitHub」「note」など）を取得します。

それぞれの情報について、値が存在していればHTMLの段落要素として出力します。たとえばTwitterのURLが登録されていれば、「Twitter: [リンク]」という形式で表示されます。すべての出力は、セキュリティ上の理由から適切にエスケープ処理されています。

このようにして、ユーザーごとのSNSアカウントや役職などの情報を動的に表示できるようになっています。WordPressテーマやプロフィール表示ページなどで活用することができます。

もしget_queried_object_id()関数について詳しく知りたければ以下をご確認ください。

また、get_the_author_meta()関数について詳しく知りたければ以下をご確認ください。

まとめ

今回は、WordPressのユーザーに対してカスタムフィールドを自作で追加する方法について、プラグインを使わずに実装する手順を詳しく解説しました。

ユーザー機能は、WordPressに標準で搭載されているログインアカウント管理の仕組みですが、独自のカスタムフィールドを追加することで、ユーザーごとの情報管理の幅が大きく広がります。

当記事の内容は、会員サイトの構築やユーザープロフィールの拡張など、実務でも活用できる場面が多いため、ぜひ繰り返し参照しながらご活用いただければ幸いです。