記事下に著者情報を掲載しているブログが増えてきているような気がします。 VK Post Author Display を利用すれば特に設定しなくとも、素敵な著者情報ができます。共同執筆中のブログWP-Dでも利用しています。 今回はこれではなく、自前でレイアウトを行いたいという方に向けた内容です。

利用するもの

• Author Profile Widget
  • 著者情報を表示のためのウィジェットを提供する
  • 当プラグインの制作者は WordBench 長崎のキタジマタカシさんです
  • 先日紹介した 郵便番号入力時に自動で住所入力 MW WP Formでの実装方法 で利用しているお問い合わせフォームプラグイン MW WP Form も彼の作品です
• functions.php
  • Author Profile Widget を設置するためのウィジェットエリアの追加

手順

1.まずは記事下に著者情報のウィジェットエリアを配置します。functions.phpに以下を追記し ウィジェットエリアを追加します。

[code lang=php]
// ウィジェットの有効化 ——————————-
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'シングル下著者情報',
'id' => 'single_author',
'description' => '',
'before_widget' => '<div class="author">',
'after_widget' => '</div>'
));
}
[/code]

2.ついでに著者情報の項目も拡張しましょう。同じく fouctions.php に記載します。今回は twitter と Facebook の項目を追加します。

[code lang=php]
// 著者情報の拡張 ———————————-
function add_social_user_meta($data){
//追加したい項目を定義します。
$data['twitter'] = 'twitterアカウント ( @ は不要 )';
$data['facebook'] = 'facebookのURL ( httpから記入 )';
return $data;
}

add_filter('user_contactmethods', 'add_social_user_meta', 10, 1);
[/code]

3.次に、先に作ったウィジェットエリアを記事下である single.php の中に追加します。この時に single.php においてループの中に設置するのがポイントです。上記のウィジェットを表示するためのコードは以下です。

[code lang=php]
<?php dynamic_sidebar('single_author'); ?>
[/code]

以上でテーマの編集は完了です。

4.設置ができたら、管理画面の外観→ウィジェットにおいて追加されているシングル下著者情報に著者プロフィールのウィジェットを追加します。Author Profile Widget プラグインを有効化することで、著者プロフィールウィジェットは表示されます。

5.著者情報の内容を編集します。ウィジェットの説明書きにある通り

“the_author_meta” フィールドを使用することができます。例： {user_login} アバターも表示できます。例：{avatar}、{avatar 95}

ということで先に足した情報も含め、HTMLのコーディングを行います。

[code lang=html]
<div class="author-img">
{avatar 100}
</div>
<div class="author-meta">
<h3>{display_name}</h3>
<p>{description}</p>
<ul>
<li><a href="/author/{user_login}/">
{display_name}さんの書いた記事はこちら</a>
</li>
<li><a href="https://twitter.com/{twitter}">Twitter はこちら</a>
</li>
<li><a href="{facebook}">Facebook はこちら</a>
</li>
<li><a href="{user_url}">Web サイトはこちら</a>
</li>
</ul>
</div>
[/code]

1. CSSの調整を行います。この辺りは既存のCSSに合わせて、ご自由にされてください。

[code lang=css]
.author{
.author-img{
float: left;
width: 15%;
}
.autor-meta{
float: right;
width: 80%;
}
}
[/code]

以上で今の記事下に表示されているような著者情報が利用できます。表示したい項目とレイアウトが自由にできるのは嬉しいですね。