目次
はじめに
実務案件で投稿者の名前とプロフィール写真とプロフィール文を表示させて欲しいというご依頼があったためご紹介します。
投稿者情報の表示のさせ方
現在の投稿者のIDを取得
投稿者の名前などを表示させるためにまずは現在の投稿者のIDを取得する必要があります。下記関数で現在の投稿者のIDを取得できます。
get_the_author_meta('ID');投稿者のニックネームを取得
「投稿者の名前」は厳密に言えば、「投稿者のニックネーム」のことです。WordPress管理画面の「ユーザー」の「プロフィール」内の「ニックネーム（必須）」に記載されているものを取得します。下記関数で投稿者のニックネームを取得できます。
<?php
$author_id = get_the_author_meta('ID');
get_the_author_meta('nickname', $author_id);
?>投稿者のプロフィール情報を取得
こちらもですが、「プロフィール文」は厳密に言えば、WordPress管理画面の「ユーザー」の「プロフィール」内の「プロフィール情報」のことです。下記関数で取得できます。
<?php
$author_id = get_the_author_meta('ID');
get_the_author_meta('description', $author_id);
?>投稿者のプロフィール写真を取得
下記関数で取得します。
<?php
$author_id = get_the_author_meta('ID');
$user_avatar = get_avatar_url($author_id);
?>投稿者のプロフィール写真を登録する方法
Gravatarで登録をする
Gravatarで登録をする方法が一般的ですが、登録が必要になってくるので若干面倒です。わざわざ登録するのは面倒だという方にはプラグインを使用する方法があります。
プラグインで登録をする
「Simple Local Avatars」というプラグインを使用します。インストールして有効化をすると管理画面からメディアライブラリの画像を追加できるようになります。しかし、余分なプラグインを増やしたくないよって方はGravatarで登録をしてください。
投稿ページ（single.php）や、投稿者ページ（author.php）に投稿者情報を表示させたい場合
レイアウト例
ソースコード例
PR
<?php
$author_id = get_the_author_meta('ID');
$nickname = get_the_author_meta('nickname', $author_id);
$user_description = get_the_author_meta('description', $author_id);
$user_avatar = get_avatar_url($author_id);
?>
<div class="author-area">
<div class="author-info">
<a href="<?php echo get_author_posts_url($author_id); ?>">
<img src="<?php echo esc_url($user_avatar); ?>" alt="<?php echo esc_attr($nickname); ?>" class="author-avatar">
</a>
<div class="author-details">
<a href="<?php echo get_author_posts_url($author_id); ?>" class="author-name">
<?php echo esc_html($nickname); ?>
</a>
<p class="author-description">
<?php echo esc_html($user_description); ?>
</p>
</div>
</div>
</div>記事一覧ページ（category.phpやarchive.php）に投稿者情報を表示させたい場合
レイアウト例
ソースコード例
PR
<?php
$args = array(
'post_type' => 'posts',
'posts_per_page' => 6,
);
$the_query = new WP_Query($args);
if($the_query->have_posts()): ?>
<div class="article__list">
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<article href="#" class="article__item">
<a class="article__link" href="#">
<div class="article__img">
<img src="<?php the_post_thumbnail_url(); ?>" alt="" width="300" height="200">
</div>
<div class="article__txt">
<p class="article__ttl"><?php the_title(); ?></p>
</div>
</a>
<?php
// 変数宣言
$author_id = get_the_author_meta('ID');
$nickname = get_the_author_meta('nickname', $author_id);
$user_description = get_the_author_meta('description', $author_id);
$user_avatar = get_avatar_url($author_id);
?>
<div class="author-info">
<a href="<?php echo get_author_posts_url($author_id); ?>">
<img src="<?php echo esc_url($user_avatar); ?>" alt="<?php echo esc_attr($nickname); ?>" class="author-avatar">
</a>
<div class="author-details">
<a href="<?php echo get_author_posts_url($author_id); ?>" class="author-name">
<?php echo esc_html($nickname); ?>
</a>
<p class="author-description">
<?php echo esc_html($user_description); ?>
</p>
</div>
</div>
</article>
<?php endwhile; ?>
</div>
<?php
endif;
wp_reset_postdata();記事一覧のループ内で表示させるときは、「$author_id」などの変数宣言はループ内に記述してください。
プロフィール文を短くする方法
記事一覧内でプロフィール文を表示させると長くなってごちゃごちゃした印象を持ちます。なのでPHPの「mb_strlen()関数」を使用してプロフィール文が25文字より多い場合はカットして「・・・」を付与するようにします。
上記で紹介したソースコード内で、下記がプロフィール文を表示するソースコードです。
変更前
<p class="author-description">
<?php echo esc_html($user_description); ?>
</p>変更後
<p class="author-description">
<?php
if(mb_strlen($user_description) > 25) {
echo esc_html(mb_substr($user_description, 0 , 25) . '...');
} else {
echo esc_html($user_description);
}
?>
</p>変更した後のレイアウト
プロフィール文を短くしたらスッキリした印象になりました。
CSSのソースコード
.author-info {
display: flex;
margin-top: 15px;
gap: 10px;
}
.article__list .author-info {
margin-top: 0;
padding: 0 20px 25px;
}
.author-area .author-info {
background-color: #f4f7fc;
padding: 20px;
}
.author-info a {
flex-shrink: 0;
transition: all 0.3s;
}
.author-info a:hover {
opacity: 0.5;
}
.author-info img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.author-area .author-info {
margin-top: 0;
}
.author-area .author-info img {
width: 80px;
height: 80px;
}
.author-name {
font-weight: 700;
}
.author-description {
font-size: 12px;
}
.article__list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.article__item {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
box-shadow: 0 8px 24px rgba(64,64,64,0.16);
transition: all 0.3s;
}
.article__item:hover {
box-shadow: 0 8px 24px rgba(64,64,64,0.32);
}
.article__link {
display: block;
}
.article__item
.article__img {
position: relative;
}
.article__img::before {
content: "";
display: block;
padding-top: 75%;
}
.article__img img {
width: 100%;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.article__txt {
position: relative;
width: 85%;
font-size: 14px;
margin-top: -25px;
padding: 20px 30px 0;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.article__item {
width: calc(33% - 11px);
}
.author-area .author-name {
font-size: 30px;
}
.author-area .author-description {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.author-area .author-name {
font-size: 24px;
}
}他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
