【WordPress】プロフィール欄「この記事を書いた人」を実装する方法【プラグインなし】

この記事は約 9 分で読めます。

ブログ記事で「この記事を書いた人」というプロフィール欄を目にする機会があると思います。

記事の文末に囲みで設置してあるケースが多いですよね。

メディアなどで外部ライターに大量発注をかけて記事を書いているケースは例外として、通常は記事を書いた人のプロフィールが載っていると、記事自体の信頼性も得られやすいです。

WordPressの場合、使用テーマによっては予めサイドバー内にプロフィール入力用のウィジェットが用意されているケースはありますが、ブログ記事の一番下にプロフィール欄を設置する場合は一手間必要になることが多いと思います。

管理画面の基本機能では設置できないため、プラグインを使用している人も多いですよね。

プラグインを使った場合、機能実装という点では確かに便利なのですが、、、
今回は「なるべくプラグインは使わずに実装したい」という人向けに、プラグインを使わずに「この記事を書いた人」のプロフィール欄を設置する方法をご紹介します。

「この記事を書いた人」の設置方法

最初にお伝えしておきますが、本手順ではPHPテンプレートファイルを直接編集することになるため、そのリスクを理解した上で必ず一度テスト環境上で試されることを奨励します。

プラグインを使わずに設置する際に必要な作業は基本的に以下の3点です。
作業はコピペ＋＠でおよそ10分もあれば完了します。

HTMLコードの作成
CSSコードの設定
ブログ記事テンプレートへのコード設置

WordPressのテンプレートファイルを普段さわり慣れていない人にとっては、「ブログ記事テンプレートへのコード設置」のみ、やや迷うかもしれませんが、基本的に難しい作業ではありません。

本記事でご紹介するコードの完成イメージを先に載せますね。
こちらは画像ではなく完成データをショートコードで設置したものです。

この記事を書いた人

永田健二

石川県金沢市生まれ。大阪育ち。
14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。
デザイナー/プログラマーとして数々の制作現場を経て、現在は某企業で主にウェブディレクターとして活動中。

趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

FaceBook

それでは早速設置方法を解説していきます。

HTMLコードの作成

HTMLは以下になります。
sectionタグを丸ごとコピペした後に必要な箇所を適宜編集してください。
ご自身の環境に合わせて変更・削除が必要な箇所は以下です。

3行目のimgの画像パス（画像は正方形のものをアップしてください）
5行目の名前
6行目以降の説明文
pタグ、brタグなどの改行処理
各種リンク

<section id="author_profile">
 <p class="label">この記事を書いた人</p>
 <div class="left"><img src="https://dis-play.net/wp-content/uploads/2019/12/profile_knagata.png" alt="" /></div>
 <div class="right">
  <p class="author_name">永田 健二</p>
  <p>石川県金沢市生まれ。大阪育ち。<br>
  14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。<br>
  デザイナー/プログラマーとして数々の制作現場を経て、現在は某企業で主にウェブディレクターとして活動中。</p>
  <p>趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。</p>
  <ul class="author_sns">
   <li><i class="icon-facebook"></i><a href="https://www.facebook.com/kenji.nagata.18" target="_blank">FaceBook</a></li>
 </ul>
 </div>
</section>

HTMLが完成したら、後でテンプレートに貼り付けて使用するため、一旦ソースをどこかに保存しておいてください。

CSSコードの設定

少々長いですが、CSSは以下になります。
ご自身の環境に合わせて変更が必要な箇所は以下です。

枠線や塗りの色
文字サイズ
行間
余白

設置ページの体裁にフィットするようにお好みの値に変更してご利用ください。
なお「i.icon-facebook」で設定しているFBアイコンのみ、下記ソースだけでは反映できませんのでご容赦ください。
※アイコンの設定にはIcoMoonを利用しています。

