WordPressに著者表示「この記事を書いた人」をプラグインなしで追加する方法

WordPress

WordPressを複数人が記事投稿を行う場合、よくあるのが

「この記事を書いた人」

「ライター一覧」

ですね。

「ライター一覧」は、

WordPressで、ライター一覧 (投稿者一覧) と投稿者ごとの記事一覧を作成する方法
WordPressを複数人が記事投稿を行う場合、よくあるのが 「この記事を書いた人」 「ライター一覧」 で...

にまとめました。

「この記事を書いた人」については、プラグインを使って出すことも出来るようですが、自分が思ったような表示にならなかったり、細かな制御が出来ないので、今回、PHPでカスタマイズしてみました。

スポンサーリンク
スポンサーリンク

ブログの著者表示「この記事を書いた人」をPHPで実装

ブログの著者を表示させる「この記事を書いた人」は、Author Boxと言うそうです。

プラグインもいくつかあります。

有名なものでは、

Fancier Author Box (https://ja.wordpress.org/plugins/fancier-author-box/)

Simple Author Box (https://ja.wordpress.org/plugins/simple-author-box/)

といったプラグインがあります。

これらは悪くないのですが、最大の難点は、自由に配置出来ないことにあります。

例えば、以下のように

記事の上に「シンプルな著者情報の表示」

記事の下に「詳細な著者情報の表示」

を行うのは、プラグインでは難しそうです。

そこで、今回、ブラグインなしでPHPのみで「この記事を書いた人」を実装してみました。

「この記事を書いた人」の実装例

profile.php の作成

以下のように

シンプルな著作表示用の profilesmall.php と

詳細な著作表示用の profile.php を用意します。

シンプルな著作表示用の profilesmall.php

詳細な著作表示用の profile.php

これらのファイルをテーマの functions.php や single.php と同じ階層においておきます。

single.php の修正

投稿記事用の single.php を修正して、profilesmall と profile を挿入します。

場所は、記事の上に profilesmall で、記事の下に profile です。

以下は挿入例ですが、テンプレートによって少し違うかもしれません。

<?php get_template_part('profile'); //プロフィール ?>

のように、get_template_part を使います。

functions.php の修正

SNS の情報を取得するために、functions.php を修正します。

以下を追記します。

style.css を修正

見栄えを調整するために、スタイルシート style.css に以下を追記します。

以上で、著者表示「この記事を書いた人」を実装することが出来ました。

アバターの変更に、WP User Avatar プラグインを使う

次に、ユーザーのアバターとして画像ファイルを使おうとしたのですが、デフォルトのままでは、Gravatar というサイトでアバターを作って使う事しか出来ないようです。

そこで、やむを得ず、

WP User Avatar (https://wordpress.org/plugins/wp-user-avatar/)

というプラグインをインストールします。

これで、なんとかユーザーのプロファイル画面で、アバターの画像をアップすることが出来ました。

それにしても、デフォルトでアバター画像として、ローカルの写真とか画像を使えないってってどうよ。。

以上で、準備が出来ました。

「この記事を書いた人」を表示しない方法

  • SNSのフォローボタンを表示させたくない
  • SNSを利用していない
  • 特定のユーザーだけ「この記事を書いた人」を表示させたくない

というケースにも対応できています。

プロフィール情報を空欄にする

「プロフィール情報」に何も入力しないと、「この記事を書いた人」が一切表示されません。

逆に、1文字でも文字があれば表示されます。

管理者などは、「プロフィール情報」を書かない方がよいでしょう。

SNSのURLを入力しない

  1. Twitter
  2. Facebook
  3. Google+
  4. Instagram

などのSNSは、URLを入力しないとアイコンが表示されません。

使っていないSNSがある場合は未入力で保存すればOKです。

WordPressのおすすめ本

↓WordPressのおすすめ本はコチラ

WordPressのおすすめ本