WEBOPIXEL

WordPressのユーザーページ(author.php)テンプレートをカスタマイズする

Posted: 2010.08.28 / Category: WordPress / Tag: ,

Wordpressを複数人で管理する場合ユーザーページ(authorテンプレート)を利用すれば、ユーザーごとの自己紹介ページを簡単に作成できます。
この記事では管理画面の「ユーザー編集」で入力した情報をユーザーページ(authorテンプレート)に表示させることから始め、「ユーザー編集」での不要な項目の削除や、最終的にはオリジナルのフィールドを追加するということをやったりしてみます。

Sponsored Link

ユーザーページを確認してみる。

まずユーザーページを確認してみましょう。
ブログURLのあとに「/author/[ユーザー名]」でユーザーごとのページが表示されます。

http://www.example.com/author/[ユーザー名]

何も設定していないとアーカイブページ(archive.php)のテンプレートで表示されます。(archive.phpがなければindex.php)
ただ表示される記事はアドレスに入力したユーザーが書いた記事だけになっているはずです。

ユーザーページなんて言っちゃってますが、パーマリンクを見ると「author」なんですよね。
なのでオーサーページと言う方が正解かもしれません……。

ユーザーページに表示させる情報の入力

管理画面の「ユーザー」メニューからユーザーを選択し「ユーザーの編集」画面で表示させる項目を入力していきましょう。
AIMとかJabberはあまり使っている人はいないと思いますので(というか私が使っていない!)空欄でいきます。
また、赤い文字はテンプレートで呼び出すときに使うフィールド名です。

ユーザー編集画面

ユーザーページ(author.php)テンプレートの作成

テンプレートを作成して入力した情報を反映させます。
テンプレートフォルダに「author.php」を作成してください。
ユーザー情報は「the_author_meta」タグを使用することで呼び出すことができます。

the_author_metaタグ書式

			<?php the_author_meta( $field, $userID ); ?>
		

「$field」には前述した各項目に該当したフィールド名を入れます。
「$userID」はそのままですがユーザーIDを指定します。authorテンプレート内では「$author」変数で取得することができます。
ちなみに、ループ内では「$userID」を指定する必要はありません。

ではこのタグを使用して「性」「名」「url」「プロフィール情報」を表示してみましょう。

author.php

			<?php the_author_meta( last_name, $author ); ?>
			<?php the_author_meta( first_name, $author ); ?><br />
			<?php the_author_meta( user_url, $author ); ?><br />
			<?php the_author_meta( description, $author ); ?>
		

どうでしょう。簡単ですね。

ユーザー情報を取得するには「the_author_meta」タグを使用する他にも「get_userdata」関数を使用する方法があります。
「get_userdata」で取得すればオブジェクトデータとして扱うことができます。

get_userdataタグ書式

			<?php get_userdata(userid); ?> 
		

引数の「userid」はやはりユーザーIDを指定する必要があります。同じく「$author」変数を入れれば良さそうですね。
では前述のコードを「get_userdata」関数を使用したバージョンに直してみます。

author.php

			<?php
				$user_data = get_userdata($author);
				echo $user_data->last_name . $user_data->first_name . "<br />";
				echo $user_data->user_url . "<br />";
				echo $user_data->description;
			?>
		

ちょっと短くなった気がしますね。

管理画面のAIM、Yahoo IM、Jabber項目の削除

使用している方もいると思いますが、AIM、Yahoo IM、Jabberなんかは使っていない人も多そうです。
そこで、ユーザー編集画面「連絡先情報」にあるこれらの項目を削除してみます。
「functions.php」に少しコードを追加するだけです。

functions.php

		function update_profile_fields( $contactmethods ) {
			unset($contactmethods['aim']);
			unset($contactmethods['jabber']);
			unset($contactmethods['yim']);
			return $contactmethods;
		}
		add_filter('user_contactmethods','update_profile_fields',10,1);
	

Twitter、Facebook項目の追加

連絡先情報の項目の削除を行いましたが、追加することもできます。
たとえばTwitterやFacebookなら使用している人も多そうですね。
さきほどの「update_profile_fields」関数に以下の書式でコードを追加します。

$contactmethods[‘フィールド名’] = ‘管理画面のラベル名’;

実際に追加してみましょう。