/*プロフィール枠*/
#author_profile {
  border: 1px solid #194c80;
  width: 100%;
  margin: 40px auto;
  overflow: hidden;
}
#author_profile p {
  margin-bottom: 20px;
  line-height: 1.8;
}
/*この記事を書いた人の見出し*/
#author_profile p.label {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #194c80;
  padding: 10px 15px;
}
/*名前*/
#author_profile p.author_name {
  font-size: 14px;
  font-weight: bold;
  display: inline-block;
  position: relative;
}
/*名前下の下線*/
#author_profile p.author_name::after {
  content: "";
  border-bottom: solid 3px #194c80;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
}
/*左側画像ブロック*/
#author_profile .left {
  width: 14%;
  float: left;
  margin: 10px 0 15px 30px;
}
/*画像サイズ*/
#author_profile .left img {
  width: 100%;
}
/*右側テキストブロック*/
#author_profile .right {
  width: 74%;
  float: left;
  font-size: 12px;
  line-height: 1.6;
  padding: 5px 0 20px 30px;
}
/*テキスト下部SNSブロック*/
#author_profile .right ul.author_sns {
  margin: 0;
  border-top: 1px dotted #dddddd;
  margin-top: 15px;
  padding-top: 20px;
}
#author_profile .right ul.author_sns li {
  float: left;
  margin-right: 15px;
  list-style: none;
}
#author_profile .right ul.author_sns li:last-child {
  margin-right: 0;
}
/*SNSアイコンを使う場合は別途アイコンCSSの設定が必要*/
#author_profile .right ul.author_sns li i.icon-facebook {
  color: #fff;
  background-color: #194c80;
  margin-right: 8px;
  padding: 6px 8px 0;
  position: relative;
  bottom: -3px;
}
/*SP時の挙動（画面サイズが小さい時）*/
@media (max-width: 480px) {
  #author_profile p.author_name {
    text-align: center;
  }
  #author_profile .left {
    width: 100%;
    float: none;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
  }
  #author_profile .left img {
    width: 33%;
  }
  #author_profile .right {
    width: 100%;
    float: none;
    padding: 10px 20px 0;
  }
  #author_profile .right ul.author_sns li {
    margin-bottom: 20px;
  }
}

CSSの設定が完了したら、テーマで使用しているCSSに反映して保存・アップロードしてください。

なお当サイトではCSSはローカル環境でSASSで管理した上でMinify化（ソース上の改行・余白を詰めて軽量化）して出力しているため、記事掲載用CSSのソース変換（SASS⇒CSS）には「SassMeister」を使わせていただきました。
https://www.sassmeister.com/

ブログ記事テンプレートにコードを設置

ここまでの作業でHTMLとCSSの調整が完了したら、ブログ記事用のテンプレートにHTMLコードを設置しましょう。

記事を書くたびに毎回プロフィールを入れなくて済むよう、記事の文末に自動的にプロフィール欄が表示されるように設定します。

修正対象ファイルは使用テーマや各々の環境によって異なるため、ここではファイル名は明言しませんが、適宜調整するファイルを見つけてください。

参考までに当サイトでは/template-parts/content.php内にて編集しています。

修正対象ファイルを見つけたら、先ほど作成したHTMLコードをテンプレート内のthe_content();で出力される本文の後に挿入します。

当サイトのテンプレートの例だと以下のようになります。
4行目の<section id=”author_profile”>で囲われているコードがそうですね。

<div class="article-body">	
 <?php the_content(); ?>
 <?php echo do_shortcode('[sc name="copyTheTitleURL"]'); ?>
 <section id="author_profile">・・・中略・・・</section>
</div>

ちなみに1行上にある[sc name="copyTheTitleURL"]という記述は同じく文末に設置している「記事タイトルとURLをコピーするボタン」用のショートコードです。

シェアボタンより便利？記事タイトルとURLをコピーするボタンを設置する方法【地味に便利】

ウェブで見つけた気になる記事やページをSNSでシェア・投稿したり、社内のグループチャットで記事URLを共有する場合、そして個人的に後で読みたい記事をクリップしておきたい場合、みなさんはどのようにしていますか？やり方はいろいろありますが、記事ページのタイトルやURLをコピペして貼り付ける機会も多いのではないでしょうか？ほんの数秒の作業かもしれませんが、以下のように記事タイトルとURLをコピペして…

【改良版】ブログ記事テンプレートにショートコードで設置

ここでは改良版として、もう一手間加えた設置方法をご紹介します。

上述のようにHTMLをそのままテンプレートに貼り付けても動作しますが、内容を変更する際に都度PHPテンプレートを編集して更新するのは大変ですよね。

という訳で、更新する際に編集管理を行いやすいようにショートコードを利用して設置したのが以下のパターンです。

<div class="article-body">	
 <?php the_content(); ?>
 <?php echo do_shortcode('[sc name="copyTheTitleURL"]'); ?>
 <?php echo do_shortcode('[sc name="author_profile"]'); ?>
</div>

sectionタグ以下の長いHTMLコードがなくなって1行のコードに置き換わっていますね。
※ショートコードとはWordPress独自の機能で予め登録しておいた内容を1行のコードで呼び出す機能です。（通常はfunctions.php内に記述します）

この方法だと内容を変更する際にテンプレートファイルを直接編集する必要がありません。

肝心のショートコードにHTMLコードを登録するには、「Shortcoder」というショートコードを簡単に作成して管理できるプラグインを使います。（使い方は後述します）

以下はショートコード作成ページにHTMLを貼り付けて保存した状態です。