Web業界で働いている人が仕事の失敗談をメインにいろいろつぶやいています。更新:2017-02-07Tweetブログなどで情報発信を続けていると、ある程度記事が充実してくると記事にコメントがついてくるようになると思います。WordPressで構築されたブログも、コメントを受け付ける機能がデフォルトで備わっており、オリジナルのアバター画像の登録ができるので、もらったコメントにレスをすると登録した自分のアバターを表示させることができます。このサイトでも以下のようにアバター画像を表示させています。この表示で分かる通り、アバターがあるのと無いのでは印象がかなり違います。閲覧者がコメントをするには、それなりの想いや考えがあると思うので、そういった人に対してはアバターを添えて「自分が返信している感」を打ち出してレスをしてあげれば、コメントをもらった方も嬉しいはずです。いうようなことを考えて、アバター表示をさせようと軽く調べてみたところ、WordPressでアバター画像を登録する有名な方法として2つありました。作業手順が面倒だったり、プラグインを使わなければならなかったりするため、「たかだかアバター画像を変更するだけの作業にしてはちょっといかがなものでしょう」と思ってしまったので、僕はまったく独自の方法で解決させました。少々、試行錯誤したところはありますが結果うまくいったので、本日は僕の解決方法について紹介したいと思います。アバターの変更方法WordPressのアバターを変更する有名な方法としては、以下の2つです。Avatar」を利用する「Gravatar」のサービスを利用する先にも述べたとおり、作業の割にはどちらも大げさです。前者についてはたかだかアバター画像を変えるためだけにプラグインを導入する必要がありますし、後者の方法は、WordPressとは別のWebサービスになるため、自サイトに限らず他WordPressで構築されたブログのコメントや、WordPressのフォーラムへの投稿にも適用されます。このサイトもそうですがWordPressのテーマファイルを自作しているので、「コメント一覧」のテンプレートファイルを作れば解決すると思っていたのですが、コメント表示用の関数「wp_list_comments()」がHTMLソースごと吐き出される仕様のため、思ったようにはいかないことがわかりました。「じゃあどうしようか」ということで、僕が考えた解決案を以下説明します。僕が考えた方法は、ズバリJavaScriptでアバター画像を置き換える処理をするです。ロジックを言葉にすると、コメント一覧における自分の投稿を特定し、その投稿のアバター画像を別の画像に置き換えるとなります。それでは、具体的なソース(JavaScript)で紹介します。いつものようにpenguinweb.netに参考ページを作っていますのでそちらを参照ください。JavaScriptでWordPressのアバターを変更する方法まず、変更対象であるコメント一覧のソースを見てみます。-->自分のコメントかどうかは、自分の名前が表示される6行目の「fn」クラスのテキストが自分の名前かどうかをチェックすれば判断できます。次に自分のアバター画像ですが、その上隣である3行目の「comment-author」の中のimgタグになるので、このimgタグをJavaScriptで書き換えてやればOKですね。僕はjQueryで慣れてしまっているので、以下、jQueryを使ったソースで紹介します。自分の名前だった場合に、親のクラス内にある「comment-author」クラスの中のimgタグを探し、自分のプロフィール画像にタグごと書き換えるですね。プラグインや自作のスクリプトを使っているとうまくいかないこともあります。その場合は、以下の注意事項を読んでみてください。loadを使っていると動作しません。loadのJavaScriptがimgタグの中身を書き換えてしまっており、うまいことセレクタで指定できないせいでした。loadのスクリプト実行後に、アバター画像書き換え処理を実行するようにしたところ、うまく動作するようになりました。画像をキャッシュするような処理をしているものは、処理を止めて一個づつ動作確認をしてみてください。注意事項その2このブログでも紹介しましたが、WordPressはすでにjQueryが入っており、プラグインなどで利用しているjQueryとコンフリクトしないよう「$()」での関数呼び出しができないよう制限されています。そのため、jQueryを記述する際は注意しましょう。詳しくは以下の記事を参考ください。最後に僕の思った通りのことが実現できたので、満足しています。欠点としてはWordPressのコメントはWordPressに依存しているため、今後のアップデートで吐き出されるソースが変更されると、うまく動かない可能性があります。よって、アップデートの度にメンテナンスが必要になります。(自作プラグインと同じですね。)また、このスクリプトは動作しない場合は、アバター画像がデフォルトのミステリーマンになるだけなので、実害としてはさほど無いと考えています。僕と同じ悩みを抱えている方は、是非トライしてみてください。iizukaフリーランスとしてUX視点で業務支援しています。Hi-Standard好きです。http://yukioiizuka.comMISLEADの記事に共感いただけましたらいいねをお願いします。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。UP爪の周りやささくれの傷にばい菌が入ったらひょう疽です。化膿してます抜粋文に半角スペース&nbsp;が途切れて表示される問題の解消法WordPressでPing送信しまくるとスパム扱いされてしまうのを防ぐ方法Xserverから高負荷アラートが来た。Reserved...。