ヨガスクールの中の人が教える、ブログのつくり方

WordPress

プラグインなしで「この記事を書いた人」のプロフィール画像を表示する方法

2020-11-29

プラグインなしで「この記事を書いた人」のプロフィール画像を表示する方法
「この記事を書いた人」に画像が表示されない!

「Gravatar(グラバター)」に登録する以外のやり方ないの?

本日は、こんなお悩みにお答えします。

 

記事の内容

  • 「この記事を書いた人」のプロフィール画像を表示する方法
  • この記事を書いた人の表示設定|AFFINGER5の場合

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

 

最近では記事の最下部に「この記事を書いた人」という欄が表示されているサイトをよく見かけます。

テーマによっては標準装備されていますので、利用者が増えています。

 

でも、いくら表示設定してもプロフィール写真が反映さず、困っていませんか?

具体的にはこんな状態。

この記事を書いた人で画像が表示されない例

 

実は、プロフィール写真を表示させるには、

  • プラグインを使う
  • Gravatar(グラバター)を使う

のどちらかを設定する必要があります。

 

でも、

できるだけプラグインは増やしたくない。

Gravatar(グラバター)とかよく分からないし、いろんなところに個人情報を登録したくないな…

と思っている人、いませんか?

そんな方は必見です。

 

本記事ではプラグインもGravatar(グラバター)も使わず、プロフィール画像を表示する方法をお伝えします

設定時間は5分程度で済みます!
うこじ

 

「この記事を書いた人」のプロフィール画像を表示する方法

冒頭でもお伝えしましたが、今回はプラグインもGravatar(グラバター)も使わず、プロフィール画像を表示する方法です。

こちらは「寝ログ」さんのブログを参考にさせていただきました。

手順は次の3つです。

  1. コードをコピー
  2. functions.phpに貼り付け
  3. プロフィール画像URL欄を更新

順番に解説します。

 

コードをコピー

下記のコードをコピーします

ちなみに、私には難しすぎて読解不可能ですので、説明は割愛させていただきます。

///////////////////////////////////////
// 自前でプロフィール画像の設定
///////////////////////////////////////
//プロフィール画面で設定したプロフィール画像
if ( !function_exists( 'get_the_author_upladed_avatar_url_demo' ) ):
function get_the_author_upladed_avatar_url_demo($user_id){
if (!$user_id) {
$user_id = get_the_posts_author_id();
}
return esc_html(get_the_author_meta('upladed_avatar', $user_id));
}
endif;

//ユーザー情報追加
add_action('show_user_profile', 'add_avatar_to_user_profile_demo');
add_action('edit_user_profile', 'add_avatar_to_user_profile_demo');
if ( !function_exists( 'add_avatar_to_user_profile_demo' ) ):
function add_avatar_to_user_profile_demo($user) {
?>
<h3>プロフィール画像</h3>
<table class="form-table">
<tr>
<th>
<label for="avatar">プロフィール画像URL</label>
</th>
<td>
<input type="text" name="upladed_avatar" size="70" value="<?php echo get_the_author_upladed_avatar_url_demo($user->ID); ?>" placeholder="画像URLを入力してください">
<p class="description">Gravatarよりこちらのプロフィール画像が優先されます。240×240pxの正方形の画像がお勧めです。</p>
</td>
</tr>
</table>
<?php
}
endif;

//入力した値を保存する
add_action('personal_options_update', 'update_avatar_to_user_profile_demo');
if ( !function_exists( 'update_avatar_to_user_profile_demo' ) ):
function update_avatar_to_user_profile_demo($user_id) {
if ( current_user_can('edit_user',$user_id) ){
update_user_meta($user_id, 'upladed_avatar', $_POST['upladed_avatar']);
}
}
endif;

//プロフィール画像を変更する
add_filter( 'get_avatar' , 'get_uploaded_user_profile_avatar_demo' , 1 , 5 );
if ( !function_exists( 'get_uploaded_user_profile_avatar_demo' ) ):

