最近いろいろなサイトでよく見かける作者情報のボックス表示。記事を書いた人について簡単に紹介文を載せておくだけで、なんだかグッと信頼度が増す・・・気がしますよね？

「author box」などの単語で検索すると結構たくさんのプラグインが出てくるので、それで実装しても問題はないのですが、作ってみたら案外簡単にできましたので、プラグインレスで作者情報BOXを作りたい人向けに紹介します。

※なお、アバター（ユーザー画像）をGravatarではなく、メディアにアップロードした画像を使いたいという方はそれ用のプラグインを使った方が無難ですので後述する「ユーザー画像にGravatarを使わない方法」をご覧ください。

※また、当サイトで配布・使用している【HABONE】テーマをお使いの方は文末の「ha-Basicテーマへこの機能を追加するには」の手順に従って実装ください

この方法で設置すると以下のように表示することができます（上はパソコン、下はモバイル表示）

※ごめんなさい。作者の記事一覧リンクを付ける前にスクショを撮ってしまいました。各画像の一番下に「一覧を見る」と表示されるようになっています。このページ下にもこの方法を用いた作者情報を表示していますので色以外の部分はその通りになると考えてください（もしかして外していたらごめんなさい）。

書き忘れてました・・・・肝心の出力される情報のネタ元についてですが、WordPress標準のユーザー情報にある「ブログ上の表示名」に設定されている名前と「プロフィール情報」から引っ張ってきて表示しますので、複数ユーザーで記事の公開をしているサイトではすべてのユーザーで項目を設定ください（「ブログ上の表示名」で何もいないとユーザー名がそのまま表示されセキュリティ上大変危険ですのでニックネームなどを設定し、表示名もニックネームにするようにしましょう）

ページ上部へ戻る▲

記事本文下へ作者情報を表示する方法

テーマの「single.php」へ直接表示用のコードを記述してもいいのですが、あまりごちゃごちゃさせたくないので別ファイルにして「single.php」へ呼び出す方法、デザインコードを紹介します。

プロフィールBOX表示用のファイルを作る

パソコンのテキストエディタを開き、以下のコードをコピーします。

<section id="profile">
<div class="author-image">
<?php if(wp_is_mobile()): ?>
<?php echo get_avatar( get_the_author_meta('ID'), 300 ); //アバター表示?>
<?php else: ?>
<?php echo get_avatar( get_the_author_meta('ID'), 120 ); //アバター表示?>
<?php endif; ?>
</div>
<div class="author-prof">
<ul>
<li>記事の作者: <strong><?php the_author(); ?></strong></li>
<hr>
<li class="prof-descri"><?php the_author_meta('user_description'); //プロフィール情報欄に入力したもの?></li>
<hr>
<li class="prof-listlink">作者の記事一覧は<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">こちら</a></li>
</ul>
</div>
<br style="clear:both;">
</section>

ファイル名を「author-pro」、ファイルの種類を「php」として保存します。この時文字コードを「UTF-8(BOMなし)」にしないと正常に機能しませんのでご注意ください。

文字コード？？という方は

の記事を参考にしてください。

作成したファイルを今有効化しているテーマフォルダへアップロードしてください

子テーマを使っている場合は基本子テーマフォルダの中へアップロードすれば機能しますが、環境によっては親テーマフォルダ内へアップロードしないと動作しないことがあります。

「single.php」で本文下へプロフィールBOXを表示させる

先度作成したファイルの中身（作者BOX）を記事の本文末尾へ表示させます。
※テーマによって違いますので汎用例で解説します

テーマエディタから「single.php」を開きます。

ずらっと並んでいる記述の中で本文を出力するコード

<?php the_content(); ?>

を見つけます。

その記述の下に以下のコードを貼り付けます

<?php get_template_part('author-pro');//プロフィール?>

デザインの設定

テーマのstyle.cssを開き、末尾に以下のコードを追記すれば上の表示例のような感じになります。

このコードは【ha-Basic】テーマで最適化されるようにしていますので、テーマによっては調整が必要です。

/************************* 本文下作者ボックスの表示 **************************/
/****** パソコン用 *******/
@media screen and (min-width: 768px) {
#profile {
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-top: 4px solid #464646;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
margin: 1em 0;
padding: 10px;
min-height:120px;
}

.author-image {
float: left;
}

img.avatar.avatar-120.photo {
height: 120px;
object-fit: cover;
}

.author-prof {
margin-left: 110px;
}

.author-prof li {
list-style-type: none;
}

.author-prof ul {
margin-block-start: 5px;
margin-block-end: 5px;
}

