WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

WordPlessでプロフィール登録機能を実装する方法 |すぐに使えるコード例も徹底解説!

生徒

ペン博士!WordPressでプロフィール登録機能を作りたいのですが、プラグインなしだとどうすればいいのか分かりません…。

ペン博士

要件に合わせて柔軟に作り込みたいならコードで独自に実装するのが一番じゃ。仕組みを理解すれば、サイトのテーマに合ったプロフィール登録機能を作成できるぞ!

生徒

そうなんですね!よろしくお願いします!

「WordPressでプロフィール登録機能を作りたいけれど、プラグインでは思うようにカスタマイズできない……」そんな悩みはありませんか?
この記事では、コードを用いて独自のプロフィール機能を実装する方法を紹介します。
登録フォームの作成から保存処理、プロフィールを表示する仕組みまでを順を追って解説します。

「学習→案件獲得」につなげた受講生のリアルな体験談も公開中!
働き方を変えたい方にも響くストーリーです。

吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。

詳しくはこちらの記事をご覧ください。

あわせて読みたい
【転職希望者必見】受託開発の会社に内定!フルスタックエンジニアとして更なる高みを目指し挑戦中! ペン博士!今回はどんな方がインタビューに応じてくださったんですか? うむ。今回は受託開発の会社に内定をもらった方じゃぞ!しかもフルスタックエンジニアとしての採...

吉池さんの主な制作実績はこちら

目次

WordPressでプロフィール登録機能を実装する重要性

会員制サイトを運営する場合、ユーザー自身がプロフィールを編集し、他のユーザー情報を閲覧できる仕組みが必要です。

WordPressには管理画面でユーザー情報を編集する機能があります。
しかし、フロント側には一般ユーザー向けの登録や編集UIがありません。

そのため要件に応じて、プラグインを導入するか独自に実装するかを検討する必要があります。

プラグインは導入が簡単で、初心者でも使いやすい方法です。ただし「初回登録でポイントを付与する」「入力内容で公開範囲を切り替える」といった細かな要件には対応が難しい場合があり、不便に感じることも少なくありません。

一方で独自実装であれば、サイトの目的に合わせて処理を設計できます。

ペン博士

運用の柔軟性や拡張性も高められるのが独自実装の最大のメリットじゃ!

プロフィール登録機能を実装するメリット

ペン博士

ここでは、プロフィール登録機能を実装するメリットを具体的に紹介するぞ!

プロフィール項目を自由に設計できる

デフォルトのユーザー情報だけでは不足する場合があります。
独自実装であれば、「性別」「年代」「自己紹介」など、サイトに合わせて自由に項目を追加することが可能です。
例えばコミュニティサイトでは、趣味や居住地を登録できるようにすると、ユーザー同士のつながりが生まれやすくなります。

ユーザー単位で利用設定を管理できる

「メルマガ配信のON/OFF」や「コメント通知の受信有無」といった細かな設定も、ユーザーごとに設定可能です。
一人ひとりに合わせた利用スタイルを実現できるため、サービスの満足度向上につながります。

権限に応じたフォームに切り替えられる

管理者・スタッフ・一般ユーザーといった権限ごとに、入力フォームを切り替えることが可能です。
スタッフには内部情報を登録させ、一般ユーザーには公開プロフィールだけを入力させるといった運用も行えます。

検索・並び替え機能を柔軟に組み込める

プロフィール情報をもとに検索やソートが可能です。
「男性のみ表示」「登録項目が多いユーザーを優先表示」など条件を付ければ、必要な情報をすぐに探せます。

様々なデータ集計が可能

登録データを集計すれば、サイト運営の分析に役立ちます。
「年代ごとの平均コメント数」「男女別の参加率」といった数値を取得でき、施策改善の材料となります。

プロフィール登録機能を実装する方法

ペン博士

ここでは、プロフィール登録機能を実装する方法を具体的に3つのステップに分けて解説するぞ!

①プロフィール登録フォームの作成

プロフィール登録機能の最初のステップは、ユーザーが情報を入力・編集できる登録フォームを作成することです。
単なる入力欄ではなく、既存データの読み込みやセキュリティ対策も組み込む必要があります。

  • 既存データの読み込み
    すでに登録済みのプロフィールがあれば、初期値として反映して編集しやすくします。
  • XSS対策
    XSS(クロスサイトスクリプティング)は、ユーザーが入力した内容に悪意あるスクリプトを仕込む攻撃です。
    例えば 「”><script>~</script> 」のような値を入力されると、ブラウザ上で不正に実行されてしまいます。
    これを防ぐために「esc_attr()」 や 「esc_textarea()」 を使って入力値をエスケープします。
  • CSRF対策
    CSRF(クロスサイトリクエストフォージェリ)は、ユーザーが意図しないリクエストを送らされる攻撃です。
    これを防ぐために wp_nonce_field() をフォームに仕込み、送信時には wp_verify_nonce() で正規フォームからの送信かどうかを確認します。
<?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; ?>

②登録処理

フォームから送信されたデータは、そのまま保存せず、必ずサーバー側で検証する必要があります。安全性を確保するための具体的な手順は次のとおりです。

  • nonce(トークン)の検証
    「wp_verify_nonce()」を使って正規のフォームから送信されたものか確認し、CSRF攻撃を防止します。
  • 必須項目のチェック
    ニックネームと自己紹介が空でないかを確認します。
    また、ニックネームや自己紹介文が制限文字数を守っているかチェックします。
  • 権限のチェック
    現在のユーザーがログイン済みかつ read 権限を持つユーザーであることを確認します。これにより、不正アクセスを防ぐことができます。
  • データ更新
    上記の検証をすべて通過した場合のみ、「wp_update_user()」 関数でプロフィール情報を更新します。
    この処理はテーマの 「functions.php」 に記述するのが一般的です。

以下は具体的なコード例です。

<?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が割り当てられる点にあります。

  • データの取得
    「get_user_meta()」 でニックネームと自己紹介を取得します。
  • 表示時の処理
    「esc_html()」 でエスケープしつつ 「nl2br()」 を使うことで改行を保持して表示します。
<?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でプロフィール登録機能をコードで実装する方法を解説しました。
実装の流れとポイントを以下にまとめます。

・プロフィール登録フォームを作成し、既存データを初期値として表示する
・登録処理では、トークンの検証・必須項目や文字数のチェック・ユーザー権限の確認を行ったうえで保存する
・表示ページでは、取得したデータを整形して見やすく出力する

これらを理解して活用すれば、プラグインに頼らず柔軟にプロフィール機能を構築できます。
その結果、会員制サイトの利便性が高まり、ユーザー満足度の向上にもつながるでしょう。

WithCodeを体験できる初級コース公開中!

初級コース(¥49,800)が完全無料に!

  • 期間:1週間
  • 学習内容:
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか?

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください!

この記事を書いた人

WithCode(ウィズコード)は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう!

    詳細はこちら
  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう!

    詳細はこちら
  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう!

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
予約!

目次