【WP】ユーザーの一覧、ユーザー別に最新記事を表示する方法

wordpress-author-info-displayキュレーションサイトなど最近では複数のライターによって運営される情報サイトをよく見ることができます。そのようなサイトにおいて、ユーザーの一覧を表示する、さらには1ページ内にユーザー事に最新記事を表示するといったページがほしいときがあります。

今回は、WordPressでユーザーの一覧、ユーザー別に最新記事を表示する方法をご紹介します。

「get_users」関数を使用したユーザー情報の取得

ユーザー情報を取得るときは「get_users」関数を使います。「get_users」関数では権限の指定、ソートの設定、特定のIDのユーザーを除外するといった条件を設定することができ、表示するときの順番を制御することができます。

// 例.投稿者(author)のみをIDの降順(DESC)ですべての情報を取得する
  $args = array(
	  'role'            => 'author',
	  'orderby'         => 'ID',
	  'order'           => 'DESC',
	  'fields'          => 'all',
  ); 
  
  $users    = get_users( $args );

単純にIDや表示名でのソートでは目的とする順番で並びを変えることができない場合は、ユーザー情報に「並び順」などカスタム項目を追加して並びを調整することも可能です。

ユーザー情報のカスタマイズする場合は、「functions.php」必要なコードを追記するか、「User Meta Manager」などのプラグインを使い編集することができます。

取得したユーザー情報を表示する

「get_users」関数で取得した情報を「foreach 」を使い表示します。

// 表示名を出力する
foreach ( $users as $user ) {
	echo '<p>' . esc_html( $user->user_nicename ) . '</p>';
}

ユーザー事に記事を表示する

ユーザー情報の表示に合わせて投稿の記事を取得する処理を追加します。

// 表示名と投稿記事を取得して表示する
foreach ( $users as $user ) {
	echo '<p>' . esc_html( $user->user_nicename ) . '</p>';
	// 投稿記事の取得
	$args = array(
	  'post_type'       => 'post',
	  'author'	    => $user->ID,
	  'numberposts'     => 5,
	);
	
	$myposts = get_posts( $args );
	
	foreach( $myposts as $post ) :  setup_postdata($post);

        // 記事表示の処理

        endforeach; wp_reset_postdata(); 
}

関連記事

美容室グランディール様WEBサイトのリニューアル

富士宮市にある『美容室グランディール』様のWEBサイトのデザインをリニューアルいたしました。上質な空間を演出できるように、よりナチュラルな印象に、おしゃれで可愛らしい雰囲気のデザインに仕上がりました。 インスタグラムでの投稿と連携して、写真が表示されるようになっております。...続きを読む

2018.02.06WEBサイト制作リニューアル美容室

【デザイン】無料でダウンロードができるベクター素材サイトまとめ

WEBサイトやデザイン制作において、ベクター素材は加工もし易くロゴやアイコンいろんな場面で活躍します。そんなベクター素材が無料でダウンロードできるサイトをまとめてみました。 Vector Stock ユーザー登録が必要ですが、有料から無料のロイヤリティーフリーの素材が...続きを読む

2015.02.14インスピレーション

【JavaScript】横にスライドするレスポンシブメニューを実装するライブラリ『mmenu』

スマートフォンやタブレットのアプリなどでボタンを押すとメニューが横から展開するインターフェイスをみることがあります。今回はそのような横にスライドするメニューを実装することができるJavaScriptライブラリ『mmenu』を紹介します。 『mmenu』 ダウン...続きを読む

2015.03.04HTMLコーディング

【デザイン】想像力を刺激するようなクリエイティブな本棚

今回は、タイトルの通り普通の本棚とは異なるアイディアにあふれたクリエイティブな本棚のデザインをまとめてみました。 “Bias of Thoughts” 目の錯覚を利用した不思議なデザインです。 Link:http://melbournea...続きを読む

2015.02.15インスピレーション

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング