WordPress プラグインなしで投稿者のプロフィールを表示

複数の人で投稿しているようなサイトの場合、投稿した記事に投稿者のプロフィールを表示するということ、よくあることだとおもいます。

そのためのプラグインもありますが、WordPress 本体にユーザー情報として様々な項目があるので、これを表示するのであればプラグインを使用しなくても、数行のコードで表示することができます。

スクリーンショット

プロフィールを設定する

管理画面の [ユーザー]->[あなたのプロフィール] を開きプロフィール情報等を入力します。

この後のプロフィールを表示するコードでは、ニックネーム、プロフィール情報およびプロフィール写真を使用しています。

プロフィールを表示するコード

ここでは、ニックネーム、プロフィール情報およびプロフィール写真を表示するテンプレート タグとしました。そのコードは下記のとおりです。

functions.php 等

function my_get_post_profile() {
	$html = '';
	if ( get_the_author_meta( 'description' ) ) {
		$html .= '<div class="author-profile content-bottom-widgets">';
		$html .= '<div class="author-profile-avatar">' . get_avatar( get_the_author_meta( 'user_email' ), '100' ) . '</div>';
		$html .= '<div class="author-profile-description">';
		$html .= '<h2 class="author-profile-name">' . esc_html( get_the_author_meta( 'display_name' ) ) . '</h2>';
		$html .= '<p class="author-profile-bio">' . nl2br( get_the_author_meta( 'description' ) ) . '</p>';
		$html .= '</div>';
		$html .= '</div>' . "\n";
	}
	return $html;
}

テンプレート（single.php 等）

<?php echo my_get_post_profile(); ?>

CSS コード

.author-profile {
	clear: both;
	padding: 15px;
	border: solid 1px #d1d1d1;
	border-radius: 2px 0 0 2px;
}
.author-profile .author-profile-avatar {
	float: left;
	width: 120px;
}
.author-profile .author-profile-avatar img {
	float: left;
	border-radius: 50%;
}
.author-profile .author-profile-name {
	clear: none;
	font-size: 1rem;
	font-weight: bold;
	line-height: 1.75;
	margin: 0;
}
.author-profile .author-profile-bio {
	font-size: 0.8125rem;
	color: #686868;
	overflow: hidden;
	margin: 0.5em 0;
}

プロフィール情報欄で HTML タグを許可する

デフォルトではプロフィール情報欄は、HTML タグが入力できません。

HTML タグを使用したい場合は、下記のコードを追加することで HTML タグが入力できるようになります。

remove_filter( 'pre_user_description', 'wp_filter_kses' );

最後に

わずか数行のコードで簡単にプロフィールを表示できるので、是非ご利用ください。