ユーザーメールからグラバターを表示する方法 WordPress

Gravatarは、ユーザーのメールアドレスをオンラインアバターにリンクするウェブサービスです。

WordPressはコメントセクションに訪問者のGravatarを自動的に表示しますが、ウェブサイトの他のエリアにも追加したい場合があります。これにより、より視覚的に魅力的なユーザーエクスペリエンスを作成し、エンゲージメントを高めることができます。

この記事では、さまざまな方法を検討して、WordPressでユーザーのメールからGravatarを簡単に表示する方法を示し、柔軟なオプションを提供します。

Gravatarとは何ですか？なぜ表示するのですか？

GravatarはGlobally Recognized Avatarの略で、人々が自分のメールアドレスに画像をリンクできるようにします。

ウェブサイトがGravatarをサポートしている場合、その人の画像を取得して名前の横に表示できます。たとえば、ユーザーがWordPressウェブサイトにメールアドレスとともにコメントを残すと、WordPressはその人のGravatarをコメントの横に表示します。

Gravatarは、ユーザーが会話に参加することを奨励し、コミュニティ意識を構築し、ページをより面白く見せることができます。これらすべてを組み合わせることで、WordPressの投稿でより多くのコメントを得ることができます。

サイトのセットアップ方法によっては、WordPressは著者プロフィールなど、他の場所にもGravatarを表示することがあります。しかし、WordPressブログやウェブサイトでユーザーGravatarが表示される場所を変更したい場合があります。たとえば、ウェブサイトのツールバーやユーザープロフィールにユーザーのGravatarを表示したいかもしれません。

それでは、WordPressでユーザーのメールアドレスからGravatarを表示する方法を見ていきましょう。以下のクイックリンクを使用して、希望する方法にジャンプしてください。

• 方法1：WordPressテーマの編集（一貫性に最適）
• 方法2：カスタムWordPressショートコードの使用（完全にカスタマイズ可能）
• ボーナス：WordPressコメントでGravatarを遅延読み込み

方法1：WordPressテーマの編集（一貫性に最適）

まず、コードを使用してWordPressテーマにGravatarを追加できます。これは、サイト全体でサイドバーやヘッダーの上など、同じ場所にGravatarを表示したい場合に適しています。ただし、テンプレートファイルを編集する必要があるため、初心者向けの最も簡単な方法ではありません。

この方法では、現在あなたのウェブサイトにログインしている人のGravatarが表示されます。これは、会員制サイト、オンラインストア、またはユーザーがアカウントにログインする必要があるその他のウェブサイトで役立ちます。

テーマにGravatarを追加するには、テーマファイルにコードを貼り付ける必要があります。以前にこれを実行したことがない場合は、ウェブ上のスニペットをWordPressに貼り付けるための初心者ガイドをご覧ください。

WordPressウェブサイトにコードスニペットを追加する最も簡単な方法は、WPCodeを使用することです。これはWordPress向けの最高のコードスニペットプラグインであり、PHP、CSS、JavaScriptなどをウェブサイトに追加できます。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、WordPressダッシュボードのCode Snippets » + Add Snippet»ページにアクセスします。ここでは、WPCodeがサイトに追加できるすべての既製のスニペットが表示されます。

「Add Your Custom Code (New Snippet)」にマウスカーソルを合わせ、「Use Snippet」ボタンが表示されたらクリックするだけです。

まず、コードスニペットのタイトルを入力します。これは参照用ですので、好きなものを自由に使用できます。

その後、「コードタイプ」ドロップダウンを開き、「PHPスニペット」を選択します。

次に、以下のコードをコードエディタに貼り付けることができます。

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

このコードは、WordPressテンプレートファイルのどこにでもGravatarを追加できる簡単な関数を作成します。

コードを貼り付けたら、「挿入」セクションまでスクロールし、「自動挿入」を選択します。「場所」ドロップダウンを開き、「すべてで実行」を選択する必要もあります。

これが完了したら、ページの上部までスクロールし、「非アクティブ」スイッチをクリックして「アクティブ」と表示されるようにします。

次に、「スニペットを保存」ボタンをクリックするだけです。

これで、次の関数を使用して、WordPressウェブサイトのどこにでもユーザーのGravatarを表示できます。

<?php wpbeginner_display_gravatar(); ?>

この関数を適切なテンプレートファイルに追加するだけです。たとえば、ウェブサイトのヘッダーにユーザーのGravatarを表示したい場合は、通常header.phpファイルを編集します。

ただし、これはWordPressテーマによって異なる場合があります。ニーズに合ったテンプレートファイルを見つけるのに役立つように、WordPressテンプレート階層チートシートをご覧ください。

方法2：カスタムWordPressショートコードの使用（完全にカスタマイズ可能）

カスタムショートコードを作成することで、任意のページ、投稿、またはウィジェット対応エリアにGravatarを追加することもできます。

これは、各ページにGravatarが表示される場所を正確に制御したい場合や、ウェブサイト全体でこれらの画像を異なる場所に表示したい場合に適した選択肢です。

メソッド1と同様に、このアプローチでは現在のユーザーのGravatarが表示されます。必要であれば、コードを少し変更することで、特定のメールアドレスに割り当てられたGravatarを表示することもできます。

これは、ユーザーのメールアドレスを持っていて、サイトにGravatarを表示したいが、そのユーザーが登録ユーザーではない場合に便利です。

