プラグインなしでWordPressの投稿記事に「この記事を書いた人」を実装する方法

WordPressの投稿記事に「この記事を書いた人」と筆者の情報が書いてあるのを見たことは多いかと思います。筆者の情報を載せることは、記事の信憑性を高めるなど、読者にとってもメリットがあります。今回はWordPressの投稿記事に「この記事を書いた人」をプラグインなしで、表示する方法を解説します。それに加えて、メディアを複数人で運営することを想定して、「この記事を書いた人」を個別に表示する方法も説明します。

筆者の情報を載せるメリット

筆者の情報を載せることは、メディア運営側にも筆者側にもメリットがあります。

・メディア運営側→記事の信憑性が増して、メディアの評価も上がる

・筆者側→筆者の評価が上がり、他社の案件で示す実績を作れる

筆者の情報に資格などの権威性を示せば、SEOの評価も上がり記事の検索順位にも関わると言われています。資格だけでなく「元○○業界で10年働いていたAさん」といったように記事情報に関連した経歴を載せれば、読者の信頼も得られやすいですね。

デメリットとしては、記事が炎上したら、筆者側に被害が出る可能性があることです。そのためメディア側も筆者を守るような体制を作っておくのが大事でしょう。

記事の下に「この記事を書いた人」を実装する方法を解説

「この記事を書いた人」はプラグインなしでも簡単に実装できます。プラグインを入れるとプラグイン同士が干渉しあって、不具合が出る可能性もあるので、なるべくプラグインは使いたくないという人もいるかと思います。

そのような人に向けて、プラグインなしで「この記事を書いた人」を表示する方法を解説します。まずはメディアの管理者の情報を載せる方法を説明します(最初の管理者以外の2人目、3人目以降のユーザーの管理の仕方は後述で説明します)。

➀テンプレートタグを設置する

まずは筆者の情報を出力できるテンプレートタグを説明します。

▢ <?php echo get_avatar(get_the_author_meta('ID'), 160); ?>

これは筆者のプロフィール写真を出力してくれるタグです。160という数字は写真の大きさを設定しています。このテンプレートタグを使うと、管理画面の「プロフィール」にある「プロフィール写真」に設定してある写真を出力してくれます。

このプロフィール写真は「Gravatar」という別サイトで設定できます。これから写真を設定する人は上記の画像にある「Gravatar でプロフィール画像の変更が可能です。」から設定できます。

設定する際には、WordPressの「プロフィール」に記載してあるメールアドレスと「Gravatar」のメールアドレスを同じにしましょう。同じにしないと「Gravatar」で設定した画像がWordPressに反映されないようです。

▢<?php the_author_meta("display_name"); ?>

これは筆者のユーザー名を出力してくれるタグです。下記の画面にあるWordpressの「プロフィール」にある「ユーザー名」を出力してくれます。

▢<?php the_author_meta("description"); ?>

このタグはWordPressの「プロフィール」にある「プロフィール情報」を出力してくれるタグです。

上記で説明した3つのテンプレートタグを使うと、以下の画面のように筆者の情報が表示できます。下記の画像では個別記事の下に筆者の情報を表示させました。

SNSのリストですが、Font Awesomeを使っています。

上記を実装したHTMLとCSSのコードは以下のとおりです。参考にしてみてください。

▢HTML

  <section class="author_box">
            <h2 class="author_title">この記事を書いた人</h2>
            <div class="author_img_text_box">
                <div class="author_img_box">
                    <?php echo get_avatar(get_the_author_meta('ID'), 160); ?>
                </div>
                <div class="author_text_box">
                    <h3 class="author_name"><?php the_author_meta("display_name"); ?></h3>
                    <div class="author_info"><?php the_author_meta("description"); ?></div>
                </div>
            </div>
            <ul class="author_sns_list">
                <li><i class="fa-brands fa-square-twitter fa-4x"></i></li>
                <li><i class="fa-brands fa-square-facebook fa-4x"></i></li>
                <li><i class="fa-brands fa-square-instagram fa-4x"></i></li>
            </ul>
        </section>

▢CSS

.author_box {
  border: solid 1px #2b398a;
  margin-top: 40px;
}
 
.author_box .author_title {
  background-color: #2b398a;
  color: #FFFFFF;
  font-weight: bold;
  padding: 10px;
}
 
.author_box .author_img_text_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: #2b398a dotted 1px;
}
 
.author_box .author_img_text_box .author_img_box .avatar {
  margin-top: 40px;
  margin-left: 40px;
  margin-bottom: 5px;
}
 
.author_box .author_img_text_box .author_text_box {
  margin-top: 40px;
  margin-left: 24px;
  margin-right: 24px;
}
 
.author_box .author_img_text_box .author_text_box .author_name {
  padding-bottom: 5px;
  border-bottom: #2b398a solid 2px;
}
 
.author_box .author_img_text_box .author_text_box .author_info {
  margin-top: 10px;
}
 
.author_box .author_sns_list {
  margin-top: 20px;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
}
 
.author_box .author_sns_list li {
  margin-left: 40px;
}
 
.author_box .author_sns_list li .fa-square-twitter {
  color: #00acee;
}
 
.author_box .author_sns_list li .fa-square-facebook {
  color: #3b5998;
}
 
.author_box .author_sns_list li .fa-square-instagram {
  color: #CF2E92;
}