WordPressでユーザー別にソーシャルアカウント名など、独自のプロフィールを保存する方法。表示もできる

カスタマイズ情報など このページをあとで読む

1つのサイトに対して、ユーザーアカウントを複数作って運営することもあると思います。

例えばWordPressを使ってメディアサイトを運営している場合、記事を書いてくれるライターさんごとにユーザーアカウントを作るようなイメージです。

ところで、作ったユーザーアカウントにはそれぞれプロフィールページが用意されています。

ここでプロフィールページを一度確認してみましょう。WordPressにログインした状態で、「ユーザー」→「あなたのプロフィール」をクリックします。

wordpressprofileadd03

下の画像はプロフィールページの一部ですが、名前（姓名）/メールアドレス/紹介文などを入力する欄が設けられています。

wordpressprofileadd04

プロフィールページで入力したデータは、「get_the_author_meta」を使って表示させることができます。

例えば「名」を表示したい場合は、

<?php echo get_the_author_meta( 'first_name' ); ?>

または、

<?php the_author_meta( 'first_name' ); ?>

と書くとOKです。

ループ内で使う場合は上の方法で、ループ外ではユーザーIDを第2引数に指定してあげればOKです。

以上が長い前置きで、以下が本題です。

ユーザーごとに持たせられる情報をもっと増やしたい

例えば、「Twitter,Facebook,Google+などのソーシャルアカウント名をユーザーアカウント別に設定したい」って事もあると思います。

そんな時にWordPressでは便利な方法がありますので、似たようなことをされたい場合はご参考ください。

プロフィールページに入力欄を作る

まずは、プロフィールページに入力欄を作る作業からスタートします。Codexに掲載されているコードをありがたく参考にさせて頂いて、以下のコードを「functions.php」の最後尾などに追記します。

<?php
//ユーザー情報追加
add_action('show_user_profile', 'add_user_profile');
add_action('edit_user_profile', 'add_user_profile');
function add_user_profile($user) {
?>
<h3>ソーシャルアカウント</h3>
<table class="form-table">
<tr>
 <th>
 <label for="twitter">Twitter</label>
 </th>
 <td>
 <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" />
 <p><span class="description">例：https://twitter.com/TwitterJP の場合「TwitterJP」</p>
 </td>
</tr>
<tr>
 <th>
 <label for="facebook">Facebookページ</label>
 </th>
 <td>
 <input type="text" name="facebook" id="facebook" value="<?php echo esc_attr( get_the_author_meta( 'facebook', $user->ID ) ); ?>" class="regular-text" />
 <p><span class="description">例：https://www.facebook.com/facebook の場合「facebook」</p>
 </td>
</tr>
<tr>
 <th>
 <label for="googleplus">Google+ページ</label>
 </th>
 <td>
 <input type="text" name="googleplus" id="googleplus" value="<?php echo esc_attr( get_the_author_meta( 'googleplus', $user->ID ) ); ?>" class="regular-text" />
 <p><span class="description">例：https://plus.google.com/u/0/+GoogleJapan/ の場合「GoogleJapan」</p>
 </td>
</tr>
</table>
<?php } ?>

コードがやっていること

アクションフック「show_user_profile」「edit_user_profile」とhtmlのinput要素などを使って、プロフィールページに「入力欄を表示しているだけ」です。

アクションフックについてはCodexをご参考ください。

この2つのアクションフックは「ログイン中のユーザーのプロフィールページを表示した場合（show_user_profile）」「ログイン中のユーザー以外のプロフィールページを表示した場合（edit_user_profile）」に適用されます。

どちらかの場合だけ表示させたいのであれば、片方だけアクションフックさせておけば大丈夫です。

うまくコードが動くと、下のようにプロフィールページにソーシャルアカウントの入力欄が表示されるようになります。

wordpressprofileadd00

Twitterの入力欄を一例として、重要なところを3つに分けて見てみましょう。

1.ラベルの設定

<label for="twitter">Twitter</label>

「twitter」という名前でラベルを用意しておきます。

2.input要素の設定

<input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" />
  • input要素の属性「name」「id」はラベルと同じ「twitter」を指定
  • 「value」は保存されている値を指定（値がなければ何も表示しない）
  • 「class」は属性が「text」タイプの場合はデフォルトのプロフィール入力欄にも使われている「regular-text」にしておけばOK。

以上で構成されています。

3.概要の設定

<p><span class="description">例：https://twitter.com/TwitterJP の場合「TwitterJP」</p>

最後に、概要。入力欄に対して「何を入力すればいいか」「どんな意味があるのか」「何に使われるのか」など補足事項を入れておけばいいと思います。

という感じで「3つを1セットとして入力欄を作る」と覚えておけば、あとは入力欄を増やしたい分だけセット数を増やしていけばいいですね。

以上で完了！と言いたいんですが、この状態では「入力欄を表示しているだけ」なんです。

次に、値を保存できるように機能を追加しましょう。

入力した値を保存できるようにする

プロフィールページに独自に追加した入力欄の値を保存するには、下のコードを「functions.php」のさらに最後尾に追加します。

<?php
//入力した値を保存する
add_action('personal_options_update', 'update_user_profile');
function update_user_profile($user_id) {
 if ( current_user_can('edit_user',$user_id) )
 update_user_meta($user_id, 'twitter', $_POST['twitter']);
 update_user_meta($user_id, 'facebook', $_POST['facebook']);
 update_user_meta($user_id, 'googleplus', $_POST['googleplus']);
}
?>

コードがやっていること

アクションフック「personal_options_update」と「current_user_can」を使ってログイン中のユーザーが「edit_user」の権限を持っている場合に、先ほど追加した3つの入力欄の値を保存する、という内容です。

「current_user_can」の仕組みついてはWordPressで現在のユーザーが持っている権限で条件分岐する時に使った「current_user_can」に書きましたので、ご参考ください。

さっき入力欄を作った時に2つのアクションフック「show_user_profile」「edit_user_profile」について書いたんですが、入力欄の保存についても似たようなアクションフック「personal_options_update」「edit_user_profile_update」があって、今回は片方だけ使っています。

アクションフックの説明はCodexにお任せするとして・・・

さっそく、入力した値を保存してみましょう。

wordpressprofileadd01

「プロフィールを更新」をクリックすれば、入力した値が保存されます。

独自で追加したプロフィールはどこに保存されているの？

保存された値は、wp_usermetaテーブルに値が格納されています。下の画像は、phpMyAdminを使って「wp_usermeta」テーブルを確認した時に該当するレコードを3つ抜き出したものです。

wordpressprofileadd02

さきほどプロフィールページで入力、更新した内容が格納されています。

ちなみに、入力した値を保存するコードで

update_user_meta($user_id, 'twitter', $_POST['twitter']);

と書きましたが「update_user_meta」の第2引数で指定した値が「wp_usermeta」の「meta_key」フィールドに格納されます。

独自で追加したプロフィールも表示できる

今回追加したソーシャルアカウントの値も、「get_the_author_meta」を使えば表示できます。

<?php echo get_the_author_meta('twitter'); ?>

ループ外で使用する時は、第2引数にユーザーIDを指定すればOK。

<?php echo get_the_author_meta('twitter',1); ?>

まとめ

この方法を応用すれば、閲覧者用に表示するためだけじゃなくて、管理者などがユーザーアカウント別で内部的に持たせておきたい情報として保存しておくこともできます。

  1. 入力欄を作る
  2. 入力欄を保存する

という2つのステップで完成する機能ですが、かなり便利です。もし機会がありましたらお試しください。

著者:bouya Imamura