著者情報（この記事を書いた人）をプラグインなしで設置する【旧版】（2016年実装・2026年追記）

AI利用について 当サイトでは、記事作成・編集・画像制作等の一部に生成AIを使用しています。掲載内容は運営者が確認・編集しています。

本記事は、記事の著者情報コーナーをプラグインなしで設置する方法の紹介です。
著者情報は読者を集める、記事をより強く訴えるという点において大きな役割を担っています。
しかしプラグインの過度な設置はサイトの速度を損なってしまいます。
できればプラグイン無しで設置したいところです。

※2026年現在はSVGアイコンの利用をおすすめします。本記事では公開当時の内容を残すため、Font Awesomeを前提として説明しています。

【2020/02/17大幅改訂】

デザイン変更、複数人（SNS含む）での自動出しわけに対応してみました。
著者別の新着記事リストはあえてつけていません（好みじゃないので）

こちらのサイトからアクセスが流れてきているので、ビジネス用途でも使えるように作り直してみました。

~~http://marketing-wizard.biz/blog/wordpress/wp-author-3ways/~~

中田様、記事を御紹介いただきありがとうございました。

【2026/07/09追記】

デザインとコードを一新した、本サイトで現在設置している著者情報ボックスを別記事に追加しました。
デザイントレンド的にはそちらの記事の著者情報ボックスをおすすめします。

著者情報ボックスにおける設計思想をUXとSEO（E-A-T-T）の観点から考える

AI利用について当サイトでは、記事作成・編集・画像制作等の一部に生成AIを使用しています。掲載内容は運営者が確認・編集しています。 WordPressテーマGeneratePressを使ったサイトリニューアルに伴い、1 ... <a title="著者情報（この記事を書いた人）をプラグインなしで設置する【旧版】（2016年実装・2026年追記）" class="read-more" href="https://wordpress.kimoota.net/author-box-no-plugin/" aria-label="著者情報（この記事を書いた人）をプラグインなしで設置する【旧版】（2016年実装・2026年追記）についてさらに読む">記事を読む<span class="screen-reader-text">：著者情報（この記事を書いた人）をプラグインなしで設置する【旧版】（2016年実装・2026年追記）</span></a>

wordpress.kimoota.net

本記事は、私がコードを書いた当時の時代背景およびthe author metaの説明・利用記録として残します。

著者情報設置の有用性

著者情報はSEOに直接関係ないとされるものの、読者へより深く訴求する点において大きな意義を有します。
このことは、私自身が先だって大きく痛感しました。

https://wordpress.kimoota.net/authorship/

本サイトのアクセスは少ないですが、それでも著者情報を設置してから明らかに伸びています。
まったく著者情報さまさまです。

著者情報の設置はプラグインがメイン

あちこちのブログを回っていると、大抵はプラグインを利用しているように見受けられます。
私も以前は使っていました。

しかし、ふと気づきます。

これ、プラグイン要らないのでは？

自分にもできそうなので関数を調べてみました。

著者情報を表示するテンプレートタグ「 the author meta」

まさにそのものがありました。

the author metaはパラメーターを入れると、WordPressに入力してある著者情報を吐き出してくれるテンプレートタグです

https://developer.wordpress.org/reference/functions/the_author_meta/

これさえあれば私でも作れます。
パラメーターは山ほどあれど、使うのは３つもないんですし。

ほか、get the author metaという関数も。

https://developer.wordpress.org/reference/functions/get_the_author_meta/

the author metaとget the author metaの違いは、前者が表示そのもの、後者はループなどで値を返す役割を担うものです。

これで勝てる！

完成図

基本バージョン

パソコン

モバイル

※現在はコード減らしたため、SNSアイコンは著者画像の下にあります。

シンプルバージョン

パソコン

モバイル

参考　旧バージョン

解説

基本バージョンのデザインは、いかにもプラグインにありそうな感じで作ってみました。

SNSアイコンはこちらを参考に作成しました。

https://kagesai.net/sns-follow-button-design/#s4

シンプルバージョンは、さらりと紹介したい方向け。
htmlもCSSも簡単に済むのが利点です。
利用にあたっては、見本通りに短文主体でお願いします（デザイン崩れるので）。

実装方法

１　WordPress管理画面を拡張する（基本バージョン用）

mu-Pluginsフォルダ（必須プラグイン）にコードを記述したPHPファイルを作成してください。
ユーザープロフィール画面にSNS URL入力欄が追加されます。
（functions.phpに記述しても動きますが、テーマを変更すると入力データを消えるためおすすめしません）

<?php
/**
* ユーザープロフィールにSNS項目を追加
*/
add_filter( 'user_contactmethods', function( $methods ) {

$methods['x_url'] = 'X（旧Twitter）URL';
$methods['facebook_url'] = 'Facebook URL';
$methods['bluesky_url'] = 'BlueSky URL';
$methods['codepen_url'] = 'CodePen URL';
$methods['website_url'] = 'Webサイト URL';

return $methods;
} );

２　アバター登録（していない人の場合）or画像の用意

アバターはGravatar で登録。
こちらがわかりやすいと思います。

https://blog-tip.com/wordpress/how-to-set-avatar/

使うのが１人でしたら、画像を直接リンクしても大丈夫です。
メディアライブラリにアップしてください（使うサイズにカットした上で）。

３　プロフィール入力

WordPressの「ユーザー」→「あなたのプロフィール」から必要な情報を先に入力します。

４　html

get_avatarはIDを入力することでアバターを返すのですが、ここで先程の「get_the_author_meta( )」が活きてきます。
あとはphp the_author_meta()に著者名とプロフィール情報を表示するパラメーター（コード内の”display_name”や”description”など）を入れて表示させています。