functions.php

			function update_profile_fields( $contactmethods ) {
				//項目の削除
				unset($contactmethods['aim']);
				unset($contactmethods['jabber']);
				unset($contactmethods['yim']);
				//項目の追加
				$contactmethods['twitter'] = 'Twitter';
				$contactmethods['facebook'] = 'Facebook';
				
				return $contactmethods;
			}
			add_filter('user_contactmethods','update_profile_fields',10,1);
		

成功すればこんな画面になっているはずです。

項目が追加された画面

新たに追加した項目も使い方は他の項目と同じです。
設定したフィールド名で呼び出すことができます。Twitterなどは使用していない人もいるかと思いますのでif文で入力されている場合のみ表示ということをしてみます。

author.php

			<?php
				$user_data = get_userdata($author);
				if ($user_data->twitter) {
					echo $user_data->twitter . "<br />";
				}
				if ($user_data->facebook) {
					echo $user_data->facebook . "<br />";
				}
			?>
		

オリジナルのフィールド(項目)の追加

Twitterなど連絡先なら自由に入力できるようになったわけですが、もっと他の項目を追加したいよって場合があるかもしれない。
たとえば標準の「プロフィール情報」の入力欄はタグが保存されないのでがっつり作り込みたいといったときには不便です。
なのでここでは新たにタグも保存されるテキストエリアを追加してみます。
画面に表示されるラベル名を「自己紹介」、フィールド名を「ex_profile」として追加してみます。

functions.php

		add_action( 'edit_user_profile', 'add_profile_fields' );
		function add_profile_fields( $user ) {
		?>
			<h3>追加した項目</h3>
			<table class="form-table">
				<tr>
					<th>自己紹介</th>
					<td>
						<textarea name="ex_profile" rows="10"><?php echo esc_attr( get_the_author_meta( 'ex_profile', $user->ID ) ); ?></textarea><br />
						<span class="description">ここに自己紹介文を入力してください。</span>
					</td>
				</tr>
			</table>
		<?php
		}
	

管理画面で確認すると「ユーザー編集」の一番下に項目が追加されているはずです。
ただ、これだと表示するだけなので保存する処理を行う必要があります。
「edit_user_profile_update」というフックを使用すれば更新ボタンを押したときに関数を実行できます。
「add_profile_fields」の下に次のコードを追加してください。

functions.php

		add_action( 'edit_user_profile_update', 'save_profile_fields' );
		function save_profile_fields( $user_id ) {
			if ( !current_user_can( 'edit_user', $user_id ) ) return false;
			update_usermeta( $user_id, 'ex_profile', $_POST['ex_profile'] );
		}
	

入力されたデータ当然ですがデータベースに保存されます。
phpMyAdminで確認してみましょう。「wp_usermeta」テーブルの最後に「ex_profile」というmeta_keyで保存されていれば成功ですね。
テンプレートからの呼び出しかたは他の値と同様、新たに設定した「ex_profile」で表示することができます。

参考サイト

Adding and using custom user profile fields
テンプレートタグ/the author meta

COMMENTS

通りすがり 2012-08-28 17:09 

何度かこのサイトの情報を参考にさせていただいております。ありがとうございます。

今回の記事でプロフィールのURLは
http://www.example.com/author/%5Bユーザー名%5D
と記載がありましたが、私の環境ではユーザー名では表示されず、ニックネーム(wp_usersのuser_nicenameの値)で表示されました。
authorページのパーマリンクの設定が出来るのであれば、その設定によってURLは異なるのでしょうが、私のほうでは設定する箇所が見つけられず(・_・;

ちなみにWordpressのバージョンは3.4です。

webOpixel 2012-08-29 10:40 

パーマリンクは「デフォルト」「数字ベース」以外を指定してください。
基本的には管理画面のユーザー名で設定した値を入れれば表示されるはずなんですが、、、

Vara3 2013-01-31 20:03 

wordpress関連で検索していたところこちらにヒットしました。
ちょうど、ユーザーページのカスタマイズについて考えていましたので
大変参考になります。で、質問なのですが、Videoタグを貼るなどして
個別のユーザー登録時に映像を挿入できるような仕組みは可能なのでしょうか?
もし可能なのであれば、とっかかりだけでも教えて頂けないかと思い、コメントしました。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。