好きな事を好きな時に好きなだけする

そんな人生最高じゃないですか。

よくみかける「この記事を書いた人」を表示させるプラグイン “Fancier Author Box”

   

最近よくみかける「この記事を書いた人」の表示。
最初はそれほど気にならなかったのですが、おそらくWordPressのプラグインだろうなと思ったので調べてみました。

案の定プラグインだったので、今回はそのプラグインの紹介をします。
当ブログで採用するのはまだ先になりそうですw

表示させた画像

Fancier Author Boxの設定

まずは設定方法から。

  1. WordPressにログインする
  2. プラグイン検索で「Fancier Author Box」を検索
  3. インストール後、プラグインの有効化

有効化するとすぐに表示が確認できます。
当ブログで試してみたところ、下記の画像のようになりました。

表示させた画像

デザインが崩れてしまっていますが、これは使っているテーマのCSSの影響をモロに受けてしまっているからですね。
この改善方法というか、デザインの変更方法も後で解説したいと思います。

色などのの簡単なデザイン変更や表示位置の変更などはFancier Author Boxの管理画面から可能です。

表示するプロフィール情報について

これはWordPressの
「ユーザー⇒あなたのプロフィール」の内容になります。

プロフィール変更画面

ブログ上の表示名とプロフィール情報などが表示されます。
またSNSの情報も登録すれば反映されるのでお好みに合わせてカスタマイズしてください。

写真についてですが、私は設定変更する項目がなかったのでプラグインで解決しました。
「Simple Local Avatars」というプラグインをインストールして有効化すると、先ほどのプロフィール編集画面にAvatarが追加されます。
(プラグインを使わない方法もあります)

Avatarが追加された画面

人の写真は読者がかなり興味を持つ部分でもあるので、慎重に選ぶと良いと思います。

Fancier Author Boxを導入しているサイトを紹介

事例1
LISKUL

事例2
マーケティングコンサルタント藤村正宏ブログ

事例3
アパレルメーカー 短パン社長奥ノ谷圭祐のブログ

デザインの変更・調整の方法

今回はプラグインを利用しているので、プラグインに含まれているcssファイルを編集することでデザインの変更などが可能になります。
「プラグイン⇒プラグイン編集」へ進んでください。

プラグイン編集の画面

Fancier Author Boxを選択して”fancier-author-box/css/ts-fab.css”をクリックします。
その中のコードでデザインが組まれています。
それぞれがどこのhtmlにcssを当てているのかはhtmlを見る必要がありますね。

下記がhtmlソースです。

<div id="ts-fab-below" class="ts-fab-wrapper">
  <span class="screen-reader-text">The following two tabs change content below.</span>
  <ul class="ts-fab-list">
    <li class="ts-fab-bio-link active"><a href="#ts-fab-bio-below">この記事を書いた人</a></li>
    <li class="ts-fab-latest-posts-link"><a href="#ts-fab-latest-posts-below">最新の記事</a></li>
   </ul>
<div class="ts-fab-tabs">
	<div class="ts-fab-tab" id="ts-fab-bio-below" style="display: block;">
		<div class="ts-fab-avatar">
                <img alt="" src="アバターURL" class="avatar avatar-80 photo" height="80" width="80">
               <div class="ts-fab-social-links">
                   ここにソーシャルリンクがくる
                </div>
		</div>
		
		<div class="ts-fab-text">
			<div class="ts-fab-header"><h4>private</h4></div><!-- /.ts-fab-header -->
			<div class="ts-fab-content"></div>
		</div>
	</div>
	<div class="ts-fab-tab" id="ts-fab-latest-posts-below" style="display: none;">
		<div class="ts-fab-avatar">
         <img alt="" src="アバターURL" class="avatar avatar-80 photo" height="80" width="80">
         <div class="ts-fab-social-links"></div>
		</div>
		<div class="ts-fab-text">
			<div class="ts-fab-header">
				<h4>最新記事 by private <span class="latest-see-all">(<a href="http://rasukasasu.com/author/private/" rel="nofollow">全て見る</a>)</span></h4>
			</div>
			<ul class="ts-fab-latest">
				<li>
					<a href="url">タイトル</a><span>日付</span> 
				</li>
				<li>
					<a href="url">タイトル</a><span>日付</span> 
				</li>
				<li>
					<a href="url">タイトル</a><span>日付</span> 
				</li>
		         </ul>
                 </div>
	</div>
		</div>
	</div>

