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

2020年05月03日
2020年05月24日

こんにちは。デジタル事業部の冨江です。

今日は、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;
}
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;
    }
}