【プラグイン不要】WordPress の記事内に「この記事を書いた人」をプラグインなしで自作する方法。

2020年5月3日2021年7月2日

デジタル事業

WordPress の記事下に投稿者情報を表示しているウェブサイトをよく見かけますが、実はプラグインを使わなくても割と簡単に実装できます。
コピペでそのまま使えるサンプルコードも載せましたので、参考にしてみて下さい。

【プラグイン不要】WordPressの記事内に「この記事を書いた人」をプラグインなしで自作する方法。 — 完成形はコレ

そもそも投稿者情報って？

公開した記事の下に、その記事を書いた人の名前や簡単なプロフィールなどを表示させることができます。
テーマによっては既にその機能が備わっているものもあるので、これからサイト運営を始めようとしている方は使用するテーマを確認してみて下さいね。

表示させたいユーザー情報を設定する

投稿者情報は、ダッシュボード内の「ユーザー」ページにある情報を表示させることになります。
まずはユーザーページ内の項目を埋めておきましょう。

もちろん全ての項目を埋める必要はないので、必要に応じてどうぞ。
スタートミーアップでは、

ブログ上の表示名
プロフィール情報
プロフィール写真

この 3項目を表示しました。

プロフィール写真は、Gravatar で写真の変更ができます。
「Gravatar」＞「画像を追加」と進み、プロフィール写真を設定して下さい。

投稿者情報を出力するテンプレートタグ

ユーザーページで設定した項目を出力するためのテンプレートタグです。
これらのテンプレートタグをどのように記述するかは後述します。

ブログ上の表示名

<?php the_author(); ?>

名（ファーストネーム）

<?php the_author_firstname(); ?>

姓（ラストネーム）

<?php the_author_lastname(); ?>

ニックネーム

<?php the_author_nickname(); ?>

メールアドレス

<?php the_author_meta('user_email'); ?>

プロフィール情報

改行は反映されません。

<?php the_author_meta('user_description'); ?>

プロフィール写真

画像は 96px × 96px で出力されます。

<?php echo get_avatar( get_the_author_id() ); ?>

サイズを変更したい場合のテンプレートタグです。150を任意の数字に置き換えて下さい。（単位はピクセル）

<?php echo get_avatar( get_the_author_id(), 150 ); ?>

テンプレートタグを記事内に読み込ませる

先程のテンプレートタグを使って、記事内に投稿者情報を表示させましょう。
流れは以下のようになります。

投稿者情報を出力するための phpファイルの作成する
作成した phpファイルに対するスタイルシートを設定する
phpファイルを任意の場所に読み込む

投稿者情報を出力するための phpファイルの作成する

profile.php という新しい phpファイルを作成します。
名前は任意なのでわかりやすい名前で OKです。
その中に次のコードをコピペします。

<section class="profile">
    <h1>この記事を書いた人</h1>
    <div class="inner">
        <div class="left-side"><?php echo get_avatar( get_the_author_id(), 100 ); ?></div>
        <div class="right-side">
            <p class="authorName"><?php the_author(); ?></p>
            <p class="authorProfile"><?php the_author_meta('user_description'); ?></p>
        </div>
    </div>
</section>

必要に応じてテンプレートタグを差し替え、追記して下さいね。

作成した phpファイルに対するスタイルシートを設定する。

先程の phpファイルに対するスタイルシートを style.css に追加します。

プロフィール画像は、デバイス幅 601px以上では 100px × 100px、600px以下では 70px × 70pxに縮小表示されるように設定してあります。
お好みで修正して下さい。

/* 投稿者情報
-----------------------------------------*/
section.profile {
    width: 100%;
    border: 5px solid #f5f5f5;
    margin: 30px 0;
    padding: 20px 25px;
    box-sizing: border-box;
}
section.profile h1 {
    font-size: 18px;
    border-bottom: 1px dotted #666666;
    margin: 0 0 20px;
    padding: 0 0 5px;
}
section.profile .inner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}
section.profile .inner .left-side {
    width: 100px;
}
section.profile .inner .left-side img {
    border-radius: 50%;
}
section.profile .inner .right-side {
    width: calc(100% - 125px);
}
section.profile .inner .right-side .authorName {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 5px;
}
section.profile .inner .right-side .authorProfile {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}
@media only screen and (max-width: 600px) {
    section.profile {
        padding: 15px;
    }
    section.profile h1 {
        font-size: 16px;
    }
    section.profile .inner .left-side {
        width: 70px;
    }
    section.profile .inner .right-side .authorName {
        font-size: 15px;
    }
    section.profile .inner .right-side {
        width: calc(100% - 85px);
    }
    section.profile .inner .right-side .authorProfile {
        font-size: 13px;
    }
}