[Wordpress] Customize to display author information at the bottom of the article body (It was quite easy to try)

【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)

公開日:2019年9月11日 カスタマイズ 使い方など
Knowledge Base メンテナンス

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

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

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

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

この方法で設置すると以下のように表示することができます(上はパソコン、下はモバイル表示)
【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)
【WordPress】記事本文下へ作者情報を表示するカスタマイズ(やってみたら結構簡単でした)
※ごめんなさい。作者の記事一覧リンクを付ける前にスクショを撮ってしまいました。各画像の一番下に「一覧を見る」と表示されるようになっています。このページ下にもこの方法を用いた作者情報を表示していますので色以外の部分はその通りになると考えてください(もしかして外していたらごめんなさい)。

書き忘れてました・・・・肝心の出力される情報のネタ元についてですが、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>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

ファイル名を「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ソースを見て気づかれた方もいると思いますが、アバターの画像サイズをパソコンとモバイルで変えてますのでモバイル時にボケることもありません。

WordPressプラグイン「Wp Polls」の日本語化ができないときの対処方法

【ha-Basic】テーマの本文上や任意の場所へ自動で目次を表示させる方法

【WordPress】パーマリンクが重複して「-2」などが自動付与されたときのちょっとおかしな現象を発見!?


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を表示できるようになります。
ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


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の末尾がな、な、なんとユーザー名そのものになっているではありませんか!!

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

対策は簡単、1つプラグインを追加して嘘?のユーザー名を作るだけです(笑)。

使用するのは

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

※作者リンクの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の代わりにアップロードした画像を使う方法が私が勝手に師と仰ぐ「寝ログ」さんの記事

で紹介されていましたが、私の環境ではデフォルト画像が最後に登録したユーザー画像になってしまいちょっと具合が悪かったので、同じ機能を持つプラグインを探したところ
というのがありましたので私はこちらを使用しています。

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

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

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

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

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

何とかならないか?で発見したのが

さすがは先人の知恵!!これを解除する方法が掲載されていました。

簡単なコードを挿入するだけで簡単に解除できます
※コード泥棒になってしまうので、コードそのものや詳しい説明は上記リンク先サイトをご覧ください。

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

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報