投稿本文の文末へ作者プロフィールを表示する

投稿本文の文末へ作者プロフィールを表示する

WordPressで個人用のブログや何かの解説を行うサイトでよく使われている、投稿本文文末の「この記事を書いた人(作者プロフィール)」をカード表示する方法を紹介します。

完成イメージは以下のようになります。

パソコン表示

投稿本文の文末へ作者プロフィールを表示する|HABONE

モバイル表示

投稿本文の文末へ作者プロフィールを表示する|HABONE

実際に本ページの末尾をご覧になった方がイメージはつかみやすいかも知れません

今回は単純にニックネーム(表示名)とプロフィール情報、アバターを表示させるだけでなく、画像の最下段にある「年代」や「趣味」などの追加情報も表示させるようにします。

本記事を参考にWordPressサイトのカスタマイズをお考えの方へ

このカスタマイズ内容は、当サイトで配布している【HABONE BASE】テーマへ、上位バージョンの【HABONE】テーマの機能の一部を追加するための参考記事です。

テーマによってプログラムの書き方や構成が異なりますし、デザイン要素も異なりますので、特に【HABONE BASE】以外のテーマへの適用を行う場合には、以下のスキルが必要となります。

  • カスタマイズで不具合が発生した場合にご自身で復旧が可能なこと
  • FTPクライアントツールやサーバーのファイルマネージャーなどを使ってファイルの転送などが行えること
  • テーマファイルの編集を行った経験があること
  • ご自身でデザインの修正や調整ができること

また、【HABONE BASE】へ追加する場合には、子テーマでのカスタマイズをおすすめします。

投稿本文下へ「この記事を書いた人(作者プロフィール)」を表示する方法

独自項目「年代」「趣味」欄を設ける

今回の場合のように「年代」と「趣味」という独自項目をユーザーごとに設定して表示できるようにするため、管理画面のユーザープロフィールへの項目追加、入力された値の更新を行う機能を追加します。

テーマのfunctions.phpへ以下のコードを追加します。

/* 参考記事 */
/* https://increment-log.com/wordpress-user-profile-add-meta-field/ */

/***** フィールドの追加 *****/
function habone_add_profile_fields( $user ) {
    ?>
<h2><?php _e( 'Author Additional profile','habone' ); ?></h2>
<p><?php echo __('In the author profile column, the display name, profile information, profile picture on the personalized blog, and the following information are displayed.','habone'); ?></p>
<p><?php echo __('Only those with input in the following items will be displayed in the author profile','habone'); ?></p>
<table class="form-table">
<!-- 趣味 -->
	<tr>
	<th><label for="my-hobbies"><?php _e( 'My Hobbies','habone' ); ?></label></th>
	<td>
		<input type="text" name="my-hobbies" id="my-hobbies" value="<?php echo esc_attr( get_the_author_meta( 'my-hobbies', $user->ID ) ); ?>" class="regular-text" placeholder="<?php _e( 'Enter Your Hobbies','habone' ); ?>" />
	<p><?php echo __('Please enter your hobby','habone'); ?></p>
	</td>
	</tr>

	<tr>
	<th><label for="my-birthday"><?php _e( 'My Birthday','habone' ); ?></label></th>
	<td>
		<input type="text" name="my-birthday" id="my-birthday" value="<?php echo esc_attr( get_the_author_meta( 'my-birthday', $user->ID ) ); ?>" class="regular-text" placeholder="<?php _e( 'Enter Your BirthDay','habone' ); ?>" />
	<p><?php echo __('Please enter your date of birth (YYYYMMDD). <br> This information is only used for automatic age calculations and will not be used or published elsewhere.','habone'); ?></p>
	</td>
	</tr>

</table>
<?php
}

// ユーザープロフィール編集画面にフィールドを追加する
add_action( 'show_user_profile', 'habone_add_profile_fields' );

// 自分のプロフィール編集画面にフィールドを追加する
add_action( 'edit_user_profile', 'habone_add_profile_fields' );



/***** 入力データの保存 *****/
function habone_update_profile_fields( $user_id ) {
    // 現在のユーザーに[$user_id]を編集する権限があることを確認
    if ( ! current_user_can( 'edit_user', $user_id ) ) {
        return false;
    }

    // 追加した任意の各フィールドを保存用に配列化(カスタムフィールドのキー名と値)
    $meta_keys = array(
		'my-hobbies'       => $_POST['my-hobbies'],
		'my-birthday'       => $_POST['my-birthday']

    );

    // [$user_id]のユーザーメタを作成または更新
    foreach( $meta_keys as $key => $value ) {
        update_user_meta( $user_id, $key, $value );
    }

    // 1つの場合は以下の1行で完了
    # update_user_meta( $user_id, 'text-sample', $_POST['text-sample'] );

    return true;
}

// ユーザー自身のプロフィール編集画面の更新に保存アクションを追加する
add_action( 'personal_options_update', 'habone_update_profile_fields' );

// ユーザープロフィール編集画面の更新に保存アクションを追加する
add_action( 'edit_user_profile_update', 'habone_update_profile_fields' );

その他の入力項目や入力方法(選択式など)の作り方は以下の参考記事を参照ください(上のコードも参考記事のコードを改変して作成しています)。

[WordPress]ユーザーのプロフィールに任意のフィールドを追加する

コードの追加と保存ができたら、ひとまず管理画面の「ユーザー」→「プロフィール」を開いて、一番下に追加項目が表示されているかの確認、何かを入力して保存後に画面をリロードしても値が保持されているかを確認しましょう。