カスタムショートコードを作成する最も簡単な方法は、WPCodeを使用することです。さらに良いことに、テーマファイルを編集する必要がないため、初心者にも優しい方法です。

まだインストールしていない場合は、WPCodeをインストールする必要があります。また、上記で説明したのと同じプロセスに従って、新しいカスタムコードスニペットを作成する必要があります。

これが完了したら、コードスニペットに名前を付け、コードタイプとして「PHPスニペット」を選択します。

次に、次のPHPをコードエディタに貼り付けます。

function wpb_display_gravatar($atts) { 
extract(shortcode_atts(array('wpb_user_email' => '',), $atts ));

if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else {
	$getuseremail = $wpb_user_email; 

    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
  
    echo '<img src="' . $usergravatar . '">'; 
}
}
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

このコードは、任意のページ、投稿、またはウィジェット対応領域に追加できる[wpb_gravatar]ショートコードを作成します。

準備ができたら、「挿入」セクションまでスクロールし、「自動挿入」が選択されていることを確認します。また、「場所」ドロップダウンを開き、まだ選択されていない場合は「すべて実行」を選択する必要があります。

最後に、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」と表示されるようにします。その後、「スニペットを保存」をクリックしてコードをライブにすることができます。

これで、次のショートコードを使用して、任意のページ、投稿、またはウィジェット対応領域にユーザーのGravatarを表示できます。

[wpb_gravatar]

ショートコードの配置方法の詳細については、WordPressでショートコードを追加する方法に関するガイドを参照してください。

特定のユーザーのGravatarを表示したい場合は、ショートコードにそのメールアドレスを追加するだけです。

[wpb_gravatar wpb_user_email="john.smith@example.com"]

Gravatar の表示に満足できない場合は、カスタム CSS を使用してスタイルを設定できます。たとえば、次の CSS コード スニペットを WordPress テーマ のスタイルシートに追加できます。

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:3px solid #eee;
}

WordPress に CSS を追加する詳細については、WordPress サイトにカスタム CSS を簡単に追加する方法に関するガイドをご覧ください。

もしよろしければ、WordPress カスタマイザーを使用してカスタム CSS を追加することもできます。ダッシュボードで、外観 » カスタマイズ に移動するだけです。

左側のメニューで「追加CSS」をクリックします。

カスタムCSSを小さなコードエディタに貼り付けることができます。

これで完了したら、「公開」をクリックします。

これでウェブサイトにアクセスすると、新しいスタイルのGravatarが表示されます。

サイトでGravatarをカスタマイズするためのさらに詳しいヒントについては、WordPressでGravatarのデフォルト画像のサイズを変更する方法 ガイドをご覧ください。

フルサイトエディターを使用してカスタムショートコードを追加する方法

新しいブロックベースのテーマのいずれかを使用している場合は、ショートコードを任意のテンプレートまたはテンプレートパーツに追加できます。これにより、テンプレートファイルを編集することなく、ウェブサイト全体でユーザーのGravatarを表示できます。

たとえば、サイトのブログテンプレートまたはヘッダーテンプレートパーツにショートコードを追加することができます。

開始するには、WordPressダッシュボードの [外観] » [エディター] に移動してください。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示しますが、ヘッダーやフッターなどの任意のテンプレートまたはテンプレートパーツにショートコードを追加できます。

利用可能なすべてのオプションを表示するには、「テンプレート」または「テンプレートパーツ」のいずれかを選択するだけです。

これで、編集したいテンプレートまたはテンプレートパーツをクリックできます。

例として、404ページテンプレートにショートコードを追加しますが、選択するテンプレートに関係なく、手順はまったく同じです。

WordPressは、テンプレートまたはテンプレートパーツのプレビューを表示します。

ショートコードを追加するには、小さな鉛筆アイコンをクリックします。

これが完了したら、左上にある青い「+」アイコンをクリックします。

検索バーで「Shortcode」と入力します。

右側のブロックが表示されたら、テーマテンプレートにドラッグアンドドロップします。

ここで、[wpb_gravatar] ショートコードを貼り付けるか入力して、このブロックに追加できます。

その後、「保存」ボタンをクリックしてください。

次に、WordPressブログにアクセスして、Gravatarが機能していることを確認してください。

ボーナス：WordPressコメントでGravatarを遅延読み込み

ウェブサイトの複数の場所にGravatarを追加したら、WordPressのコメントでそれらのGravatarを遅延読み込みすることをお勧めします。

これは、ほとんどのGravatarがコメントセクションに表示され、特にコメントが多い記事ではサイトの速度を低下させる可能性があるためです。

Gravatarを遅延読み込みするには、a3 Lazy Load プラグインをインストールして有効化するだけです。詳細は、初心者向けのWordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、WordPressダッシュボードから設定 » a3 Lazy Loadページに移動し、「Lazy Load Images」タブを展開します。

次に、「Gravatars」オプションの横にあるスイッチを「On」に切り替えます。その後、「変更を保存」ボタンをクリックして設定を保存します。

これで、著者プロフィールとコメントのすべてのGravatarが遅延読み込みされ、サイトのパフォーマンスが向上します。詳細については、WordPressコメントでGravatarを遅延読み込みする方法に関するチュートリアルをご覧ください。

この記事が、WordPressサイトでユーザーのメールアドレスからGravatarを表示する方法を学ぶのに役立ったことを願っています。また、WordPressでコメントが承認されたときにユーザーに通知する方法のチュートリアルや、WordPressのコメントフォームにクイックタグを追加する方法のガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。