WordPressのプロフィール項目をカスタマイズして追加する方法 |

WordPressのユーザー(投稿者)プロフィールをWEBサイト上に表示する場合、WordPress標準のユーザー情報の項目だけでは物足りない場合があります。近年ではプロフィールと一緒にSNSやYouTubeなどへのリンクを一緒に掲載することが多いですが、WordPressのプロフィール項目にはそれらの項目は全くありません。本稿ではWordPressのプロフィール項目を追加してカスタマイズする方法について解説します。なお、本稿ではプラグインは利用せず、テーマを編集して実現します。

本稿のゴール

本稿では、WordPressのプロフィール管理画面に、標準のプロフィール項目に加え、「Twitter」「YouTube」の項目を追加することをゴールとします。

標準の仕様を理解する

WordPressのデフォルトでは、次の項目がプロフィールとして設定できます。

名
姓
ニックネーム
メールアドレス
サイト
プロフィール情報
プロフィール画像

しかし、これだけの情報では、物足りないことがほとんどで、筆者はWordPressの案件を請ける度に、これから説明するWordPressテーマのカスタマイズをしています。 (本稿最後にある著者欄もです)

プロフィール設定画面のカスタマイズ

まずはWordPress管理画面のプロフィール画面をカスタマイズします。やることは、利用中のWordPressテーマの functions.php に下記のコードを追加するだけです。 Twitter, YouTube 以外に項目を追加したい場合は、連想配列の代入項目を追加/変更すれば実現できます。

// ユーザープロフィールに独自の項目を追加します
function user_contactmethods_filter($items) {
    $items['twitter']  = 'Twitter (URL)';
    $items['youtube']  = 'YouTube (URL)';
    return $items;
}
add_filter('user_contactmethods', 'user_contactmethods_filter');

このコードを追加するだけで、WordPress管理画面のプロフィール編集画面の入力欄に、下図のように「Twitter」「YouTube」の欄が追加されます。

プロフィールを表示する

カスタマイズしたプロフィール項目は the_author_meta() 関数や get_the_author_meta() 関数を利用することで画面に表示することができます。例えば今回追加した「Twitter」の項目であれば、次のように実装することで表示することができます。次の例は、TwitterのURLが空でなければ表示する例です。

<?php if(get_the_author_meta('twitter') != "") { the_author_meta('twitter'); } ?>

WordPressの内部を理解しよう

ここまでの説明で本稿のゴールは達成できていますが、WordPressを更に深く理解するために、もう少し説明をします。

WordPressはMySQLデータベースにデータを保存していますが、ユーザーに関するデータは wp_usermeta と wp_users という2つのテーブルに情報が保存されています。wp_users テーブルはWordPressのユーザーの基本情報が保存され、プロフィールのような付加情報が wp_usermeta テーブルに保存されています。 wp_usermeta テーブルのテーブル構造は下表の通りです。

カラム名	型	説明
umeta_id	BIGINT	レコードの一意のキーID (サロゲートキー)
user_id	BIGINT	ユーザーID
meta_key	VARCHAR(255)	データのキー
meta_value	LONGTEXT	入力されたデータの値

ここで重要なのは meta_key と meta_value の値で、実際にMySQLのテーブルを覗いてみると下表のようにデータが保存されます。 twitter と youtube が本稿により追加したカスタマイズ項目で、 nickname first_name last_name description は標準のプロフィール項目です。

umeta_id	user_id	meta_key	meta_value
1	1	nickname	OSCA
2	1	first_name	Kazufumi
3	1	last_name	Hamano
4	1	description	(プロフィール情報)
29	1	twitter	https://twitter.com/engineer_osca
30	1	youtube	https://youtube.com/xxxxxxx