A+

给评论提交模块动动手术,添加Gravater头像预览框

2019年03月20日 程序设计 22条评论 714次浏览

这已经是第二次给评论提交模块动“手术”了,别问我为什么,我就是喜欢折腾。

先声明一下,如果要原样照搬的话,首先你必须是begin主题,如果不是请研究一下你自己comments.php文件的代码再进行修改!

先看一下这个主题原始的样式吧:

这是修改过后的样式:

这是修改过后登陆账号的样式:

原始的样式是内容框在上面,访问者信息框在下面,首先给他们两个的位置调换一下。

找到主题根目录下的comments.php文件,打开找到:展开

  1. <p class="emoji-box"><?php get_template_part( 'inc/smiley' ); ?></p>
  2. <p class="comment-form-comment"><textarea id="comment" name="comment" rows="4" tabindex="1" placeholder="<?php echo stripslashes( zm_get_option('comment_hint') ); ?>" onfocus="this.placeholder=''" onblur="this.placeholder='<?php echo stripslashes( zm_get_option('comment_hint') ); ?>'"></textarea></p>
  3. <p class="comment-tool">
  4. <?php if (zm_get_option('embed_img')) { ?>
  5. <a class="tool-img" href='javascript:embedImage();' title="<?php _e( '插入图片', 'begin' ); ?>"><i class="icon-img"></i><i class="be be-picture"></i></a>
  6. <?php } ?>
  7. <a class="emoji" href="" title="<?php _e( '插入表情', 'begin' ); ?>"><i class="be be-insertemoticon"></i></a>
  8. </p>

