WordPress:記事の著者情報を簡単に表示できる「Simple Author Box」

  • Posted on
  • Category : WordPress
WordPress:記事の著者情報を簡単に表示できる「Simple Author Box」

少し気になり触ってみたので、備忘録も兼ねてご紹介。「Simple Author Box」は記事の著者情報を簡単に表示させることができるWordPressプラグインで、手軽に表示できるのはもちろん、見栄えに関しても幾つか用意されている設定項目を使うことでCSSなどを弄らなくても簡単に変更することができます。

※紹介している内容やキャプチャなどは、WordPress Ver 4.0でテーマはTwenty Fourteenを使用した際のものになります。

WordPress:記事の著者情報を簡単に表示できる「Simple Author Box」 目次

  1. インストール・有効化
  2. 各種設定

1. インストール・有効化

  1. 管理画面のプラグインから「Simple Author Box」を検索してインストール、もしくは「Simple Author Box」からダウンロードしてFTPなどを使用してアップロード。
  2. プラグインを有効化するだけで記事下に著者情報が表示される(任意の箇所に表示することも可能で、詳しくは後述します)ようになり、管理画面の「設定」の項目に追加される「Simple Author Box」から各種設定を行うことができます。

※もしプラグインを有効化しても表示されない場合は、一度「設定 > Simple Author Box」のページ下部にある「変更を保存」のボタンを押して保存してみてください。

目次へ

2. 各種設定

各項目の表示・非表示や装飾など設定は「設定 > Simple Author Box」から変更することが行うことができます。
設定項目は大きく4つに分類されており、簡単な説明になりますがそれぞれ以下のような設定ができるようになっています。

General options

General options

General optionsでは各種表示設定を行うことができ、アバターやソーシャルアイコンのスタイルを指定することもできます。

Manually insert the Simple Author Box
通常は記事下の部分に表示されるんですが、それを任意の場所に表示したい場合にこの項目を「YES」にすることで表示でき、その際に表示した際の上下のマージンを指定することができます。
任意で表示したい場合は以下をテンプレートに記述することで表示されます。
<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>
Hide the author box if author description is empty
この項目を「YES」にすると、プロフィール詳細画面にある「プロフィール情報」に何も記述がされていない著者に関しては表示されないようになります。
Author avatar image style
プロフィール画像(アバター)の見栄えを選択できる項目で、「Square」は正方形に、「Circle」は円形にそれぞれ変更することできます。 プロフィール画像に関しては「Gravatar」に登録しているものや「Simple Local Avatars」などのWordPressプラグインで指定した画像などを表示させることができます。
Rotate effect on author avatar hover
この項目を「YES」にすると、プロフィール画像をhover時に回転(少しだけですが…)させるエフェクトをつけることができます。
ただし、先ほどの「Author avatar image style」の項目で「Circle」を指定している場合のみ有効のようです。
Show author website
この項目を「YES」にすると、プロフィールで入力されている「ウェブサイト」を表示させることができます。
また、「YES」にした場合は新たに3つの項目が表示され、表示位置の左右指定、リンクを新しいタブで開くか、そのリンクにnofollowを付加するかどうかを設定することができます。
Social icons type (colored background or symbols only)
「Symbols」と「Colored」それぞれの見栄え

プロフィールで各種ソーシャルアカウントの項目が記述されている場合に表示されるソーシャルアイコンの見栄えを指定することができ、画像はそれぞれ「Symbols」と「Colored(2パターン分)」の設定時をキャプチャしたものです。
「Symbols」の場合はこの画像の右側のような見栄えのみとなりますが、「Colored」を選択した場合は任意でいろいろと変更することができ、アイコンの形、hover時のエフェクト、ロングシャドウやボーダーの有無などを指定することができます。

また、このプラグインを有効化した際にはプロフィール設定画面に沢山のソーシャルアカウント用の項目が追加されます。
人によっては増えすぎてわかり辛いと感じる方もいるかもしれませんが、以下32種類の項目が追加されます。

  • Add This
  • Behance
  • Delicious
  • Deviantart
  • Digg
  • Dribbble
  • Facebook
  • Flickr
  • Github
  • Google
  • Google Plus
  • Html5
  • Instagram
  • Linkedin
  • Pinterest
  • Reddit
  • Rss
  • Sharethis
  • Skype
  • Soundcloud
  • Spotify
  • Stackoverflow
  • Steam
  • StumbleUpon
  • Tumblr
  • Twitter
  • Vimeo
  • Windows
  • WordPress
  • Yahoo
  • Youtube
  • Xing
Open social icon links in a new tab
表示された各ソーシャルへのリンクを新しいタブで開くかどうかを選択します。
Hide the social icons on author box
この項目を「YES」にすると、プロフィールで各種ソーシャルアカウントの項目が記述されている場合でも表側では表示されないようになります。

Color options

Color options

Color optionsはその名の通りカラーを設定できる項目で、リンク・背景色・アイコンなどのカラーを任意で設定することができます。

Typography options

Typography options

Typography optionsではフォントファミリーやサイズを指定することができる項目で、一括でなく各項目ごとにそれぞれ設定することができます。
フォントファミリーは名前・ウェブサイト・プロフィール情報とそれぞれの項目毎に指定可能で、プルダウン選択で簡単にGoogle Fontsを指定することもでき、フォントサイズは名前・ウェブサイト・プロフィール情報・ソーシャルアイコンをそれぞれスライダーを使って値を変更するだけで指定することができます。
また、一番下部にある「Author description font style」ではプロフィール情報のフォントスタイルをイタリックに変更するかどうかの選択ができます。

Miscellaneous options

Miscellaneous options

Miscellaneous optionsでは以下のような設定を行うことができます。

Disable Font Awesome stylesheet
各種ソーシャルアカウントを表示する際に「Font Awesome」のWebフォントを使用しているようなので、既に他の部分で使用するために「Font Awesome」を読み込んでいるという場合はこの項目を「YES」に変更します。
Load generated inline style to footer
スタイルが記述される場所をフッター(ソース下部)にしたいという場合は、この項目を「YES」に変更します。

目次へ

以上かなりざっくりではありますが、著者情報を簡単に表示させることができるWordPressプラグイン「Simple Author Box」のご紹介でした。
同じように著者情報を簡単に表示できるプラグインとして紹介されていることが多い「Fancier Author Box by ThematoSoup」とは違って、最近の記事を表示させたりそれらをタブで切り替えるといった機能はついていないのですが、単純にプロフィールを表示させたいだけならいろいろと自分好みに見栄えを設定できる「Simple Author Box」のが便利だなという印象でした。

プラグインに関しての詳細やダウンロードは以下よりどうぞ。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。