.prof-descri{
font-size:0.8em;
}
}
/****** モバイル用 *******/
@media screen and (max-width: 767px) {
#profile {
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-top: 4px solid #464646;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
margin: 1em 0;
padding: 10px;
min-height:120px;
}

#profile img.avatar.avatar-120.photo {
width: 100%;
}

.author-image {
margin: 0 auto;
max-width: 90%;
}
.author-prof li {
list-style-type: none;
}

.prof-descri{
font-size:0.8em;
}

.author-prof ul {
padding-inline-start:5px;
}
}

li.prof-listlink {
text-align: right;
}

これでパソコン表示のときには作者ボックスの左にアバター画像を、モバイル表示の時は作者ボックスの上に大きなアバター画像が表示されるようになります。上のPHPソースを見て気づかれた方もいると思いますが、アバターの画像サイズをパソコンとモバイルで変えてますのでモバイル時にボケることもありません。

ページ上部へ戻る▲

ha-Basicテーマへこの機能を追加するには

【ha-Basic】テーマをお使いの方は以下の手順で設置することで、より簡単、確実に設置ができます。

「author-pro.php」の作り方は前述した方法と同じです。ファイルを作成したらテーマフォルダの中へアップロードしておきましょう。

作者情報BOXを表示するには「single.php」を開き、45行目付近にある

<?php the_content(); ?>

の下に

<?php get_template_part('author-pro');//プロフィール?>

を貼り付けてください。

また、single.phpへ呼び出しコードを入れる代わりに、【ha-Basic】テーマではテーマフォルダ内の任意のテンプレートをショートコードで呼び出せるようにしていますので、

[myphp file='author-pro']

を本文内の任意の場所や本文下ウィジェットなどに追加することで、↓のように表示したい場所へ表示したい時だけ作者情報BOXを表示できるようになります。

CSSについては【ha-Basic】の場合、「style.css」の末尾に追加してもいいのですが、せっかく追加したCSSですよ！というのが分かるように「a-insert-css.css」というファイルを設けていますので、そちらへ追記するようにしましょう。

また、カラーを変更できるように以下のコードを「a-color-style.css」へ追記して色コードを変更すれば、元の色要素はそのまま残すことができます。

/************************* 本文下作者ボックスの表示 **************************/
/****** パソコン用 *******/
@media screen and (min-width: 768px) {
#profile {
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-top: 4px solid #464646;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
}
/****** モバイル用 *******/
@media screen and (max-width: 767px) {
#profile {
background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
border: 1px solid #ccc;
border-top: 4px solid #464646;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
}

ページ上部へ戻る▲

おまけ　作者の記事一覧リンクに対するセキュリティ対策をしましょう

多分このカスタマイズでボックスの下にある「作者の記事一覧はこちら」のリンクへマウスオーバーして、ん？？と思った方もいらっしゃるのではないかとは思いますが一応・・・。

多くのテーマでこの投稿者一覧へのリンクは文字列で投稿本文のどこかに挿入されています。これと同じコードを今回紹介する作者情報BOXでも使っています。

そして何も対策しないでこのリンクをマウスオーバーすると・・・または作者の記事一覧を表示すると・・・

ページURLの末尾がな、な、なんとユーザー名そのものになっているではありませんか！！

お気づきになりました？？実はこれを知っている人はこの情報を元にパスワードを類推して不正ログインを試みることが多いんです。このセキュリティ問題はすごく昔から言われてますけどあまり気にしてない人も多いんです。でも・・・ログイン試行のログを取ってみると結構これを使ったと思われるログインの跡が出てきます（なぜ分かるのかって？？このサイトはきちんと対策していて、ユーザー名ではないものに変換させているので、その嘘？のログイン名でログインしようとすれば分かるからです）。

対策は簡単、１つプラグインを追加して嘘？のユーザー名を作るだけです（笑）。

使用するのは

というプラグイン。ユーザーごとに別の（嘘の？？）ユーザー名を表示させることができますので大変便利ですよ。

※作者リンクのURL=ユーザー名というセキュリティ上の問題は、今回の作者リンクでなく、テーマで出力されるリンクについても一度確認して、必ず対策を行うようにしてください。

これを含め、WordPressの不正ログインなどを限りなく防ぐ方法についての記事を書いていますので

を参考に対策されることをお勧めします。

作者の書いた記事一覧へのリンクを削除するには