function get_uploaded_user_profile_avatar_demo( $avatar, $id_or_email, $size, $default, $alt ) {
if ( is_numeric( $id_or_email ) )
$user_id = (int) $id_or_email;
elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) )
$user_id = $user->ID;
elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) )
$user_id = (int) $id_or_email->user_id;

if ( empty( $user_id ) )
return $avatar;

if (get_the_author_upladed_avatar_url_demo($user_id)) {
$alt = !empty($alt) ? $alt : get_the_author_meta( 'display_name', $user_id );;
$author_class = is_author( $user_id ) ? ' current-author' : '' ;
$avatar = "<img alt='" . esc_attr( $alt ) . "' src='" . esc_url( get_the_author_upladed_avatar_url_demo($user_id) ) . "' class='avatar avatar-{$size}{$author_class} photo' height='{$size}' width='{$size}' />";
}

return $avatar;
}
endif;

引用:寝ログ「プロフィール画像を自前で設定できるようにするWordPressカスタマイズ方法」

 

functions.phpに貼り付け

「外観」→「テーマエディタ」へと進みます。

「functions.php」を選択し、貼り付けます。

子テーマを使用している場合は、子テーマの「functions.php」に貼り付けます

 

尚、貼り付ける前に必ずバックアップをとっておいてください。

バックアップとは、具体的に既に書かれているコードをコピーしてどこかに貼り付けておけばOK。

もし不具合が起きたら、元の文章を貼り直してください。

 

プロフィール画像URL欄を更新

「ユーザー」→「プロフィール」へと進みます。

ユーザー⇒プロフィールをクリック

 

プロフィール設定画面の下部に「プロフィール画像URL」という項目が新たに表示されるようになりました。

プロフィール設定画面の下部に「プロフィール画像URL」という項目が新たに表示されるようになりました

 

「プロフィール画像のURL」欄に画像がアップされているURLを入力し、「プロフィールを更新」をクリックします。

「プロフィール画像のURL」欄に画像がアップされているURLを入力し、「プロフィールを更新」をクリック

 

クリックすると「プロフィール写真」の欄に指定した写真が表示されています。

「プロフィール写真」の欄に指定した写真が表示されています

 

記事の最下部の写真も表示されているか確認しましょう。

無事確認できれば、設定は以上になります。

記事の最下部の写真も表示されているか確認

 

この記事を書いた人の表示設定|AFFINGER5の場合

最後に、WordPressの有料テーマ「AFFINGER5(アフィンガー5)で「この記事を書いた人」を表示させる方法を解説します。

ちなみに、本ブログも「AFFINGER5(アフィンガー5)」を使用しております。

 

「AFFINGER5(アフィンガー5)」については、こちらの記事で詳しく解説しています。

 

さて、設定に戻りまして、手順は下記の2つ。

 

step
1
「投稿・固定記事設定」をクリック

「AFFINGER5管理」→「投稿・固定記事設定」へと進みます。

 

step
2
「この記事を書いた人」を有効化

「この記事を書いた人」を有効化する にチェックします。

 

以上で設定完了です。

 

まとめ:プロフィール写真はプラグインやGravatarの登録なしで設定できます。

いかがでしたでしょうか。

「この記事を書いた人」のプロフィール写真を、プラグインやGravatarの登録なしに設定するやり方を紹介しました。

 

コードは長く、読解するのも難しいですが、コピペでできてしまうので手順通りにやったら5分程度で設定できてしまいます。

簡単ですから、ぜひ試してみてください。

 

本日はこのあたりで。

今回の記事が、皆さまのお役に立てれば嬉しいです。

本日も最後までお読みいただきまして、誠にありがとうございました。

  • この記事を書いた人
ucozi

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-WordPress
-, , ,

Copyright © ucozi.com , All Rights Reserved.