会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

【WordPress】メニュー部分にログイン中のユーザー画像を表示させる方法

WordPress(ワードプレス)
この記事は約4分で読めます。

ワードプレスのユーザーでログインしている時に「今ログインしている」という状態が分かりやすいように、よく会員登録系のサイトで表示されているような「ログインしている時に自分のアカウント画像を表示させる」といったような表示を実現させてみたいと思います。

ユーザー情報を表示させる方法

ワードプレスでユーザー情報を表示させるには、ユーザー情報が表示できるテンプレートタグを使います。

テンプレートタグは、ブログのデータを動的に表示したり、個性的で面白いブログにカスタマイズしたりするときに、テンプレートの中で使います。下記は、WordPress で使える一般ユーザー向けタグの機能別一覧です。

https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0

こちらの中の「投稿者タグ」を使ってユーザー情報を表示できるようになっています。

投稿者タグで表示できるタグ

下記のタグを使って、投稿者の情報を表示させることができます。

例えば、下記のようにして取得できます。

// ユーザー名を取得する
<?php the_author(); ?>
// ユーザーの名字を取得する
<?php the_author_meta('user_lastname'); ?>
// ユーザーの名前を取得する
<?php the_author_meta('user_firstname'); ?>
// ユーザーのメールアドレスを取得する
<?php the_author_meta('user_email'); ?>
// ユーザーのプロフィール情報を取得する
<?php the_author_meta('user_description'); ?>
// ユーザーのプロフィール画像(150px)を取得する
<?php echo get_avatar( get_the_author_id(), 150 ); ?>

ユーザーのアバター画像を取得する

「ユーザーのアバター画像」については、上記のページにそれらしき記載がなく…別のところにありました。「get avatar」という関数を使うと取得できるようです。

ユーザー ID もしくはメールアドレスからユーザーのアバターを取得します。一般的にコメント欄で使われます。この関数はプラガブルです。しかしグラバターの出力を変更したいプラグイン作者は、互換性のために get_avatar /en フィルターを代わりに使うべきです。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_avatar

id_or_emailのところに直接ユーザーIDを指定することでアバターが取得できます。

<?php echo get_avatar( $id_or_email, $size, $default, $alt, $args ); ?>

しかし、誰がログインしているかが分からないので、ログインしているユーザーのIDを指定できるように「get_current_user_id」を使って取得します。

get_current_user_id();
<?php echo get_avatar( get_current_user_id(), 100 ); ?>

※ログインしていない状態だと、get_current_user_idは0の値が返されます。

ログインしている状態のみ表示させる

ログインしているときのみ表示させる場合については、条件分岐で切り分けてみます。

<?php 
if(get_current_user_id() != 0):
//ログインしている状態であれば画像を表示させる
echo get_avatar( get_current_user_id(), 100 );
else:
//ログインしていなければ何かの処理を。
endif; 
?>

という感じにしておいて、ログインしていなければ「ログインボタンを表示させる」「何も表示させない」など指定ができます。

アバター画像が表示されました!!

まとめ

これで、ユーザーのアバター画像を取得して表示させる…といったことも可能です。他にも色々と可能性がありそうな気がしますので、試していきたいと思います。

ということで、こちらを使って、表示を切り替えたり位置を調整したりなどを試していきます。長くなりましたので続きはまた、次回。

ご参考ください😃

タイトルとURLをコピーしました