[自分用メモ][WordPress] 「この記事を書いた人」を追加する方法

これも自分用メモ。
WordPressを使用しているとき、記事中の一番最後に、「この記事を書いた人」などを追加する方法を書いておく。
参考にしたWebサイトは以下のところ。
ウィジェットを用意する
「外観」 -> 「ウィジェット」
1. 記事下ウィジェットの位置に「#1 アドセンス(Luxeritas オリジナル)」を追加する。
2. タイトル欄には何も記入しない。
3. 内容欄に以下のコードを記述する。
<!--20190331--> <div class="authorbox"> <span class="authorbox-title">この記事を書いた人</span> <div><img class="profile-img" src="https://blog.komeho.info/wp-content/uploads/2019/03/nenga_hanko2-2.jpg" width="80" height="89"><h4 class="author">kometchtech</h4><p style="font-size: 13px;">うつ病を患いながら、IT業界の末席にいるおっさんエンジニア。科学計算をしたことがないのに、HPC分野にお邪魔している。</p><p style="font-size: 13px;">興味のある分野で学習したことをblogにまとめつつ、うつ病の経過症状のメモも置いておく日々。</p><p style="font-size: 13px;">じつはRouterboard User Group JPの中の人でもある。</p</ br><p><a href="https://www.amazon.jp/hz/wishlist/ls/1ARVJBCCCNPLV"><b>Amazon欲しいものリスト</b></a> / Arm板を恵んでくれる人募集中</p></div> </div>
4. 「#1 アドセンス(Luxeritas オリジナル)」の他の設定は以下の通り。



スタイルを記述する
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; /*見出しの左側の線の色 */ }
見出しの擬似要素をなんとかする
/* 個別投稿見出しh4 */ .post h4{ border-color: #1584e6; } .wpp-post-title { font-size: 13px; } .wpp-excerpt { font-size: 12px; }
これ以外にもプラグインを使用する方法もある模様。