把以上的代码剪切到以下代码的下面去:展开

  1. <div id="comment-author-info">
  2.     <p class="comment-form-author">
  3.            <label for="author"><?php _e( '昵称', 'begin' ); ?><span class="required"><?php if ($reqecho "*"; ?></span></label>
  4.            <input type="text" name="author" id="author" class="commenttext" value="<?php echo $comment_author; ?>" tabindex="2" />
  5.         </p>
  6.     <p class="comment-form-email">
  7.            <label for="email"><?php _e( '邮箱', 'begin' ); ?><span class="required"><?php if ($reqecho "*"; ?></span></label>
  8.            <input type="text" name="email" id="email" class="commenttext" value="<?php echo $comment_author_email; ?>" tabindex="3" />
  9.     </p>
  10.     <p class="comment-form-url">
  11.            <label for="url"><?php _e( '网址', 'begin' ); ?></label>
  12.            <input type="text" name="url" id="url" class="commenttext" value="<?php echo $comment_author_url; ?>" tabindex="4" />
  13.     </p>
  14.     <?php if (zm_get_option('qq_info')) { ?>
  15.     <p class="comment-form-qq">
  16.             <label for="qq"><?php _e( 'QQ', 'begin' ); ?></label>
  17.         <input id="qq" name="qq" type="text" value="" size="30" placeholder="输入QQ号码可以快速填写" />
  18.         <span id="loging"></span>
  19.         </p>
  20.         <?php } ?>
  21.     </div>
  22. <?php endif; ?>

这样位置就已经调换过来了,接下来就是在访问者填写信息的右侧放一个Gravater头像的预览框。

下载js-md5.js文件,把它仍到主题的js文件夹中。

提取码: k7ea

在comments.php文件中找到:展开

  1. <?php if ( ! $user_ID ): ?>

下面添加:展开

  1. <p class="gravatar-tool">
  2.       <?php echo  '<img id="real-time-gravatar"' .get_avatar($comment_author_email,  $size = '32');  ?>
  3. </p>

然后在comments.php文件的最底部添加:展开

  1. <!-- real time gravatar -->
  2. <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/js-md5.js"></script>
  3. <script type="text/javascript">
  4.             var ga = document.getElementById("real-time-gravatar");
  5.             var email = document.getElementById("email");
  6.             var Ka=navigator.userAgent.toLowerCase();
  7.             var chrome = Ka.indexOf('webkit') != -1;
  8.                     if (chrome) email.onblur = changeGravatar;
  9.                     else email.onchange = changeGravatar;
  10.                     function changeGravatar(){
  11.                     email_value = email.value;
  12.                     email_md5 = hex_md5(email_value);
  13.                     new_ga = "http://www.gravatar.com/avatar/" + email_md5 +"s=48&d=identicon&r=G";
  14.                     newGravatar(new_ga);
  15.                     }
  16.                     function newGravatar(new_ga){
  17.                         ga.setAttribute('src', new_ga);
  18.                     }
  19.       </script>
  20. <!-- end real time gravatar -->

删除:展开

  1. <?php elseif ( '' != $comment_author ): ?>
  2. <div class="author_avatar">
  3.     <?php echo get_avatar($comment_author_email$size = '64');  ?>
  4.     <?php printf ('' . sprintf(__( '欢迎', 'begin' )) . ' <strong>%s</strong>', $comment_author); ?> <?php _e( '再次光临!', 'begin' ); ?><br />
  5.     <a href="javascript:toggleCommentAuthorInfo();" id="toggle-comment-author-info"><?php _e( '修改信息', 'begin' ); ?></a>
  6.     <script type="text/javascript">
  7.         //<![CDATA[
  8.         var changeMsg = "修改信息";
  9.         var closeMsg = "关闭";
  10.         function toggleCommentAuthorInfo() {
  11.             jQuery('#comment-author-info').slideToggle('slow', function(){
  12.                 if ( jQuery('#comment-author-info').css('display') == 'none' ) {
  13.                 jQuery('#toggle-comment-author-info').text(changeMsg);
  14.                 } else {
  15.                 jQuery('#toggle-comment-author-info').text(closeMsg);
  16.                 }
  17.             });
  18.         }
  19.         jQuery(document).ready(function(){
  20.             jQuery('#comment-author-info').hide();
  21.         });
  22.         //]]>
  23.     </script>
  24. </div>

如果你高兴的话,也可以把输入QQ的那个输入框干掉:展开

  1. <?php if (zm_get_option('qq_info')) { ?>
  2.     <p class="comment-form-qq">
  3.         <label for="qq"><?php _e( 'QQ', 'begin' ); ?></label>
  4.         <input id="qq" name="qq" type="text" value="" size="30" placeholder="输入QQ号码可以快速填写" />
  5.         <span id="loging"></span>
  6.     </p>
  7. <?php } ?>

最后,在style.css文件中添加样式:展开

  1. .gravatar-tool {float:rightright;padding:2px;border:1px solid #ddd;background:#fff;margin:-5pxmargin-right:0px;width:70px;height:70px;}@media screen and (max-width650px) {.gravatar-tool {displaynone;}}

完成。

简单的说一下吧,删除的那段代码其实是评论者的用户信息保存,最后CSS样式中的@media screen and()这段代码是为了不让Gravater头像在移动端显示的,其他的就不说了吧。

 

3月21日纠正和补充修改:展开

  1. <p class="gravatar-tool">      <?php echo  '<img id="real-time-gravatar"' .get_avatar($comment_author_email,  $size = '32');  ?></p>

把上面的那段代码改成:展开

  1. <p id="gravatar-tool">      <?php echo  '<img id="real-time-gravatar"' .get_avatar($comment_author_email,  $size = '32');  ?></p>

不用删除上贴说要删除的那段代码,直接改成以下代码:展开

  1. <div class="author_avatar">
  2.     <?php echo get_avatar($comment_author_email$size = '64');  ?>
  3.     <?php printf ('' . sprintf(__( '欢迎', 'begin' )) . ' <strong>%s</strong>', $comment_author); ?> <?php _e( '再次光临!', 'begin' ); ?><br />
  4.     <a href="javascript:toggleCommentAuthorInfo();" id="toggle-comment-author-info"><?php _e( '修改信息', 'begin' ); ?></a>
  5.     <script type="text/javascript">
  6.         //<![CDATA[
  7.         var changeMsg = "修改信息";
  8.         var closeMsg = "关闭";
  9.         function toggleCommentAuthorInfo() {
  10.             jQuery('#comment-author-info').slideToggle('slow', function(){
  11.                 if ( jQuery('#comment-author-info').css('display') == 'none' ) {
  12.                 jQuery('#toggle-comment-author-info').text(changeMsg);
  13.                 } else {
  14.                 jQuery('#toggle-comment-author-info').text(closeMsg);
  15.                 }
  16.             });
  17.             jQuery('#gravatar-tool').slideToggle('slow', function(){
  18.                 if ( jQuery('#gravatar-tool').css('display') == 'none' ) {
  19.                 //$("#gravatar-tool").css('display','none')
  20.                 jQuery('#toggle-gravatar-tool').text(changeMsg);
  21.                 } else {
  22.                     //$("#gravatar-tool").css('display','block');
  23.                     jQuery('#toggle-gravatar-tool').text(closeMsg);
  24.                 }
  25.             });
  26.         }
  27.         jQuery(document).ready(function(){
  28.             jQuery('#comment-author-info').hide();
  29.             jQuery('#gravatar-tool').hide();
  30.         });
  31.         //]]>
  32.     </script>
  33. </div>

上贴的CSS样式改成:展开

  1. #gravatar-tool {float:rightright;padding:2px;border:1px solid #ddd;background:#fff;margin:0pxmargin-right:0px;width:70px;height:70px;}

去掉了移动端隐藏代码。

在CSS中找到:展开

  1. #comment-author-info{width:50%}@media screen and (max-width:640px){#comment-author-info{width:100%}}

改成:展开

  1. #comment-author-info{width:50%}@media screen and (max-width:640px){#comment-author-info{width:75%}}

目前先修改成这样吧,要看效果的话可以在我博客上看,还有移动端的效果也改过了!

  • 本文为原创文章,版权归所有。欢迎分享本文,转载请保留出处!
  • 给我留言

    评论列表 (有 714 次浏览 和 22 条评论)
    1. 回复 线上抢房

      有用

      • 回复 锋言锋语管理员

        @线上抢房 希望对你有帮助!

    2. 回复 maqingxi

      知更鸟的主题就是耐看。

      • 回复 锋言锋语管理员

        @maqingxi 大前端的也不错!

    3. 回复 林三

      以前喜欢玩这些,现在正在犹豫要不要去掉呢。

      • 回复 锋言锋语管理员

        @林三 早啊,林老师,新博客肯定要折腾一下的,时间长了就平淡了!

    4. 回复 Action

      不错不错,有头像好看很多呀。

      • 回复 锋言锋语管理员

        @Action 你也可以改改啊!

    5. 回复 张波博客

      把鸟的主题折腾的越来越完美了。

      • 回复 锋言锋语管理员

        @张波博客 谈不上,只是按照自己的喜好来修改~

    6. 回复 灰常记忆

      获取头像速度蛮快的,可惜我不是知更鸟的主题。

      • 回复 锋言锋语管理员

        @灰常记忆 不是知更鸟主题也可以的啊,为什么不可以!

    7. 回复 潘潘猫

      如果不是这个主题要怎么修改呢?

      • 回复 锋言锋语管理员

        @潘潘猫 网上有很多教程,我都是在网上看技术文章自己总结修改的!

    8. 回复 wordpress建站吧

      头像会导致加载变慢么》?

    9. 回复 Mr.Chou

      好多人使用这个主题,大气耐看。

      • 回复 锋言锋语管理员

        @Mr.Chou 暂时用,等有能力自己写的时候就自己写!

    10. 回复 霭客溪主

      主题不错嘛,有什么主题的。

      • 回复 锋言锋语管理员

        @霭客溪主 知更鸟的begin!

    11. 回复 灰狼

      这种是用JS来获取,还有一种是利用PHP直接异步请求

      • 回复 锋言锋语管理员

        @灰狼 请告诉我方法,我试试!