WordPressに登録されたユーザー情報の一覧を作成する方法

WordPressのサイトは複数のユーザーで運営できます。そのためどんなユーザーがサイトを運営しているのか？どんなユーザーがサイトの記事を書いているのか？を一目で分かるページがあると便利です。

「こんな面白い人がたくさん運営しているサイトなら、もっと記事を読んでみてみたい」とユーザー情報の一覧ページでサイトに興味を持ってくれる人もいます。ということで今回は下記の画像のように、ユーザー情報の一覧を作成する方法を解説します。

get_usersで筆者情報の一覧を作成できる

WordPressに登録されたユーザー情報の一覧は「get_users」を使うと表示できます。下記のコードはget_usersを使ったコードになります。ユーザー一覧を設置したい箇所に下記のコードを記載してみてください。

<?php $args = get_users(array(
    'orderby'      => 'ID',
    'order'        => 'ASC'
));
?>
<ul class="user_list">
    <?php foreach ($args as $args) {
        $uid = $args->ID; ?>
        <li class="user_profile">
            <div class="user_avatar_text_box">
                <div class="user_list_avatar">
                    <?php echo get_avatar($uid, 160); ?>
                </div>
                <div class="user_list_text">
                    <a href="<?php echo get_bloginfo("url") . '/?author=' . $uid ?>">
                        <div><?php echo $args->display_name; ?></div>
                    </a>
                    <div class="author_info"><?php echo $args->description; ?></div>
                    <div class="author_other_article">
                        <a href="<?php echo get_bloginfo("url") . '/?author=' . $uid ?>">
                            →この筆者の他の記事も読む
                        </a>
                    </div>
                </div>
            </div>
            <ul class="author_sns_list">
                <li><a href="<?php echo $args->twitter; ?>"><i class="fa-brands fa-square-twitter fa-4x"></i></a></li>
                <li><a href="<?php echo $args->Facebook; ?>"><i class="fa-brands fa-square-facebook fa-4x"></i></a></li>
                <li><a href="<?php echo $args->Instagram; ?>"><i class="fa-brands fa-square-instagram fa-4x"></i></a></li>
            </ul>
        </li>
    <?php } ?>
</ul>

では上記のコードを順に解説していきます。

get_usersのパラメーターを設定する

<?php $args = get_users(array(
    'orderby'      => 'ID',
    'order'        => 'ASC'
));
?>

get_usersでは様々なパラメーターを取得できます。orderbyはソート順を決める項目を指定できます。上記ではソートの順番を「ID」で指定しています。これにより、先に発行したユーザーのIDから順にユーザー情報が並べられます。

orderは並び順が昇順か降順を指定するものです。ASCなら昇順、DESCなら降順を指定できます。

get_usersでは、この2つ以外にも様々なパラメーターを設定できます。興味がある人は下記のWordPress Codexのページを参考にしてみてください。

→関数リファレンス/get users – WordPress Codex 日本語版[1]

foreachで繰り返し処理をする

<?php foreach ($args as $args) {
 $uid = $args->ID; ?>

今回はユーザー情報の一覧を作りたいので繰り返し処理が必要です。foreachを使うとユーザー情報を並べられます。「$uid = $args->ID;」はユーザー情報からIDを取り出して、変数$uidに格納するという処理をしています。

画像やユーザーID、プロフィール情報を出力する

画像やユーザー名、プロフィール情報はWordPress管理画面にある「ユーザー」→「プロフィール」画面の内容から出力できます。以下にこの「プロフィール」の画像やユーザー名、プロフィール情報の内容を表示する方法も解説します。

画像を出力する方法

<?php echo get_avatar($uid, 160); ?>

このコードによってユーザーの画像が出力されます。160と設定しているので、幅、高さが160の画像が表示されます。表示させたい好みの数字を設定してみてください。

変数「$uid」にはユーザー情報のIDが格納されています。get_avatarでは、ユーザーIDからの画像を取得する関数なので、ユーザーIDも指定する必要があります。これによりユーザーごとに設定された画像が表示されるようになります。

ユーザーIDを表示する方法

 <a href="<?php echo get_bloginfo("url") . '/?author=' . $uid ?>">
         <div><?php echo $args->display_name; ?></div>
 </a>

ユーザーIDは「display_name」で表示できます。そしてリンクに設定してある「<?php echo get_bloginfo(“url”) . ‘/?author=’ . $uid ?>」は、ユーザーごとの個別ページにアクセスできるリンクになっています。

ユーザーごとの個別ページには、そのユーザーが執筆した記事の一覧を載せるといいですね。そのユーザーが書いた記事を気に入った人が、他の記事も読みたいと考えたときに記事を見つけやすくなります。

 <div class="author_other_article">
     <a href="<?php echo get_bloginfo("url") . '/?author=' . $uid ?>">
        →この筆者の他の記事も読む
     </a>
 </div>

また「この筆者の他の記事も読む」にも、ユーザーごとの個別ページへのリンクも貼って置くとよいですね。

プロフィール情報を表示する

 <div class="author_info"><?php echo $args->description; ?></div>

「<?php echo $args->description; ?>」では、プロフィール情報を表示できます。

SNSボタンを表示する

ユーザー情報のなかにSNSのリンクを貼っておきたい人も多いでしょう。ただこのSNSのリンクを設置するのには一工夫が必要です。

これまでWordPress管理画面にある「プロフィール」の情報を出力してきましたが、デフォルトの状態だと、SNSのURLを入力する項目がありません。そこでまずは管理画面のプロフィールの項目にSNSのURLを入力する項目を作成します。

管理画面のプロフィールの項目を増やす方法

function.phpに以下のようなコードを記載すると、管理画面のプロフィールに好きな項目を増やせます。

function my_user_meta($wb)
{
//項目の追加
$wb['twitter'] = 'twitter';
$wb['Facebook'] = 'Facebook';
$wb['Instagram'] = 'Instagram';
return $wb;
}
add_filter('user_contactmethods', 'my_user_meta', 10, 1);

上記のコードを設置すると以下のように、SNS用の項目が増えました。この項目ごとに、各ユーザーのSNSへのリンクを記載しましょう。

SNSのリンクを設置する

SNSのリンクは以下のコードを記載すれば設置できます。

<ul class="author_sns_list">
   <li><a href="<?php echo $args->twitter; ?>"><i class="fa-brands fa-square-twitter fa-4x"></i></a></li>
    <li><a href="<?php echo $args->Facebook; ?>"><i class="fa-brands fa-square-facebook fa-4x"></i></a></li>
  　<li><a href="<?php echo $args->Instagram; ?>"><i class="fa-brands fa-square-instagram fa-4x"></i></a></li>
            </ul>

<?php echo $args->twitter; ?>という記述がありますが、これはさきほどfunction.phpに記述した「twitter」を差しています。そのためWordPress管理画面のプロフィールの「twitter」の項目の内容にもリンクしています。これでtwitterへのリンクが可能になりました。FacebookやInstagramへのリンクも同じように設置してみてください。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。