【】の中を自身の物と差し替えてから、テンプレートの任意の位置に貼り付けてください。

Authorはお好みで「この記事を書いた人」などにしてください。
直接打ってしまって大丈夫です。

基本バージョン

<div class="author-box">
<div class="author-name">
Author：<?php the_author_meta("display_name"); ?>
</div>
<div class="belle-box">
<div class="belle-img">
<?php echo get_avatar(get_the_author_meta( 'ID' ),【表示させたいサムネイルのサイズ　ex：「150」と入力】 ); ?>
</div>
<div class="author-sns">
<ul class="pfollow">
<li><a class="pemail psns" href="mailto:<?php the_author_meta("email"); ?>"><i class="fa fa-envelope"></i></a>
</li>
<li><a class="ptwitter psns" href="<?php the_author_meta("x_url"); ?>" target="_blank"><i class="fab fa-twitter"></i></a>
</li>
<li><a class="pfb psns" href="<?php the_author_meta("facebook_url"); ?>" target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
</ul>
</div>
</div>
<div class="belle-info">
<?php the_author_meta("description"); ?>
</div>
<div class="clearfix"></div>
</div>

FontAwesome5を前提としています。
4の方はTwitterのアイコンを次のものと差し替えて下さい。

<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>

メールはクリック（タップ）でクライアントソフトが開くようにしてあります。
１人で使う場合は以下の部分をコンタクトページのURLに差し替えてもいいでしょう。

<li><a class="pemail psns" href="mailto:<?php the_author_meta("email"); ?>"><i class="fa fa-envelope"></i></a> </li>

↓（コンタクトページを「contact」とした場合）

<li><a class="pemail psns" href="https://（サイトドメイン）/contact/"><i class="fa fa-envelope"></i><div>Mail</div></a>

１人で使うなら、アバターを利用するよりもメディアライブラリにアップした画像を使う方がトラブルが少ないと思います。
その場合は次の箇所を差し替えて下さい。

<?php echo get_avatar(get_the_author_meta( 'ID' ),【表示させたいサムネイルのサイズ　ex：「150」と入力】 ); ?>

↓

<img src="【画像URL】" width="【画像のサイズ】" height="【画像のサイズ】">

SNSの要素がいらない場合は<li>～</li>を削って下さい。
逆にSNSを付け加えたい場合は先述したサイトを参考にしてください。
<li>～</li>で追加できます。
再掲しておきます。

https://kagesai.net/sns-follow-button-design/#s4

シンプルバージョン

<div class="author-box">
<div class="author-name">Author：<?php the_author_meta("display_name"); ?>
</div>
<div class="belle-box"> 
<?php echo get_avatar(get_the_author_meta( 'ID' ),【表示させたいサムネイルのサイズ　ex：「150」と入力】 ); ?>
</div>
<div class="belle-info">
<?php the_author_meta("description"); ?>
</div>
<div class="clearfix"></div>
</div>

旧バージョン

<div class="author-box">
<div class="belle-img"><?php echo get_avatar(get_the_author_meta( 'ID' ), 【表示させたいサムネイルのサイズ　ex：「150」と入力】 ); ?></div>
<div class="belle-info">
<p class="belle-name"><?php the_author_meta("display_name"); ?></p>
<?php the_author_meta("description"); ?>
</div>
</div>

３　CSS

自分の環境に合うように微調整してください。

基本バージョン

/*基本パーツ*/
.author-box{
border:2px solid;
margin-top:25px;
display:flex;
}
.author-name{
border-bottom: dotted 1px;
padding:6px;
}
.belle-box{
float:left;
}
.belle-img2{
float:left;
}
.belle-img,.belle-img2{
margin:5px;
}
.belle-info{
font-size:13px;
padding:5px;
overflow: hidden;
}
.belle-info2{
font-size:13px;
padding:5px;
}
/* SNSボタンの間隔調整 */
.author-sns,.author-sns2{
padding:13px;
}
/* ボタン全体の装飾 */
.psns{
font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
display:inline-block;
width:40px;
height:40px;
font-size:22px;
transition:.5s;
text-decoration:none !important;;
}
/* ボタンマウスホバー時テキストカラー */
.psns:hover{
color:#fff !important;
}
/* Twitter */
.ptwitter{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.ptwitter:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* お問い合わせ */
.pemail{
border:solid 1px #f3981d;
color:#f3981d; 
}
/* お問い合わせマウスホバー時 */
.pemail:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ボタンの位置 */
.pfollow{
display:flex;
flex-flow:row wrap;
}
.pfollow2{
display:flex;
flex-flow:row wrap;
max-width:200px;}
/* ボタン同士の余白 */
.pfollow li,.pfollow2 li{
flex:0 0 33%;
text-align:center!important;
}
/* ボタンレイアウト調整 */
ul.pfollow,ul.pfollow2{
list-style-type:none!important;
padding:0!important;
}

シンプルバージョン

.belle-name{
font-size:16px;
}
.belle-box{
float:left;
margin:5px;
}
.author-box{
border:2px solid;
margin-top:25px;
display:flex;
}
.author-name{
border-bottom: dotted 1px;
padding:6px;
}
.belle-info{
font-size:13px;
padding:5px;
overflow: hidden;
}

旧バージョン

.belle-name{
font-size:16px;
}
.belle-img{
min-width:150px;
float:left;
}
.author-box{
border: 2px solid #f5f5f5;
display:flex;
}

まとめ

なぜか著者情報については、自作の設置方法を紹介した記事を見かけなかったんです（2016年当時）。
まだまだコードに慣れてなかった頃でしたが、頑張って調べて書きました。
これでプラグインを削除できました。

よかったら使ってみてください！

WRITTEN BY

天満川鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。

詳しいプロフィールはこちら

X CodePen Amazon

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る