WordPressのアバターをプラグインを使わず簡単に変更する方法

ブログなどで情報発信を続けていると、ある程度記事が充実してくると記事にコメントがついてくるようになると思います。

 

WordPressで構築されたブログも、コメントを受け付ける機能がデフォルトで備わっており、オリジナルのアバター画像の登録ができるので、もらったコメントにレスをすると登録した自分のアバターを表示させることができます。

 

このサイトでも以下のようにアバター画像を表示させています。

 

この表示で分かる通り、アバターがあるのと無いのでは印象がかなり違います。

閲覧者がコメントをするには、それなりの想いや考えがあると思うので、そういった人に対してはアバターを添えて「自分が返信している感」を打ち出してレスをしてあげれば、コメントをもらった方も嬉しいはずです。

 

というようなことを考えて、アバター表示をさせようと軽く調べてみたところ、WordPressでアバター画像を登録する有名な方法として2つありました。

 

ただ、作業手順が面倒だったり、プラグインを使わなければならなかったりするため、「たかだかアバター画像を変更するだけの作業にしてはちょっといかがなものでしょう」と思ってしまったので、僕はまったく独自の方法で解決させました。

 

少々、試行錯誤したところはありますが結果うまくいったので、本日は僕の解決方法について紹介したいと思います。

 

アバターの変更方法

WordPressのアバターを変更する有名な方法としては、以下の2つです。

• プラグイン「WP User Avatar」を利用する
• 「Gravatar」のサービスを利用する

 

先にも述べたとおり、作業の割にはどちらも大げさです。

前者についてはたかだかアバター画像を変えるためだけにプラグインを導入する必要がありますし、後者の方法は、WordPressとは別のWebサービスになるため、自サイトに限らず他WordPressで構築されたブログのコメントや、WordPressのフォーラムへの投稿にも適用されます。

 

このサイトもそうですがWordPressのテーマファイルを自作しているので、「コメント一覧」のテンプレートファイルを作れば解決すると思っていたのですが、コメント表示用の関数「wp_list_comments()」がHTMLソースごと吐き出される仕様のため、思ったようにはいかないことがわかりました。

 

「じゃあどうしようか」ということで、僕が考えた解決案を以下説明します。

 

JavaScript(jQuery)でアバターを変更する方法

僕が考えた方法は、ズバリ

 

JavaScriptでアバター画像を置き換える処理をする

 

です。

 

ロジックを言葉にすると、

 

コメント一覧における自分の投稿を特定し、その投稿のアバター画像を別の画像に置き換える

 

となります。

 

それでは、具体的なソース（JavaScript）で紹介します。

 

いつものようにpenguinweb.netに参考ページを作っていますのでそちらを参照ください。

JavaScriptでWordPressのアバターを変更する方法

 

まず、変更対象であるコメント一覧のソースを見てみます。（参考ページのソースです）

<article id="div-comment-334" class="comment-body">
    <footer class="comment-meta">
        <div class="comment-author vcard">
            <img src="http://penguinweb.net/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&#038;d=mm&#038;r=g" alt srcset="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&amp;d=mm&amp;r=g 2x" class="avatar avatar-34 photo" height="34" width="34">
            <noscript><img alt='' src='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&#038;d=mm&#038;r=g' srcset='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&amp;d=mm&amp;r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript>
            <b class="fn"><a href='http://mislead.jp' rel='external nofollow' class='url'>ゲスト１</a></b><span class="says">より:</span>
        </div><!-- .comment-author -->
        <div class="comment-metadata">
            <a href="http://penguinweb.net/300.html#comment-334"><time datetime="2016-08-29T14:51:33+00:00">2016/08/29 02:51:33 2:51 PM	</time></a>
        </div><!-- .comment-metadata -->
    </footer><!-- .comment-meta -->
    <div class="comment-content">
        <p>このコメント投稿者のアバターはミステリーマンのまま</p>
    </div><!-- .comment-content -->
    <div class="reply">
        <a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=334#respond' onclick='return addComment.moveForm( "div-comment-334", "334", "respond", "300" )' aria-label='ゲスト１ に返信'>返信</a>
    </div>
</article><!-- .comment-body -->

 

自分のコメントかどうかは、自分の名前が表示される6行目の「fn」クラスのテキストが自分の名前かどうかをチェックすれば判断できます。

 

次に自分のアバター画像ですが、その上隣である3行目の「comment-author」の中のimgタグになるので、このimgタグをJavaScriptで書き換えてやればOKですね。

 

僕はjQueryで慣れてしまっているので、以下、jQueryを使ったソースで紹介します。（こちらも参考ページのソースです）

<script type="text/javascript">
jQuery(function(){
    jQuery('.fn').each(function(){
        if(jQuery(this).text() == "ぺんたろう"){
            jQuery(this).parents('.comment-author').find("img").replaceWith('<img src="/wp-content/themes/twentyfourteen/images/s_prof.jpg" alt="penguinweb.net" />');
        }
    });
});
</script>

 

ソースを順番に説明しますと、

• 3行目で、「fn」クラスに一致するかどうかをチェック
• 一致したら4行目で「fn」クラスのテキストが「ぺんたろう（自分の名前）」と同じかどうか判定
• 自分の名前だった場合に、親のクラス内にある「comment-author」クラスの中のimgタグを探し、自分のプロフィール画像にタグごと書き換える

ですね。

 

ただ、プラグインや自作のスクリプトを使っているとうまくいかないこともあります。

その場合は、以下の注意事項を読んでみてください。

 

注意事項その1

僕もハマったのですがlazy loadを使っていると動作しません。

原因は、lazy loadのJavaScriptがimgタグの中身を書き換えてしまっており、うまいことセレクタで指定できないせいでした。

 

そこで、lazy loadのスクリプト実行後に、アバター画像書き換え処理を実行するようにしたところ、うまく動作するようになりました。

 

画像をキャッシュするような処理をしているものは、処理を止めて一個づつ動作確認をしてみてください。

 

注意事項その2

このブログでも紹介しましたが、WordPressはすでにjQueryが入っており、プラグインなどで利用しているjQueryとコンフリクトしないよう「$()」での関数呼び出しができないよう制限されています。

 

そのため、jQueryを記述する際は注意しましょう。詳しくは以下の記事を参考ください。

jQueryを利用した自作スクリプトが動かない場合の対処方法

 

最後に

僕の思った通りのことが実現できたので、満足しています。

 

ただ、欠点としてはWordPressのコメントはWordPressに依存しているため、今後のアップデートで吐き出されるソースが変更されると、うまく動かない可能性があります。

よって、アップデートの度にメンテナンスが必要になります。（自作プラグインと同じですね。。。）

 

また、このスクリプトは動作しない場合は、アバター画像がデフォルトのミステリーマンになるだけなので、実害としてはさほど無いと考えています。

 

もし、僕と同じ悩みを抱えている方は、是非トライしてみてください。