Wordpress プロフィール編集画面にテキストフィールドを追加して見出しの設定（文字サイズ設定）もできるようにしたい

Question

Wordpress プロフィール編集画面に見出しが設定できるテキストフィールドを追加したい

表題の通り、wordpressのユーザー登録画面に、投稿ページのようなプローフィールの内容に見出しが設定できるツールバー付きのテキストフィールドを追加したいと考えており方法を探しております。記事の量は多くなっても問題内容にしたいです。参考画像を添付します。
自分でも探しましたが、functions.phpに書いて項目を増やす方法ではやり方が見つからず、Cimy User Extra Fieldsというプラグインがあることはわかりましたが最近はアップデートされていないようで使うのを躊躇しております。

WordPress 5.5.3に実装予定です。
自分の知識では方法が思い付かないためご存知の方、どうぞよろしくお願い致します。

Answer 1

edit_user_profileのフィルタフックでwp_editorを使ってユーザープロファイルページにtinymceの入力項目を追加
profile_updateで送信された値を受け取ってupdate_user_meta

//入力項目をプロフィール画面に追加
//自分のプロフィール・他人のプロフィールの両方で走るようにフックを分岐する
add_action(($GLOBALS['pagenow']==='profile.php'?'show':'edit').'_user_profile',function($user){
	//user_metaは$userオブジェクトのプロパティとして取得できるようになっている
	//user_metaにはhtmlがエスケープされて入っているのでデコードしてからwp_editorに渡す
	wp_editor(html_entity_decode($user->profile_html??''),'profile_html');
});
//プロフィール更新時にuser_metaを更新
add_action('profile_update',function($user_id){
	//複数回profile_updateが走ることがあるので２回目以降は処理をスキップする
	if(did_action('profile_update')>1){return;}
	//profile_htmlが送られてきていたらuser_metaを更新
	if(isset($_POST['profile_html'])){
		update_user_meta($user_id,'profile_html',$_POST['profile_html']);
	}
});

とりあえず動くものレベルではこんな感じ

あとはnonceつけてCSRF対策とか
scriptタグstyleタグon〜属性style属性を除去してXSS対策とか

Comments

[t-yknow]

貴重な回答を大変ありがとうございます。
申し訳ありません、初心者のため理解が難しいです。
検証しながら実装を行っているのでサンプルコードなどございましたらご教授お願い致します。

[t-yknow]

ありがとうございます。早速使ってみました。
表示されました、ありがとうございます。
「プロフィール」などの項目名を入たい場合はどのようにすれば良いでしょうか。

もう１つ質問させてください。
ユーザのプロフィール一覧と詳細ページを作成するのですが元々ある項目は以下のコードで取得します。
今回追加したエディタの内容はどのように取得できますでしょうか。
どうぞよろしくお願い致します。

<!--投稿者一覧を表示-->
<?php $users =get_users( array('orderby'=>ID,'order'=>ASC) );
echo '<div class="writers">';
foreach($users as $user):
$uid = $user->ID;
$userData = get_userdata($uid);
echo '<div class="writer-profile">';
echo '<figure class="eyecatch">';
echo get_avatar( $uid ,300 );
echo '</figure>';
echo '<div class="profiletxt">';
echo '<p class="name">'.$user->display_name.'</p>';
echo '<div class="description">'.$userData->user_description.'</div>';
echo '<div class="button"><a href="'.get_bloginfo(url).'/?author='.$uid.'">'.$user->display_name.'の記事一覧</a></div>';
echo '</div>';
echo '</div>';
endforeach;
echo '</div>'; ?>

[KazuhiroHatano]

回答のコードに既に答えがあるようなものです

?:とか??とか初心者には見慣れない部分もあるかもしれないですが
さほど難しいコードではありません

WordPressをカスタマイズして使っていくなら
add_actionなどは基礎知識になります

とりあえずコードにコメントだけつけときます

見出しの付け方などはブラウザでプロフィール画面の要素詳細を表示すれば
どういうhtml書けばどういうスタイルが当たるようになってるかわかるので
それを見ながら出力するhtmlを書いてみてください

[t-yknow]

ありがとうございます。
試行錯誤やってみたいと思います。

[t-yknow]

試行錯誤で解決できました、ありがとうございました。