2018.08.21

【bbpress】プロフィールページに好きな項目(カスタムフィールド)を追加する方法

こんにちは、ゾノ( @ozonosho )です。

今回の記事ではwordpressの掲示板プラグイン「bbpress」においてプロフィールページに好きな項目(カスタムフィールド)を追加する方法をご紹介します。

掲示板ではユーザー同士がお互いのプロフィールページを自由に閲覧することができますが、bbpressの基本機能ではプロフィール情報に名前ぐらいしか掲載されないのですこし使いにくく感じます。

そのため、名前だけでなく年齢や自己紹介などのオリジナルのプロフィール項目を追加したい方は今回紹介する方法を試してみてください。

bbpressでプロフィールページに好きな項目を追加する方法

実装は下記の4ステップでおこないます。

  1. ユーザー用のカスタムフィールド項目を作成する
  2. プロフィール編集ページにカスタムフィールドを追加する
  3. プロフィール更新時にカスタムフィールドの値も保存する
  4. プロフィール表示ページにカスタムフィールドの値を表示する

それぞれ説明していきます。

①ユーザー用のカスタムフィールド項目を追加する

WordPress管理画面のプロフィール編集ページで設定できる項目であればカスタムフィールド項目の作成は必要ありませんが、もし年齢や性別などオリジナルの項目を利用したい場合には先にユーザー用のカスタムフィールド項目を作成しましょう。

functions.phpにコードを書いてカスタムフィールド項目を作成しても大丈夫ですが、プラグイン「Advanced Custom Fields」を利用すれば簡単に作成できるのでこちらのほうが良いでしょう。

※「Advanced Custom Fields」の使い方はネットにわんさか情報が落ちているのでここでは割愛します

②プロフィール編集ページにカスタムフィールドを追加する

ここからがbbpressへの反映になります。
カスタムフィールド項目の作成ができたら、まずはプロフィール編集ページに先ほど作成したカスタムフィールド項目を追加しましょう。

ちなみに完成すると下図のようなプロフィール編集フォームを実装することができます。

このような編集フォームを実装するためには、まずはプラグインファイル内のプロフィール編集フォームのファイル(パス:bbpress/templates/default/bbpress/form-user-edit.php)を開いてください。

ファイルを開くと下記のようなコードがあります。

<div>
	<label for="first_name"><?php _e( 'First Name', 'bbpress' ) ?></label>
	<input type="text" name="first_name" id="first_name" value="<?php bbp_displayed_user_field( 'first_name', 'edit' ); ?>" class="regular-text" tabindex="<?php bbp_tab_index(); ?>" />
</div>

<div>
	<label for="last_name"><?php _e( 'Last Name', 'bbpress' ) ?></label>
	<input type="text" name="last_name" id="last_name" value="<?php bbp_displayed_user_field( 'last_name', 'edit' ); ?>" class="regular-text" tabindex="<?php bbp_tab_index(); ?>" />
</div>

<div>
	<label for="nickname"><?php _e( 'Nickname', 'bbpress' ); ?></label>
	<input type="text" name="nickname" id="nickname" value="<?php bbp_displayed_user_field( 'nickname', 'edit' ); ?>" class="regular-text" tabindex="<?php bbp_tab_index(); ?>" />
</div>

これらは元々ある姓名やニックネームの入力フォーマットで、下記の要領で定義しています。

<div>
	<label>カスタムフィールドラベル</label>
	<input type="text" name="カスタムフィールド名" id="カスタムフィールド名" value="初期値" />
</div>

これと同じ要領で自分が追加したい項目を追加したい場所に入れてみましょう。

下記は一例になります。

<?php $user = get_userdata(bbp_get_displayed_user_id()); ?>

<div>
	<label for="user_age">年齢</label>
	<input type="text" name="user_age" id="user_age" value="<?php echo $user->user_age; ?>" />
</div>

<div>
	<label for="user_profile">自己紹介</label>
	<textarea name="user_profile" id="user_profile" class="regular-text" /><?php echo $user->user_profile; ?></textarea>
</div>

上記のとおり、入力形式はinputだけでなくtextareaなども好きに利用できます。

元々のコードのように関数bbp_displayed_user_fieldでユーザーメタ情報を取得しても良いですが、上の例のように一度get_userdataでユーザー情報を取得してしまえば、あとは「$user->カスタムフィールド名」で好きに情報を取得できるので楽チンです。

尚、プロフィール編集ページを開いたときにはすでに保存されているデータがはじめに表示される必要があるので、初期値は必ず設定するようにしましょう。

編集ページにはユーザーがデータを入力するための箱を作るだけなので作業はこれで完了です!

③プロフィール更新時にカスタムフィールドの値も保存する

プロフィール編集ページで作成したカスタムフィールド項目の値をユーザーが入力できるようにしたら、次にプロフィール更新ボタンを押されたタイミングでカスタムフィールドの値も保存されるようにしましょう。

実装は簡単で、下記のようなコードをfunctions.phpに追加してください。

function bbp_user_profile_update($user_id) {
    if(isset($_POST) {
        if($_POST['user_age']) {
            update_user_meta($user_id, 'user_age', $_POST['user_age'] );
        }
        if($_POST['user_profile']) {
            update_user_meta($user_id, 'user_profile', $_POST['user_profile'] );
        }
    }
}
add_action('profile_update', 'bbp_user_profile_update');

フック「profile_update」を利用することでプロフィール更新時に処理を走らせることができるので、そこでユーザーメタ情報(カスタムフィールドの値)も一緒に保存するようにします。

入力フォームから送信される内容は$_POSTで取得できるので、上記コードをご自身のカスタムフィールド名に置きかえて利用してください。

④プロフィール表示ページにカスタムフィールドの値を表示する

保存まで完了すればあとは簡単!
最後は、保存したカスタムフィールドの値をプロフィールページで表示しましょう。

実装するためには、まずはプラグインファイル内のプロフィール表示ページのファイル(パス:bbpress/templates/default/bbpress/user-profile.php)を開いてください。

あとは表示したい箇所に下記のようなコードを追加すれば出力できます。

<?php
	$user = get_userdata(bbp_get_displayed_user_id());
	//出力
	echo $user->user_age;
	echo $user->user_profile;
?>

カスタムフィールドの出力方法は何パターンかありますが、ユーザーメタ情報を出力するときはこの方法が最も楽なんじゃないかなと思います。

ちなみに先ほど例として見せたサイトだと下図のプロフィールページが完成しました。

このように編集ページで更新したプロフィール情報がきちんと表示されれば完成です!

おわりに

以上、今回の記事ではwordpressの掲示板プラグイン「bbpress」においてプロフィールページに好きな項目(カスタムフィールド)を追加する方法を紹介させていただきました。

当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。

あなたのサイトに理想の機能を実装!WordPressカスタマイズサービス

本サービスはあなたのWordPressサイトに理想の機能を実装するサービスとなります。 どのような機能・要望でも実現可能です! Wo......

→この記事を読む