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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事を書いた人

永田 健二

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

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。

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

HTMLコードの作成

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

  • 3行目のimgの画像パス(画像は正方形のものをアップしてください)
  • 5行目の名前
  • 6行目以降の説明文
  • pタグ、brタグなどの改行処理
  • 各種リンク
<section id="author_profile">
 <p class="label">この記事を書いた人</p>
 <div class="left"><img src="https://blueasc.jp/wp/wp-content/uploads/2019/04/profile.png" alt="" /></div>
 <div class="right">
  <p class="author_name">永田 健二</p>
  <p>石川県金沢市生まれ。大阪育ち。<br>
  14年間住んだ東京を離れて、2017年6月より生まれ故郷の金沢に移住。<br>
  デザイナー/プログラマーとして数々の制作現場を経て、現在は主にウェブディレクター/マーケティングコンサルタントとして活動中。</p>
  <p>ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。<br>
  趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。</p>
  <p><a href="https://blueasc.jp/contact/">ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。</a></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をコピーするボタン」用のショートコードです。

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

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

上述のように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を貼り付けて保存した状態です。

ここに登録した内容を1行のショートコード[sc name="author_profile"]で呼び出して利用しています。

内容を編集する場合はショート―コード管理用の一覧ページから簡単に更新可能です。

Shortcoderプラグインの使い方は以下の記事を参照してください。
使い方が簡単なわりに相当便利なのでけっこう重宝するプラグインです。

まとめ

今回はプラグインを使わずに「この記事を書いた人」のプロフィール欄を設置する方法をご紹介しました。

普段ソースコードを直接編集しない人にとっては、やや難解に感じたかもしれませんが、実際やってみるとそれほど難しい内容ではありません。

ブログ記事テンプレートを直接編集する箇所だけ気を付ければ、多少のHTMLの知識があれば誰でも簡単に設置可能です。

プラグインは便利ですし、筆者も活用できるものは積極的に活用しています。

とは言えプラグインに頼りすぎることによる弊害も感じているので、、、ちょっとした手間をかければ実装できる内容の場合は積極的に自作していこうとシフトし始めています。

でもやっぱり面倒!という人は無理して実装せずにプラグインを有効活用することをおすすめします。 (笑)

運用環境によっては直接テンプレートを編集をしたり、FTPでアクセスすることを禁止されているケースもあるかと思いますので、そういった場合は素直にプラグインに頼りましょう。

今回ご紹介した「この記事を書いた人」実装方法の注意点ですが、記事を書く投稿ユーザーがひとりだけの時はこの方法で問題ありませんが、投稿ユーザーが複数人いる場合は対応していません

投稿ユーザーによってプロフィール欄の表示を出し分けたい場合はもう一工夫必要になります。

今回はそこまでの解説は行いません。

もし複数人の投稿ユーザーごとにプロフィール欄の表示を変えたい場合は、自作で一工夫する対応コストを考えると、素直にプラグインを使うのがよいかもしれませんね。

プラグインは便利なのでつい何でもかんでもプラグインで対応してしまいがちですが、一方でプラグインによる弊害や機能上の制約も発生するため、時としてプラグインを使わない方が得策、というケースもあります。

半期に一度くらいは現在使用しているプラグインのレビューを行って全体を見直してみるとよいかもしれませんね。

この記事をシェアする
この記事のタイトルとURLをコピーする

この記事を書いた人

永田 健二

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

ウェブ業界を主戦場にしつつも、北陸地方・石川県の伝統工芸を通じた地方創生や農業をはじめとする第一次産業の新たな価値の創出を目標に掲げて活動しています。
趣味は毎日の食事、地元のスーパー巡り、温泉、ロングウォーキング、ギター。

ご相談・お問い合わせなどありましたら、こちらよりお気軽にお問い合わせください。

関連記事