「この記事を書いた人」を手作りして記事下ウィジェットに表示するカスタマイズ方法

今日は、この記事の下に表示されている「この記事を書いた人」の作り方をご紹介します。
こんな感じのボックスです。ただし、記事を書いている人が複数の場合は使えません。あくまでおひとり様専用です♪

記事を書いた人の簡単なプロフィールを記事下に載せる

Luxeritasだと、記事下には投稿者名が表示されるようになっています。

関連記事ルクセリタステーマで簡単にカスタマイズできる投稿者リンク

この投稿者のリンクをたどれば、プロフィールページにジャンプし、そこで記事を書いた人の略歴を知ることが出来ます。
しかし、ここまでたどって著者情報を知ろうとしてくれる人の割合は低いはずです。
ましてや、検索エンジンから初めて訪問してきた人などであればなおさらです。
たいてい、目的の記事を読めばサヨナラではないでしょうか。

わざわざ見てもらえないのであれば、ついでに見てもらいましょう！
ということで、「この記事を書いた人」を手作りして記事下に貼ってみます。

プロフィール画像の準備をする

1. ボックスサイズとのバランスを考えて、横幅80px程度のプロフィール画像を用意します。

   

2. プロフィール画像に「author-img.png」という名前をつけてローカルに保存しておきます。
3. 画像の準備が出来たら、FTP転送ツールを使用して/wp-content/uploads/フォルダにアップロードします。

ウィジェットを用意する

開く「外観」「ウィジェット」

1. 記事下ウィジェットの位置に「#1 アドセンス(Luxeritas オリジナル)」を追加します。



2. タイトル欄には何も記入しません。
3. 内容欄に以下のコードを記述します。

<!--20180612-->
<div class="authorbox">
	<span class="authorbox-title">この記事を書いた人</span>
	<div><img class="profile-img" src="/wp-content/uploads/author-img.png" width="80" height="89"><h4 class="author">どらみ</h4><p>ここに自己紹介文を入力します。コンテンツの横幅にも影響を受けますので、文字数というよりは表示した時に4行程度になると収まりがいいと思います。工夫して自己紹介文を簡潔にまとめましょう。プロフィールページへのリンクをボックス内に貼る時は右記のように記述します。「<a href="/profile/">プロフィールはこちら</a>」などです。</p></div>
</div>

※1行目の<!–20180612–>は自分用の覚え書きでサイト上には表示されません。ウィジェットを作成した日を記入しておくと便利です。



コピーした時は応援して帰ってね♡

参考になった48
4. コンテンツの最大幅1280px、サイドバーの幅336pxで記事下ウィジェットに表示した場合のサンプルは以下の通りです。



5. コンテンツの幅が狭くなると自己紹介文がプロフィール画像の下に回り込みます。



6. 「#1 アドセンス(Luxeritas オリジナル)」の他の設定は以下の通りです。



7. このウィジェットを表示しないページ :　で「投稿ページ」以外にチェックをつけます。



8. 固定ページにも表示したいけれど、プロフィールページには表示させたくない、などという場合は、「このウィジェットを表示しないページ :」で固定ページのチェックを外し、表示させたくない固定ページの記事IDを調べて、指定ページ欄に「7494」などと記入します。

スタイルを記述する

子テーマのスタイルシートに以下のコードを追記します。なお、ご利用のFontAwesomeのバージョンによってCSSが異なります。サイトにあったものをお使いください。また、画像サイズによって調整の必要な余白などが異なってきますので、下のコードで完全に再現できないケースもあります。

Font Awesome 4 のCSS

/* この記事を書いた人 */
.authorbox {
	position: relative;
	margin: 50px 0 30px; /* 自サイトに合わせて調整必要 */
	padding: 6px 10px 9px;
	border: 2px solid #444; /* ボックスの囲み線の色 */
}
.authorbox .authorbox-title {
	position: absolute;
	top: -32px;
	left: -2px;
	padding: 7px 12px 8px;
	height: 32px;
	line-height: 19px;
	font-size: 13px;
	background: #333; /* タイトルの背景色 */
	color: #ffffff; /* タイトルの文字色 */
	font-weight: bold;
}
.authorbox .authorbox-title:before {
	font-family: FontAwesome;
	content: "\f007";
	margin-right: 5px;
	display: inline-block;
	color: #fff;
}
.authorbox p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 21px;
}
.profile-img{
	display: block;
	margin: 5px 15px 15px 0; /* 上 右 下 左 */
	float: left;
}
h4.author{
	margin: 5px 0 5px 95px;
	border-left: solid 5px #999;
	padding: 0 0 0 5px;
	line-height: 22px;
	font-size: 18px;
	font-weight: 700;
	color: #444; /*見出しの左側の線の色 */
}

