mislead記事用にWordPressのアバターをプラグインを使わず簡単に変更する方法を紹介したテストページです。
対象記事：WordPressのアバターをプラグインを使わず簡単に変更する方法
ここでは、コメント一覧において、「ぺんたろう」と表示されたコメント投稿のアバター画像を、jQueryで独自画像に変更しています。
アバターを変更するJavaScript
|
1 2 3 4 5 6 7 8 9 |
<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> |
コメント一覧のソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<h2 class="comments-title"> 「WordPressのアバターを変更する方法」への4件のフィードバック </h2> <ol class="comment-list"> <li id="comment-334" class="comment even thread-even depth-1"> <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&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&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 --> </li><!-- #comment-## --> <li id="comment-335" class="comment byuser comment-author-penguin-admin bypostauthor odd alt thread-odd thread-alt depth-1 parent"> <article id="div-comment-335" 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/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn">ぺんたろう</b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-335"> <time datetime="2016-08-29T14:56:01+00:00"> 2016/08/29 02:56:01 2:56 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>管理者のアバターはjQueryによって独自のものに変更される</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=335#respond' onclick='return addComment.moveForm( "div-comment-335", "335", "respond", "300" )' aria-label='ぺんたろう に返信'>返信</a></div> </article><!-- .comment-body --> <ol class="children"> <li id="comment-336" class="comment even depth-2 parent"> <article id="div-comment-336" 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&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&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-336"> <time datetime="2016-08-29T14:58:13+00:00"> 2016/08/29 02:58:13 2:58 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=336#respond' onclick='return addComment.moveForm( "div-comment-336", "336", "respond", "300" )' aria-label='ゲスト２ に返信'>返信</a></div> </article><!-- .comment-body --> <ol class="children"> <li id="comment-337" class="comment byuser comment-author-penguin-admin bypostauthor odd alt depth-3"> <article id="div-comment-337" 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/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn">ぺんたろう</b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-337"> <time datetime="2016-08-29T14:59:02+00:00"> 2016/08/29 02:59:02 2:59 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>管理者のアバターはjQueryによって独自のものに変更される</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=337#respond' onclick='return addComment.moveForm( "div-comment-337", "337", "respond", "300" )' aria-label='ぺんたろう に返信'>返信</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> </ol><!-- .children --> </li><!-- #comment-## --> </ol><!-- .children --> </li><!-- #comment-## --> </ol><!-- .comment-list --> |
結果は下のコメント一覧を参照ください。
