Simple Author Boxで著者情報を設置し、フォローボタン回りを改善する ~Lightningカスタマイズ第4回

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

2017-03-22Lightning

質問者の写真

「Follow me」が重たく見えちゃうよ~

それに私自身についても知って欲しい! 

※現在はプラグイン無しで導入しています。LightningもBootstrapテーマですので、導入できます。以下の記事を御参照下さい。

「Follow me」を変えよう

デフォルトの「Follow me」は、かなり重たく見えます。

いわゆるバイラルデザイン、インパクトはあります。
ですが、これだけのスペースをとるならアイキャッチを使ったりなど、もっと作り込むべきじゃないかと思います。
そうした方向でカスタマイズしたい方は、こちらの記事が参考になると思います。

下のリンクは上の記事を元にして書かれたもの。
実際に設置しているので、あわせて紹介しました。

著者情報を設置する

しかし私は「強調するポイントは絞るべき」という考えの持ち主。
あれもこれも目立たせようとすれば雑然としてしまい、かえってどれも目立たなくなると思うからです。
そのため代わりに「著者情報」を設置することにしました。

著者情報の見本

私だとこんな感じです。

記事下に著者情報を設置することのメリット

記事を通じて自分をアピールできる

自分自身を思い出してみて下さい。
ある記事を最後まで読んで面白かった場合には「この記事を書いたのは、どんな人だろう?」と思ったりしませんか?
そこで著者情報を記しておけば、確実に目を通してもらえます。

記事に説得力を与えることができる

上記の逆です。
記事について「どうなんだろう?」と疑問を感じたとき、執筆者の特性を付すことで説得力を与えることができます。

モバイルを考慮した場合の場所としてベスト

プロフィールを設置するのは通常サイドバーかフッター。
しかしPCならともかく、モバイルだとサイドバーは画面下部に追いやられますし、フッターまではまず間違いなくスクロールしてもらえません。
それゆえ来訪者に見て貰える範囲へプロフィールを置くのが望ましいです。
だとすると、記事上か記事下。
記事上は鬱陶しいので記事下ということになるでしょう。

直下にフォローボタンを配置することで反応してもらいやすくなる

異性に告白するとしましょう。

「恋人になってください!」
「私はこういう人物です→恋人になってください!」

全然違うと思いませんか?

読者へのアプローチもこれと同じ。
記事だけでなく人物まで知ってもらえた分、フォローしてもらいやすくなります。
著者紹介まで目を通している時点で一定の関心は抱いてもらえてます。
さらに、その関心をフォローへの動機付けに用いるという理屈です。

著者情報を設置する手順

1 プラグイン「Simple Author Box」をインストールする

著者情報を設置するプラグインとして有名なのは「Simple Author Box」、「Fancier Author Box」、「VK Post Author Display」などがあります。

私は「Simple Author Box」を選びました。

このプラグインが他二つと比べて優れているのは柔軟性

コードをテンプレート(single.phpなど)に差し込むことで任意の位置に表示することができます。

「記事下」の、さらに「どこに差し込むか」。
レイアウトを考えるにあたって、これができるとできないとでは大違いですので。
(SEO的な観点でも。著者情報はaside要素に振り分けるべきでしょうし)

一方で、他二つは「記事の最新情報を表示できる」という長所があります。

あとはデザインの差。
この辺りは好みの問題ですので、各自で好きなプラグインをお選びください。

以下では、「Simple Author Box」の利用を前提に説明していきます。

2 「Simple Author Box」を設定する

(位置を調整したい場合、)次のコードをテンプレートの表示させたい位置に挿入する

<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>

私はページナビの下に設置しています。

デザインなどを変更したい場合は設定を変更する

下の記事の説明が詳しいです。

設定が反映されない場合

他のプラグインなどと競合して、設定しても反映されない場合があります。
その場合はプラグインのファイルを直接編集すれば反映されます。

質問スレに「過去ログ読め」とあるくらい、割とある現象みたいですね。

なお、私はデフォルトのまま使っています。
それで特に困りませんので。
画像サイズだけCSSでいじって調整しています。

3 WordPressのユーザー情報を編集する

3-1 編集する場所

管理画面から「ユーザー→あなたのプロフィール」を開きます。

wpuser01

開いてスクロールしていくと、下にこんな画面が出ます。

3-2 プロフィール写真を登録する

Gravatar に登録する方法と、プラグイン「Simple Local Avatars 」を用いた方法があります。
どちらでもお好みで。
私は前者でやっていますが、登録が面倒くさいという方は後者の方がいいでしょう。
説明は割愛します。

3-3 プロフィール情報を編集する~改行できない場合などの対処

BOXに直接書き込みます。

問題は改行やリンク。
BOX内で改行してもサイトでは一文で表示されてしまいますので、htmlタグによって対処します。
しかし<br>や「target=”blank”」を打ち込んでも、「プロフィールを更新」すると消えてしまう現象が発生することがあります
その場合は子テーマのfunction.phpに次のコードを記入して下さい。

remove_filter('pre_user_description', 'wp_filter_kses');
add_filter('pre_user_description', 'wp_filter_post_kses');

これでちゃんと保存されます。

参考記事:きほんのき様

3-4 SNSのアドレスを記入する

「Simple Author Box」にはフォローボタン表示機能があります。
これを利用する場合は、表示させたいSNSのアドレスを記入してください。
特にこだわりがないなら本機能を使ってボタン表示するのがよいと思います。
私は利用していないので全て空欄にしています。

4 SNSフォローボタンを設置する

以下は「Simple Author Box」の機能でSNSフォローボタンを設置しなかった場合です。
(いずれにしても「feedly」は設置する必要があるでしょうが、ここでなくシェアボタンの場所に置いてもいいと思います)

公式ボタンを採用した理由

私は直下に公式のボタンを設置しています。
理由は、

  • ボタンそのものに「フォローしてください」とか「Follow」の文字があり、読者にわかりやすい。
  • かつ小さめで自己主張しすぎない。

いずれフォントを利用して、似た感じに作り替えようとは思っています。
作り替えました。冒頭紹介の記事を御覧下さい。

ボタン取得

公式ボタンは以下のページにて。順番に作業を進めていけばコードが表示されます。

テンプレートファイルに貼り付け

手順2で「Simple Author Box」をコードで設置した場合は、その直下に貼り付けます。
そうでない場合は各自で位置調整してください。
私の例だと、「Simple Author Box」とあわせて次の通りとなります。

<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>
<a href="https://twitter.com/rin_tenmagawa" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @rin_tenmagawa</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttps%3A%2F%2Fwordpress.kimoota.net'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>

CSSで整形する

以下のコードを子テーマのstyle.cssに加えます。

/************************************
** feedlyフッター
************************************/
#feedlyFollow{margin-bottom:
 1.2em !important;
}

結論

解答者の写真

ここに挙げたのは、あくまで一例。
他の人の記事も参考にして、自分に合ったレイアウトを考えてみて。
Lightningのカスタマイズはまだまだ続くわよ!