【WordPress】「この記事を書いた人」をウィジェットで表示する方法。プラグインもPHP修正も不要!

ブログ運営

「この記事を書いた人」を表示するプラグインとして有名な「Fancier Author Box」は、3年以上更新されていません。

今後、WordPressがバージョンアップした場合に不具合が可能性もあるため、プラグイン使わずに設定することにしました。

やりたいこと

まず、今回「この記事を書いた人」を表示させる際の前提として「プラグインは使わない」ことを前提としました。

更に、可能であれば Function.php などのPHPファイルも修正したくはありません。(面倒くさいから)

というわけで、今回はウィジェットで設定することにしました。
ウィジェットを使えば、プラグイン不要・PHPを修正する必要がありません。

【完成イメージ】

「この記事を書いた人」用定型文の作成

「この記事を書いた人」のために、プロフィール画像と自己紹介文を用意します。

「この記事を書いた人」プロフィール画像のアップロード

プロフィール画像(サイズは100~90px程度)を準備します。
スタイルシートの設定を省きたい場合には、余白を意識した画像にすると良いです。
余白を意識した画像というのは、本来であればスタイルシートで設定する「Padding」に相当する余白を入れて作っておくということです。

余白あり余白なし
余白を意識した画像(イラストの周囲に余白を入れた状態)余白を意識しない画像(イラストをいっぱいにした状態)

作成した画像をアップロードしたら、URLを調べておきます。

画像のURLの調べ方

1.WordPressでメディアの一覧を開き、「編集」をクリックします。

Wordpress画面01

2.編集画面の一番右端にファイルのURLが表示されます。

「この記事を書いた人」自己紹介文の作成

自己紹介文を作成します。
名前をクリックした時に設定するaタグで遷移する先は、TwitterやFacebookなどのSNSが良いでしょう。

また、個別にプロフィールページを作成されている場合は、「…more」の部分にリンク先として設定しておきます

画像位置について

WordPress(SimplecityとSTINGER2を利用した場合)のimgタグで指定できる画像位置は、以下の4種類あります。

「この記事を書いた人」で使う場合は、「alignleft」がおススメです。画像の位置

テーマによっては異なる可能性がありますので、画像位置が思うような位置にならない場合には、試しに投稿画面でプロフィール画像を挿入して確認してください。

ウィジェットの設定

自己紹介文の準備ができたら、あとはウィジェットの設定を行えば完成です。

1.WordPress で「外観」から「ウィジェット」をクリックします。

2.好きなウィジェットの位置に「テキスト」をウィジェットを追加します。
今回はサイドバーウィジェットを選びました。

3.タイトルを設定します。

4.編集状態を「テキスト」にして、事前に作成しておいた自己紹介文を貼り付けます。

5.「保存」したら完了です。
リンク先が正しく遷移するか、画像は正しく表示されているかなど確認してください。

プロフィール画像作りにおすすめの iPhone アプリ

プロフィール画像作成におすすめのiPhoneアプリをご紹介しています。
良かったら、本記事と合わせてご覧ください。

【iPhone】プロフィールに使いたい!かわいい似顔絵作成アプリ『Mooone』
プロフィールにかわいい似顔絵を使いたいと思いませんか? 今回はそんな方に是非おススメしたいiPhoneアプリ『Mooone』をご紹介します。 Moooneで作れる似顔絵 早速ですが、まずは”百聞は一見に如かず”ということで、Mooon...

コメント