【wordpress】自作のユーザー登録フォームにプロフィール画像を設定する方法

今回の内容もwordpressについてです。

プラグインなしで作った自作フォームでユーザー登録をする時に、画像も一緒に登録できるようにする仕組みについて解説していきます。

現在僕はwordpressを使ってSNS的なマッチングアプリを作ろうとしていますので、そのために必要な仕組みを少しずつ作っています。

ユーザー登録はWebアプリを作るなら必須だし、肝心要な重要部分といっても良いでしょう。

これができると作れるものの幅が広がった気がしますね。

ユーザー登録と画像登録については以前記事にしましたので、そちらの内容をそのまま流用しています。

wp_insert_userを使ってユーザー登録フォームを自作してみよう！【wordpressカスタマイズ】

【wordpressカスタマイズ】media_handle_upload()を使って画像投稿する自作フォームの作り方

参考テーマも作成しましたので、興味がありましたらどうぞ。

[business_backbone]

ユーザーのフィールドに画像のIDを登録

update_user_metaでユーザーメタデータを保存できます。

登録でいうところのカスタムフィールドですね。

wordpressの管理画面にあるユーザープロフィールからユーザーメタを更新しようとすると、ひと工夫必要ですが、update_user_metaで更新する分には必要ありません。

そのまま値を入れてしまってOKです。

また別の機会ににユーザープロフィールから画像登録をする仕組みについても解説して行きたいと思います。

wp_insert_userで新規ユーザーを登録し、画像ファイルをメディアに登録し、両方の戻り値であるユーザIDと画像IDと使って、update_user_metaで保存します。

今回の関数で登録できる値は5つ。

• ログイン名
• パスワード
• メールアドレス
• プロフィール情報
• 画像

public function set_insert_user()
{
   //postデータのチェック
   if (!empty($_POST['login_name'])
   && !empty($_POST['user_pass'])
   && !empty($_POST['user_email'])
   && !empty($_POST['user_description'])
   && wp_verify_nonce($_REQUEST['_wpnonce'], 'add-user-nonce')
   ) {
       $userdata = array(
           'user_login' => $_POST['login_name'],
           'user_pass' => $_POST['user_pass'],
           'user_email' => $_POST['user_email']
       );
       $user_id = wp_insert_user($userdata);
       if ($user_id) {

　　　　　　　//画像登録の関数
           $this->set_attachment();

　　　　　　　//プロフィール情報と画像の登録
           update_user_meta($user_id, 'description', $_POST['user_description']);
           if ($this->attachment_id) {
               update_user_meta($user_id, 'user_img_id', $this->attachment_id);
           }

           //成功したらリダイレクト
           session_destroy();
           wp_redirect(home_url());
           exit;
       }
   } else {
       $_SESSION['user_error'] = true;
   }
}

//画像
public function set_attachment()
{
   if (!empty($_FILES['my_image_upload'])) {
       require_once(ABSPATH . 'wp-admin/includes/image.php');
       require_once(ABSPATH . 'wp-admin/includes/file.php');
       require_once(ABSPATH . 'wp-admin/includes/media.php');
       $this->attachment_id = media_handle_upload('my_image_upload', 0);
       if (is_wp_error($this->attachment_id)) {
           $this->attachment_id = false;
       }
   }
}

ユーザー一覧を出力

ユーザー一覧はget_userで出力できます。

例によってブートストラアプで整えた出力がこちら。

get_the_author_metaでユーザーメタを取得できます。

//ユーザー一覧
public function the_user_list()
{
   print '<div class="card-columns">';
   $args = array(
       'role' => 'subscriber',
   );
   $users = get_users($args);
   foreach ($users as $v) {
       $desc = nl2br(get_the_author_meta('description', $v->data->ID));
       $user_img_id = get_the_author_meta('user_img_id', $v->data->ID);
       $img = wp_get_attachment_image($user_img_id, 'midium', false, array('class' => 'w-100 h-auto'));

       print <<< EOT
       <div class="card">
           {$img}
           <div class="card-body">
               <p class="card-title h4">{$v->data->display_name}</p>
               <div class="card-text">{$desc}</div>
           </div>
       </div>
EOT;
   }
   unset($v);
   print '</div>';
}

ここまでの内容をテーマにまとめましたので、よかったらどうぞ。

ユーザー登録はこれでできましたが、一つ問題があります。

wordpressのユーザー登録にはメール認証機能がついいません。

存在しないメールアドレスだとしても自由に登録できてしまうわけですね。

次回は、ここの問題を解決するためにメールでアクティベーションできるような機能を作っていきたいと思います。