WordPress ユーザー情報の拡張とアバター画像とその表示

要件

• 投稿や作成者アーカイブで、作成者（ユーザー）の情報を表示したい
• アバター画像をGravatarではなくWordPress上で設定したい
• 作成者（ユーザー）のSNSアカウントのリンク
• ユーザー一覧作りたい

仕様

• アバター画像はプラグインでよしなに
• プロフィール編集画面にSNSの入力欄追加
• これらの情報を出力
• ユーザーの一覧はショートコードで固定ページなどに埋め込む。

アバター画像

「Simple Local Avatars」が便利。
更新されていないプラグインなので、自己責任で。
アバター画像をアップロード or メディアライブラリーから設定可能。
表示に関しては既存の get_avatar() を使えるので、プラグインをオフにしても表側はPHPエラーなどの影響を受けない。
（写真はTwenty Sixteenをカスタマイズ無しで有効化した場合）

プロフィール編集画面の連絡先情報にSNSの入力欄追加

user_contactmethods にフィルターフック。
GenerateWP にSNS欄を追加するサンプルがあるので、ジェネレーターを使ったほうが簡単。

• Plugin API/Filter Reference/user contactmethods « WordPress Codex
• WordPress User Contact Methods Generator

add-user-contactmethods.php

<?php
// Register User Contact Methods
function custom_user_contact_methods( $user_contact_method ) {

	$user_contact_method['facebook'] = __( 'Facebook Username', 'text_domain' );
	$user_contact_method['twitter'] = __( 'Twitter Username', 'text_domain' );
	$user_contact_method['gplus'] = __( 'Google Plus', 'text_domain' );
	$user_contact_method['skype'] = __( 'Skype Username', 'text_domain' );

	return $user_contact_method;

}
add_filter( 'user_contactmethods', 'custom_user_contact_methods' );

連絡先情報に追加した入力欄の出力

the_author_meta() あるいは get_the_author_meta () を使う。

• Function Reference/the author meta « WordPress Codex
• get_the_author_meta() | Function | WordPress Developer Resources

author-meta.php

<?php
	// Website
	if ( get_the_author_meta( 'user_url' ) )  {
		echo '<a href="' . esc_url( get_the_author_meta( 'user_url' ) ) . '"><span class="genericon genericon-website"></span></a>';
	}
	// Facebook
	if ( get_the_author_meta( 'facebook' ) )  {
		echo '<a href="' . esc_url( 'https://www.facebook.com/' . get_the_author_meta( 'facebook' ) ) . '"><span class="genericon genericon-facebook"></span></a>';
	}
	// Twitter
	if ( get_the_author_meta( 'twitter' ) )  {
		echo '<a href="' . esc_url( 'https://twitter.com/' . get_the_author_meta( 'twitter' ) ) . '"><span class="genericon genericon-twitter"></span></a>';
	}
	// Google Plus
	if ( get_the_author_meta( 'gplus' ) )  {
		echo '<a href="' . esc_url( get_the_author_meta( 'gplus' ) ) . '"><span class="genericon genericon-googleplus"></span></a>';
	}
	// Skype
	if ( get_the_author_meta( 'skype' ) )  {
		echo '<a href="skype:' . esc_attr( get_the_author_meta( 'skype' ) ) . '?call"><span class="genericon genericon-skype"></span></a>';
	}
?>

見た目なんかはよしなに。
写真はTwenty Sixteen既存の single.php 該当部分に入れた例（アイコン部分）。

作成者（ユーザー）一覧を出力

作成者（ユーザー）の取得は　WP_User_Query() クラスを使う。
ショートコードにすることで、固定ページなどでも使えるようにする。
ついでなので、ショートコードで権限グループ（複数可能）を変数として渡せるようにもしてみる。

• Class Reference/WP User Query « WordPress Codex

writerlist_shortcode.php

<?php
function writerlist_shortcode( $atts ) {
	$output = '';

	// Attributes
	extract( shortcode_atts(
		array(
			'role' => 'Author',
		),
		$atts
	) );

	$role = str_replace( array( " ", "　" ), "", $role );
	$role = explode( ',', $role );

	// WP_User_Query arguments
	$user_args = array (
		'role__in' => $role,
		'order'    => 'ASC',
		'orderby'  => 'display_name',
	);

	// Create the WP_User_Query object
	$wp_user_query = new WP_User_Query( $user_args );
	
	// Get the results
	$authors = $wp_user_query->get_results();

	if ( ! empty( $authors ) ) {
		$output .= '<ul class="author-lists">' . "\n";
		// loop through each author
		foreach ( $authors as $author ) {
			// get all the user's data
			$output .= '<li class="author-info">' . "\n";
			$output .= '<div class="author-avatar">' . get_avatar( get_the_author_meta( 'user_email', $author->ID ) ) . '</div>' . "\n";
			$output .= '<div class="author-bio">'. "\n";
			$output .= '<div class="author-title">' . get_the_author_meta( 'display_name', $author->ID ) . '</div>' . "\n";
			$output .= '<div class="author-description">' . nl2br( get_the_author_meta( 'description', $author->ID ) ) . '</div>' . "\n";
			$output .= '</div>'. "\n";

			$output .= '</li>' . "\n";
		}
		$output .= '</ul>' . "\n";
	}
	return $output;

}
add_shortcode( 'writerlist', 'writerlist_shortcode' );

見た目なんかはよしなに。
スクリーンショットは [writerlist role="Author,Editor"] として、投稿者と編集者を指定した例。

ダッシュボードのユーザー一覧

出力側