WEB制作

トップページの実装とユーザープロファイルの表示

 

こんにちは、寿研究所のすぎです。

今回は、ワードプレスの投稿の見出し箇所に投稿者の名前とアイコンを表示する実装をしました！

こんなイメージです。

今回の内容はYouTubeでも発信していますのでよろしければこちらもチェックしてみてください！

実装の背景

このプロジェクトでは、私すぎと、もう一人のメンバー「ともぴー」が担当しています。その二人の区分けがわかるようにする必要がありました。

使用するツールと手順

クエリモニタープラグインの利用

実装を進めるために、まずは投稿の箇所が解る必要があるので「Query Monitor」プラグインを使用しました。これは簡単にいうと、今開いているページがどのファイルで構成されているかを確認できるWordPressテンプレートファイルを特定するために、デベロッパーツールを開き、要素が包まれているクラス名を確認します。今回の例では、「ポストリスト」と「エントリタイトル」というクラス名を探し、該当するファイルを見つけました。

投稿者アイコンの設定

実装を始める前に、管理画面からユーザアイコンを設定します。このアイコンは事前に設定しておく必要があります。アイコンが設定されていれば、次に進むことができます。

実際のコード実装

アイコンとニックネームの表示

今回の実装では、アイコンラッパーという div タグの中に投稿者の情報を取得し、アバターとニックネームを表示するシンプルなコードを組みました。

<div class="icon__wrapper">
<?php
$author_id = $post->post_author;
echo get_avatar($author_id);
the_author_meta('nickname', $author_id);
?>
</div>
 

これで、すぎとともぴーの名前とアイコンが表示されるようになりました。

レスポンシブ対応

デザイン調整

スマホ表示では、アイコンが大きく感じるため、サイズを調整します。横幅を50ピクセルから30ピクセルに変更し、さらにフォントサイズも小さくして、表示が崩れないように対応しました。

.icon__wrapper {
    position: absolute;
    bottom: 0;
    left: 17px;
    display: flex;
    align-items: center;
}

.icon__wrapper img {
    width: 50px;
    height: auto;
}

@media screen and (max-width: 768px) {
    .icon__wrapper {
        font-size: 10px;
        left: 11px;
    }
    .icon__wrapper img {
        width: 30px;
    }
}


これで、スマホでも適切なサイズで表示されるようになりました。

この実装では、誰が投稿しているかが一目で分かるようになっています。さらに、投稿者の役職やポジション（例えば、デザイナーやディレクターなど）を表示することで、よりユーザーに親切なUIにしたいところですが、一旦本日の実装は以上とします。

まとめ

今回の実装で、トップページに投稿者の名前とアイコンを表示することができました。
今後の改善として、投稿者の役職を追加することで、ユーザーにさらに分かりやすいUIを提供できそうです。

ありがとうございました。

RELATED POST