作者の記事一覧リンクについては一部の情報ではサイト内部リンクを張り巡らすことができてSEO対策になる！！と言われていますが、新着記事だの関連記事だの、カテゴリーやタグへのリンクだのといろいろなところに内部リンクが存在しますから、必ずしも作者一覧へのリンクが必要か？ということになると「うーーーん・・・」という感じだと私は感じます。

そこで今回作成した作者情報BOXに表示される「作者の記事一覧はこちら」というのが必要ない（つまり作者の記事一覧へのリンクが必要ない）場合は、以下のようにソースを変更してください。

「author-pro.php」の元のソース

<section id="profile">
<div class="author-image">
<?php if(wp_is_mobile()): ?>
<?php echo get_avatar( get_the_author_meta('ID'), 300 ); //アバター表示?>
<?php else: ?>
<?php echo get_avatar( get_the_author_meta('ID'), 120 ); //アバター表示?>
<?php endif; ?>
</div>
<div class="author-prof">
<ul>
<li>記事の作者: <strong><?php the_author(); ?></strong></li>
<hr>
<li class="prof-descri"><?php the_author_meta('user_description'); //プロフィール情報欄に入力したもの?></li>
<hr>
<li class="prof-listlink">作者の記事一覧は<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">こちら</a></li>
</ul>
</div>
<br style="clear:both;">
</section>

を

<section id="profile">
<div class="author-image">
<?php if(wp_is_mobile()): ?>
<?php echo get_avatar( get_the_author_meta('ID'), 300 ); //アバター表示?>
<?php else: ?>
<?php echo get_avatar( get_the_author_meta('ID'), 120 ); //アバター表示?>
<?php endif; ?>
</div>
<div class="author-prof">
<ul>
<li>記事の作者: <strong><?php the_author(); ?></strong></li>
<hr>
<li class="prof-descri"><?php the_author_meta('user_description'); //プロフィール情報欄に入力したもの?></li>
</ul>
</div>
<br style="clear:both;">
</section>

へ変更してください（作者一覧へのリンク記述を削除するだけです）。

ページ上部へ戻る▲

おまけ　ユーザー画像（アバター）にGravatarを使わない方法

プラグインなしでGravatarの代わりにアップロードした画像を使う方法が私が勝手に師と仰ぐ「寝ログ」さんの記事プロフィール画像を自前で設定できるようにするWordPressカスタマイズ方法で紹介されていましたが、私の環境ではデフォルト画像が最後に登録したユーザー画像になってしまいちょっと具合が悪かったので、同じ機能を持つプラグインを探したところ

というのがありましたので私はこちらを使用しています。

設定もほとんどありませんし、ユーザープロフィール編集画面で画像を指定するだけでGravatarなしにできますから大変便利です。

ページ上部へ戻る▲

おまけ　プロフィールの「プロフィール情報」欄でhtmlタグを使えるようにするには

今回紹介する方法では「プロフィール情報」に入力した内容が説明として出力されます。

が・・・このプロフィール情報欄ではセキュリティ上の問題からhtmlタグやphpプログラムの使用ができないようになっています。

また、改行や２重改行によるpタグの自動付与機能も効かないので、すべての文章がザーッと表示されるだけになってちょっと残念な感じになります。

何とかならないか？で発見したのがWordPressの「プロフィール情報」欄でHTMLタグを使えるようにする方法さすがは先人の知恵！！これを解除する方法が掲載されていました。

簡単なコードを挿入するだけで簡単に解除できます

コード泥棒になってしまうので、コードそのものや詳しい説明は上記リンク先サイトをご覧ください。

前述しましたが、複数の人がサイトへの登録を行うようなサイト、複数の人で管理を行うサイトではプロフィール情報欄へコードの入力ができてしまうことで、セキュリティに穴をあけることになってしまいますから、上のリンク先ページの中でも特定ユーザーに対してのみ許可する方法をおすすめします。

1冊ですべて身につくWordPress入門講座

これからはじめる人・駆け出しのWebデザイナーに向けて シリーズ27万部以上の大ヒット! 「1冊ですべて身につく」の最新作が新登場! 今度は世界中で大人気のWordPress! この本でWebサイトが作れる!著:Mana

¥2,200 （2023/09/23 02:30時点 | Amazon調べ）

Amazonで見る

楽天市場で探す

Yahooショッピングで探す

ポチップ

WordPressデザインレシピ集

WordPressによるWebサイト制作のための，究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで，余すところなく集めました。著:狩野 祐東

¥2,905 （2023/09/19 01:53時点 | Amazon調べ）

Amazonで見る

楽天市場で探す

Yahooショッピングで探す

ポチップ