コピペ一発! 著者情報をWordPressにプラグインなしで設置する

この記事は約6分で読めます。

2016-12-23WordPressカスタマイズ

 

本とフィギュア 著者の精霊

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

著者情報設置の有用性

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

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

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

さて、あちこちのブログを回っていると、大抵はプラグインを利用しているように見受けられます。
具体的には、Simple Author Box Fancier Author Box がツートップという印象。
シンプルなのを好む人が前者、多機能型を好む人が後者な感じです。

私が使っているのは前者、決めた経緯はこちらです。

しかし使っていて、ふと気づきました。

これプラグインいらないんじゃないか?

プラグインは少なければ少ないに越したことがない。
大雑把には速度の問題と安定性の問題です。
これくらいなら自分にもできそう。

というわけで関数を調べてみました。

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

the author meta はパラメーターをぶちこめばWordPressに入力してある著者情報を吐き出してくれるテンプレートタグ。
まさにそのものがありました。

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

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

画像はどうするかと思っていたところ、これもget avatar というテンプレートタグが見つかる。

速度の関係で、サーバーに画像をアップロードして直接リンクを貼った方がいいです。

うし、これで勝てる!

完成図

上がSimple Author Box、下が自作。
まったく変わらないと思いません?

スマホ画面はこんな感じ。

作りかけのときですが、あえて回り込ませていないだけ。
(改行が目立つので、回り込ませない方がいいかなあと)
どっちがいいのかはしばらく様子みて決めようと思います。

実装方法

1 前提

WordPressの「ユーザー」→「あなたのプロフィール」から必要な情報を先に入力します。
アバターはGravatar で登録してください。
(プラグインを使う方法もありますが、本稿では減らすためにやっているので)

アバターはサーバーに画像をアップロードして直接リンクしてください。

2 html

表示したい場所に貼り付けて下さい。

<div class="author-box container-fluid">
<div class="author-row row">
<div class="belle-img col-sm-3">【画像のURL】</div>
<div class="belle-info col-sm-9">
<p class="belle-name"><?php the_author_meta("display_name"); ?></p>
<?php the_author_meta("description"); ?>
</div>
</div>
</div>

私の使っているテーマLuxeritasにはBootstrapが積まれていますので、それを前提に組んでいます。
Bootstrap無しのテーマに組む場合は、以下のコードを御利用ください。

<div class="author-box">
<div class="belle-img">【画像のURL】</div>
<div class="belle-info">
<p class="belle-name"><?php the_author_meta("display_name"); ?></p>
<?php the_author_meta("description"); ?>
</div>
</div>

get_avatarはIDを入力することでアバターを返すのですが、ここで先程の「get_the_author_meta(  )」が活きてきます。
あとはphp the_author_meta()に著者名とプロフィール情報を表示するパラメーターを入れるだけです。

3 CSS

.belle-name{
font-size:16px;
}
.belle-img{
min-width:150px;
}
.author-row{
 border: 2px solid #f5f5f5;
}

Bootstrapだとレイアウトに悩まなくていいので、装飾の調整のみで済みます。
それ以外のテーマだと、次の通り。

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

この場合の完成図はSimple Author Boxとほぼ同じになります。
マージンなどの細かい点は、各自で適宜加えてください。

4 Followボタンがないと寂しいという方へ

こちらの記事を御参照ください。

公式っぽいフォローボタンをCSSで作っています。
フォローボタンも含めてできあがった図はこちらです。

(※「いいね」ボタンは違います)

もっともらしく見えませんか?

まとめ

質問者の写真

著者情報って、プラグイン使うしかないと思ってたから助かる! 

 

解答者の写真
なぜか著者情報については、自作の設置方法を紹介した記事を見かけないのよね……
でもこれでSimple Author Boxを削除できたわ
そんな難しいものでもないから、みんなもよかったら使ってみて!