Font Awesome 5 Free のCSS

/* この記事を書いた人 */
.authorbox {
	position: relative;
	margin: 50px 0 30px; /* 自サイトに合わせて調整必要 */
	padding: 6px 10px 9px;
	border: 2px solid #444; /* ボックスの囲み線の色 */
}
.authorbox .authorbox-title {
	position: absolute;
	top: -32px;
	left: -2px;
	padding: 7px 12px 8px;
	height: 32px;
	line-height: 19px;
	font-size: 13px;
	background: #333; /* タイトルの背景色 */
	color: #ffffff; /* タイトルの文字色 */
	font-weight: bold;
}
.authorbox .authorbox-title:before {
	font-family: "Font Awesome 5 Free";
	content: "\f007";
	margin-right: 5px;
	display: inline-block;
	color: #fff;
}
.authorbox p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 21px;
}
.profile-img{
	display: block;
	margin: 5px 15px 15px 0; /* 上 右 下 左 */
	float: left;
}
h4.author{
	margin: 5px 0 5px 95px;
	border-left: solid 5px #999;
	padding: 0 0 0 5px;
	line-height: 22px;
	font-size: 18px;
	font-weight: 700;
	color: #444; /*見出しの左側の線の色 */
}

見出しの擬似要素をなんとかする

当サイトで紹介している記事本文見出し4の中に「擬似要素」を使用したものがあります。
これでh4の見出しを定義していると、今回のボックスデザインで使用している見出しにも擬似要素が適用されてしまいます。

これを回避する方法はいくつかありますが、一番簡単なのは、追加した見出しh4のスタイルを削除してデフォルトに戻してしまうことです。
例えばこれです。

/* 個別投稿見出しh4 */
.post h4{
	border-left:none;
}
.post h4:before {
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	font-weight: 900;
	margin-right: 7px;
	color: #1584e6; /* アイコンの色 */
}

そもそも、見出しのh4まで使う人、少ないですものね。

上のスタイルを削除することで記事の見出しはデフォルトに戻ります。

見出しの線の色だけを変えたい時は、下のスタイルを追加します。

/* 個別投稿見出しh4 */
.post h4{
	border-color: #1584e6;
}

お試しください^^

あとがき

記事下にプロフィールを表示させるプラグインもあります。

Fancier Author Box by ThematoSoup

「Fancier Author Box」を使用して自動的に作成された記事下のプロフィール欄です。

情報は「ユーザー」の「あなたのプロフィール」から引用されています。
なかなかソックリにできたでしょ^^
記事を書く人が2人以上いる場合は、こちらのプラグインをご利用ください。設定画面も日本語なのでわかりやすいと思います。

Simple Author Box

「Simple Author Box」を使用して作成したプロフィール欄です。

設定画面が英語なので使い勝手が悪いです。

真剣にやればもっといろいろカスタマイズできます。
ただし一度有効化すると「停止」する時に、英語で理由を聞かれます。面倒に感じる方は利用を見合わせた方がいいです。

記事下の著者情報に関して

私もサイトを作り始めてから半年間は、このような著者情報を表示していませんでしたし、それどころかプロフィールページですら入れ物だけしか作っておらず、中身はありませんでした。
確かに、記事数も少なく訪問客も少ないうちはプロフィールにまで気が回らないのが現実だと思います。
それに、自分のプロフィールなんて誰が興味あるの！？と思っちゃいますよね。
でも、サイトの訪問者をよくよく分析してみると、7割近くが新規の訪問者であることがわかります。（当サイト6月調べ）

7ヶ月経ってもこれですから、毎日「はじめまして」の挨拶を欠かしちゃいけないってことですね。
どの記事を読んでも目に入る著者情報に、もしも読者を惹きつける魅力があったらどうでしょう！
置かない手はなさそうですね^^