【プラグイン不要】VK Post Author Display 風の「この記事を書いた人」を自作する方法

コラム 制作ノウハウ・小技

※phpファイルを編集する際は、必ずバックアップを取ってから作業を開始して下さい。

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

【プラグイン不要】WordPressの記事内に VK Post Author Display 風の「この記事を書いた人」をプラグインなしで自作する方法
完成形イメージ

目次

投稿者情報って？

公開した記事の下に、その記事を書いた人の名前や簡単なプロフィールなどを表示させることができます。
テーマによっては既にその機能が備わっていることがあるので、まずは使っているテーマを確認してみて下さい。

ユーザー情報を設定する

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

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

もちろん全ての項目を埋める必要はないので、必要に応じてどうぞ。
今回は、

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

この 3項目を設定しました。

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

【プラグイン不要】WordPressの記事内に VK Post Author Display 風の「この記事を書いた人」をプラグインなしで自作する方法
複数管理もできます。

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

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

ブログ上の表示名

<?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 ); ?>

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

先程のテンプレートタグを使って、記事内に投稿者情報を表示します。
以下のような流れで進めていきます。

  1. 投稿者情報を出力するための phpファイルを作成する
  2. 作成した phpファイルに対するスタイルシートを設定する
  3. 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 に追加します。

プロフィール画像は、デバイス幅 600px以上では 100px × 100px、599px以下では 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: 599px) {
    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;
    }
}

phpファイルを任意の場所に読み込む

投稿者情報を表示したい場所に、最初に作成した phpファイルを呼び出すためのコードを追加します。

テーマファイル内に直接記述する場合は下記のコードをコピペして下さい。
投稿の記事内に表示するなら single.php、固定ページ内なら page.phpに。
<?php get_template_part('profile'); ?>

ウィジェットにショートコードを記述して呼び出すこともできます。
[myphp file='profile']

※コードの内の profile は、作成した phpファイルの名前と同じ文字を入力して下さい。

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

完成！

ウィジェット内にショートコードを入力できないときは

過去にウィジェットでショートコードを使えるようにする方法を紹介していますので、参考にしてみて下さい。

【プラグイン不要】functions.php にコピペでOK！覚えておくと便利な WordPress 小技集
【プラグイン不要】functions.php にコピペでOK！覚えておくと便利な WordPress 小技集
WordPress / プラグイン不要 / php