WordPressの著者情報をカスタマイズして記事下に表示する方法


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

利用するもの

手順

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

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

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

// 著者情報の拡張 ----------------------------------
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);

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

<?php dynamic_sidebar('single_author'); ?>

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

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

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

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

ということで先に足した情報も含め、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>
  1. CSSの調整を行います。この辺りは既存のCSSに合わせて、ご自由にされてください。
.author{
    .author-img{
        float: left;
        width: 15%;
    }
    .autor-meta{
        float: right;
        width: 80%;
    }
}

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