これだとごちゃごちゃしていて分かりづらいと思うので、もう少し簡略化してみます。
嫌にならないでくださいね(笑)

<div id="ts-fab-below" class="ts-fab-wrapper">
  <span class="screen-reader-text">The following two tabs change content below.</span>

ここからタブの部分
  <ul class="ts-fab-list">
    <li class="ts-fab-bio-link active"><a href="#ts-fab-bio-below">この記事を書いた人</a></li>
    <li class="ts-fab-latest-posts-link"><a href="#ts-fab-latest-posts-below">最新の記事</a></li>
   </ul>
ここまでタブの部分

<div class="ts-fab-tabs">
ここから著者情報の部分
	<div class="ts-fab-tab" id="ts-fab-bio-below" style="display: block;">
		<div class="ts-fab-avatar">
                <img alt="" src="アバターURL" class="avatar avatar-80 photo" height="80" width="80">
               <div class="ts-fab-social-links">
                   ここにソーシャルリンクがくる
                </div>
		</div>
		
		<div class="ts-fab-text">
			<div class="ts-fab-header"><h4>private</h4></div><!-- /.ts-fab-header -->
			<div class="ts-fab-content"></div>
		</div>
	</div>
ここまで著者情報の部分

ここから最新記事情報の部分
	<div class="ts-fab-tab" id="ts-fab-latest-posts-below" style="display: none;">
		<div class="ts-fab-avatar">
                 アバター画像
                 <div class="ts-fab-social-links">SNSリンク</div>
		</div>
		<div class="ts-fab-text">
		記事のリストなど
                 </div>
	</div>
ここまで最新記事情報の部分
	</div>
</div>

う~ん(笑)こんな感じで大丈夫ですかね(笑)

あとはそれぞれのid名やclass名の部分を編集してあげれば問題ありません。
「プラグインのファイルを触るのは怖い」って方は、style.cssに追加で書いても大丈夫です。

まとめ

いかがだったでしょうか。
今回ご紹介したプラグインは非常に便利だと思いますが、多くの方が使っているため、デザイン的な問題がちょっとあるかなと個人的には感じています。
もし可能であればデザインを自分でカスタマイズして使えると良いですね。(もしかしたらカスタマイズの方法を紹介するかも)

また、WordPressを複数人で運営している場合は必須のプラグインとも言えるので、是非導入してみて下さい。

 - WordPress

adsensepc

adsensepc

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

WordPressの引越しをするなら「Duplicator」しかないでしょ!

WordPressのドメイン・サーバー移行を試みて諦めた人は多いのではないでしょ …

バズ部のブログが更新されないと思ったら、リニューアルしていた件について

バズ部はWEB周りの仕事をしている人なら知らない人がいないのではないかと思えるほ …

【忘備録】wa-track.comが出てきた!!その対処法とは

「運営しているサイトが急に表示されなくなり、wa-track.comが出てきた! …

簡単にアニメーションを追加することができる!!-WOW.js

アニメーションを追加したいけどjavascriptとか触れない・・・ そんなあな …

記事の目次を自動生成してくれるWordPressプラグイン「Table of Contents Plus」

前回に引き続き、WordPressプラグインに関する記事です! 今回は目次を自動 …

サイト修正で使える!メンテナンス中の表示をしてくれるプラグイン”WP Maintenance Mode”

私の毎日の日課はネットサーフィンなんですが(笑)、今日いつものようにネットサーフ …

no image
少しだけレンタルサーバーについて話してみる

こんにちは。 今日はサイトの運営で欠かすことのできないレンタルサーバーについて話 …

【忘備録】WordPressで寄稿者でも画像をアップロードできる方法

セキュリティーの面を考慮して寄稿者としてユーザーを追加したのですが、その場合、デ …

【永久保存版】Amazonアソシエイトのプラグイン「AmazonJS」導入の忘備録

ブログをやっている人でアマゾンアソシエイトのリンクを貼っている人は多いと思います …

【WordPressカスタマイズ】ブログをプチリニューアルしました

この記事でも紹介しているように、ワードプレスのテーマにSTINGERを使わせて頂 …