



WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc




WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
ペン博士!WordPressでプロフィール登録機能を作りたいのですが、プラグインなしだとどうすればいいのか分かりません…。
要件に合わせて柔軟に作り込みたいならコードで独自に実装するのが一番じゃ。仕組みを理解すれば、サイトのテーマに合ったプロフィール登録機能を作成できるぞ!
そうなんですね!よろしくお願いします!
「WordPressでプロフィール登録機能を作りたいけれど、プラグインでは思うようにカスタマイズできない……」そんな悩みはありませんか?
この記事では、コードを用いて独自のプロフィール機能を実装する方法を紹介します。
登録フォームの作成から保存処理、プロフィールを表示する仕組みまでを順を追って解説します。
「学習→案件獲得」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。
吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。
詳しくはこちらの記事をご覧ください。
吉池さんの主な制作実績はこちら
会員制サイトを運営する場合、ユーザー自身がプロフィールを編集し、他のユーザー情報を閲覧できる仕組みが必要です。
WordPressには管理画面でユーザー情報を編集する機能があります。
しかし、フロント側には一般ユーザー向けの登録や編集UIがありません。
そのため要件に応じて、プラグインを導入するか独自に実装するかを検討する必要があります。
プラグインは導入が簡単で、初心者でも使いやすい方法です。ただし「初回登録でポイントを付与する」「入力内容で公開範囲を切り替える」といった細かな要件には対応が難しい場合があり、不便に感じることも少なくありません。
一方で独自実装であれば、サイトの目的に合わせて処理を設計できます。
運用の柔軟性や拡張性も高められるのが独自実装の最大のメリットじゃ!
ここでは、プロフィール登録機能を実装するメリットを具体的に紹介するぞ!
デフォルトのユーザー情報だけでは不足する場合があります。
独自実装であれば、「性別」「年代」「自己紹介」など、サイトに合わせて自由に項目を追加することが可能です。
例えばコミュニティサイトでは、趣味や居住地を登録できるようにすると、ユーザー同士のつながりが生まれやすくなります。
「メルマガ配信のON/OFF」や「コメント通知の受信有無」といった細かな設定も、ユーザーごとに設定可能です。
一人ひとりに合わせた利用スタイルを実現できるため、サービスの満足度向上につながります。
管理者・スタッフ・一般ユーザーといった権限ごとに、入力フォームを切り替えることが可能です。
スタッフには内部情報を登録させ、一般ユーザーには公開プロフィールだけを入力させるといった運用も行えます。
プロフィール情報をもとに検索やソートが可能です。
「男性のみ表示」「登録項目が多いユーザーを優先表示」など条件を付ければ、必要な情報をすぐに探せます。
登録データを集計すれば、サイト運営の分析に役立ちます。
「年代ごとの平均コメント数」「男女別の参加率」といった数値を取得でき、施策改善の材料となります。
ここでは、プロフィール登録機能を実装する方法を具体的に3つのステップに分けて解説するぞ!
プロフィール登録機能の最初のステップは、ユーザーが情報を入力・編集できる登録フォームを作成することです。
単なる入力欄ではなく、既存データの読み込みやセキュリティ対策も組み込む必要があります。
<?php
// ユーザーの既存プロフィールを取得
$uid = get_current_user_id();
$nickname = get_user_meta( $uid, 'nickname', true );
$user_profile = get_user_meta( $uid, 'profile', true );
?>
<?php if ( is_user_logged_in() ) : ?>
<form method="post" class="upf-form"
action="<?php echo esc_url( get_permalink() ); ?>"><!-- POST先を明示 -->
<label for="upf_nickname">表示名(15文字以内)</label>
<input id="upf_nickname" name="upf_nickname" type="text"
value="<?php echo esc_attr( $nickname ); ?>"
maxlength="15" placeholder="例:佐藤太郎" required />
<label for="upf_profile">自己紹介(1500文字以内)</label>
<textarea id="upf_profile" name="upf_profile"
maxlength="1500" rows="8"
placeholder="自己紹介を入力してください(1500文字まで)" required><?php
echo esc_textarea( $user_profile );
?></textarea>
<input type="hidden" name="action" value="upf_profile_save" />
<?php wp_nonce_field( 'upf_profile_save', 'upf_nonce' ); ?>
<button type="submit" class="upf-btn">保存する</button>
</form>
<?php endif; ?>
フォームから送信されたデータは、そのまま保存せず、必ずサーバー側で検証する必要があります。安全性を確保するための具体的な手順は次のとおりです。
以下は具体的なコード例です。
<?php
add_action( 'wp', function () {
if ( isset( $_POST['action'] ) && $_POST['action'] === 'upf_profile_save' ) {
upf_profile_save();
}
} );
function upf_profile_save() {
// CSRF
if ( ! isset( $_POST['upf_nonce'] ) || ! wp_verify_nonce( $_POST['upf_nonce'], 'upf_profile_save' ) ) {
return false;
}
// 入力取得+サニタイズ
$nickname = isset( $_POST['upf_nickname'] ) ? sanitize_text_field( wp_unslash( $_POST['upf_nickname'] ) ) : '';
$user_profile = isset( $_POST['upf_profile'] ) ? sanitize_textarea_field( wp_unslash( $_POST['upf_profile'] ) ) : '';
// 必須・長さチェック(20 / 2000)
if ( $nickname === '' || $user_profile === '' ) { return false; }
if ( ( function_exists('mb_strlen') ? mb_strlen( $nickname ) : strlen( $nickname ) ) > 20 ) { return false; }
if ( ( function_exists('mb_strlen') ? mb_strlen( $user_profile ) : strlen( $user_profile ) ) > 2000 ) { return false; }
// 権限
$uid = get_current_user_id();
if ( ! $uid || ! current_user_can( 'read' ) ) { return false; }
// 保存(meta_keyは据え置き)
$res = wp_update_user( array(
'ID' => $uid,
'meta_input' => array(
'nickname' => $nickname,
'profile' => $user_profile,
),
) );
if ( is_wp_error( $res ) ) { return false; }
// 二重送信防止
if ( ! headers_sent() ) {
wp_safe_redirect( add_query_arg( 'updated', '1', wp_get_referer() ?: home_url() ) );
exit;
}
return true;
}
最後に、保存されたプロフィールをサイト上に表示するページを作成します。WordPress には著者ページ(/author/ユーザー名)が標準で用意されているため、「author.php」 に処理を追加する方法が最も簡単です。著者ページを利用するメリットは、ユーザーごとに自動でURLが割り当てられる点にあります。
<?php
// 表示中のユーザーIDを取得
$view_user_id = get_queried_object_id();
$nickname = esc_html( get_user_meta( $view_user_id, 'nickname', true ) );
$user_profile = esc_html( get_user_meta( $view_user_id, 'profile', true ) );
?>
<section class="upf-profile-view">
<h2>ニックネーム</h2>
<p><?php echo $nickname; ?></p>
<h2>自己紹介</h2>
<p><?php echo nl2br( $user_profile ); ?></p>
</section>
これで、ユーザーが登録したプロフィールを閲覧できるページが完成します。
会員制サイトでは、ここから「検索」「並び替え」「権限ごとの表示分岐」などを追加すると便利です。
ペン博士、WordPressでプロフィール登録機能を実装する方法が理解できました!フォームを用意して保存処理まで流れを組み立てればいいんですね!
うむ、その通りじゃ!セキュリティや入力チェックもしっかり考慮すれば、安心して使えるプロフィール登録機能を作成できるぞ!
ありがとうございます!この学びを今後のWebサイト制作に役立てます!
本記事では、WordPressでプロフィール登録機能をコードで実装する方法を解説しました。
実装の流れとポイントを以下にまとめます。
・プロフィール登録フォームを作成し、既存データを初期値として表示する
・登録処理では、トークンの検証・必須項目や文字数のチェック・ユーザー権限の確認を行ったうえで保存する
・表示ページでは、取得したデータを整形して見やすく出力する
これらを理解して活用すれば、プラグインに頼らず柔軟にプロフィール機能を構築できます。
その結果、会員制サイトの利便性が高まり、ユーザー満足度の向上にもつながるでしょう。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!
公式サイト より
今すぐ
無料カウンセリング
を予約!