コード中には翻訳対応のため、画面上に表示される文言はすべて「(‘英語の文字列’,’habone’)」と英語表記にしています。自身のサイトでのみ使う場合には「’英語の文字列’」の部分を日本語で書けば、日本語で表示されます。また、翻訳ファイルを編集して日本語化する際には「’habone’」の部分をご自身のテーマのtextdomainへ変更してください。

「作者プロフィール」表示用のテンプレートを作る

次に、実際に表示させるためのテンプレートを作ります。パソコンで以下のコードを挿入した「profile-template.php」というファイルを作り、テーマ(子テーマ)内へアップロードします。

<div class="profile">
<?php if(!wp_is_mobile()): ?>
<div class="profile-image"><?php echo get_avatar( get_the_author_meta('ID'), 120 ); ?></div>
<?php endif; ?>
<div class="prifile-content">
<h3><?php echo __( 'Post Author', 'habone' ) ?>: <?php the_author_posts_link(); ?></h3>
	<p><?php the_author_meta('user_description'); ?></p>
	<p class="prorile-part">
	<?php if(!get_the_author_meta('my-birthday') == ''): ?>
	<span><?php echo __('Age:','habone'); ?><?php
		$birthday = get_the_author_meta('my-birthday');
		$age = floor((date(Ymd) - $birthday)/100000);
			echo $age; ?>0<?php echo __('S','habone'); ?> </span>
	<?php endif; ?>
	<?php if(!get_the_author_meta('my-hobbies') == ''): ?>
	<span><?php echo __('Hobbies / ','habone'); ?><?php the_author_meta('my-hobbies'); ?></span></p>
	<?php endif; ?>
</div>
</div>

モバイルではユーザー画像を表示させない方がすっきりするため、wp_is_mobile関数を使ってパソコン表示時との出し分けを行っています

コード中には翻訳対応のため、画面上に表示される文言はすべて「(‘英語の文字列’,’habone’)」と英語表記にしています。自身のサイトでのみ使う場合には「’英語の文字列’」の部分を日本語で書けば、日本語で表示されます。また、翻訳ファイルを編集して日本語化する際には「’habone’」の部分をご自身のテーマのtextdomainへ変更してください。

テンプレートを表示させる

親テーマのsingle.phpをダウンロードし、子テーマ内へアップロードした後、子テーマのsingle.phpを開いて以下のコードを探します

<!--タグ--><div class="post-tag">
	<?php 
	$tags = __('Tags: ','habone');
	the_tags('<ul><li>'.$tags.'</li><li>','</li><li>','</li></ul>'	); ?>
	</div>

このコードの下へ以下を追加します

<!-- 作者リンク -->
	<?php get_template_part('profile-template'); ?>

デザイン要素の適用

子テーマの「pc-style.css」「mobile-style.css」へそれぞれコードを追加します

「pc-style.css」

/*** 作者 ***/
/* カード */
.profile {
	display: flex;
	border: 1px solid #eee;
	border-radius: 8px;
	gap:36px;
	padding: 16px;
	margin-top:24px;
	margin-bottom:24px;
}

.profile:after {
	display: block;
}

.prifile-content h3 {
	margin-top: 0px;
}

.profile a{
	text-decoration:none;
}

.prorile-part {
	text-align: right;
}

.prorile-part span {
	margin: 16px;
}

「mobile-style.css」

/*** 作者 ***/
.prifile{
	margin-top:24px;
	margin-bottom:24px;
}

.profile h3 {
	font-size: 1em;
}

以上で、作者プロフィールが表示されるようになります。

実際に作者プロフィールを表示させる

今回のカード式作者プロフィールは、管理画面の「ユーザー」→「プロフィール」へ設定した項目がそのまま表示される仕組みになっています。

  • 「ブログ上の表示名」・・作者名
  • 「プロフィール情報」・・プロフィールの内容
  • 「趣味」・・入力があれば「趣味/〇〇」と表示
  • 「誕生日」・・入力があれば自動計算され、年代(30代、40代など)として表示

実際にこれらの項目を設定した上で、投稿を開いて最終確認してみてください。

ユーザー画像をGravaterではなくメディアへアップロードした画像にするには

カードに表示されるユーザー画像はGravaterというWordPressが利用している外部プロフィール機能のものを表示するようになっていますが、以下のプラグインを使うことで、メディアへアップロードした画像を表示させることもできます。

グラバター(Gravatar)の代わりにアップロードした画像をユーザー画像にできるプラグイン「Simple Local Avatars」

本機能は【HABONE】テーマで標準装備されています

上位版の【HABONE】テーマでは、本機能を標準装備している他、テーマカスタマイザー上で

  • 作者情報をテキストのみで簡易表示させるか?
  • 作者情報をカード表示させるか?
  • そもそも作者情報を表示しないようにするか?

の選択ができるようになっています。

また、通常ではHTMLが使えないようになっている「プロフィール情報」欄でHTMLが使えるようにするかどうかの選択もできるようにしています。

【HABONE】および【HABONE BASE】テーマは現在配布に向けて開発&テスト中です。テーマ及び本サイトの準備ができ次第開始しますので、今しばらくお待ちください。

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

WordPress用テーマ「ha-Basic」「HABONE」の開発、プラグインやテーマの翻訳、WordPressの使い方やカスタマイズ方法などの情報を配信しています。

年齢:40代 趣味/園芸・ペット・卓球