wordpress丨更知鸟Begin主题之评论区美化

2018年5月17日17:39:16 7 1,584 人围观
代码都是本站亲测分享出来的,适用于所有wordpress主题,当然需要你的随机应变

评论区‘沙发’‘板凳’‘地板’加上底色,更显高贵


先看看效果

wordpress丨更知鸟Begin主题之评论区美化设置方法:

1.找到主题目录 inc/comment-template.php文件,搜索“沙发”。

找到如下代码

  1. case 0 :echo " " . sprintf(__( '沙发', 'begin' )) . "";++$commentcount;break;
  2. case 1 :echo " " . sprintf(__( '板凳', 'begin' )) . "";++$commentcount;break;
  3. case 2 :echo " " . sprintf(__( '地板', 'begin' )) . "";++$commentcount;break;

修改成

  1. case 0 :echo '&nbsp;<span class="pinglunqs plshafa">沙发</span>';++$commentcount;break;
  2. case 1 :echo '&nbsp;<span class="pinglunqs plbandeng">板凳</span>';++$commentcount;break;
  3. case 2 :echo '&nbsp;<span class="pinglunqs pldiban">地板</span>';++$commentcount;break;

2.然后在Style.css文件里添加如下代码

  1. .pinglunqs{color:#fff;padding:0px 8px;border-radius:8px}.plshafa{background:#fd5d3c}.plbandeng{background:#d270fb}.pldiban{background:#9cf}

ps:更知鸟主题可以全后台编辑,颜色或标签名可以自定义,完毕!

评论框添加背景图片

评论框是博主与读者交流的第一平台,要它醒目木,漂亮,以至于你的读者无法忽略了它

以下代码加入主题样式style.css 或者后台定制风格 自定义样式

  1. #commentform textarea {background-image:url(https://ww2.sinaimg.cn/large/a15b4afegy1fjaa4ded77j20a001oa9w.jpg);background-repeat:no-repeat;background-position:center;}

效果图:

wordpress丨更知鸟Begin主题之评论区美化

图片链接自己更换,这里提供几个,需要自己保存本地修改链接

wordpress丨更知鸟Begin主题之评论区美化 wordpress丨更知鸟Begin主题之评论区美化 wordpress丨更知鸟Begin主题之评论区美化 wordpress丨更知鸟Begin主题之评论区美化 wordpress丨更知鸟Begin主题之评论区美化

给评论者添加UA信息和IP地址

第一步、这里需要用到两个文件,下载show-useragent文件和ip2c文件

此处为隐藏的内容!
登录后才能查看!

解压压缩包,将里面的show-useragent文件夹和ip2c文件夹一并上传到正在用的WordPress主题目录。

第二步、部署代码

functions.php中加入以下代码。

  1. include("ip2c/ip2c.php"); //IP归属地和运营商查询功能
  2. include("show-useragent/show-useragent.php");  //显示国籍、系统、浏览器信息

然后再需要显示的位置加入以下代码。

  1. <?php CID_print_comment_flag();echo ' ';CID_print_comment_browser(); echo convertip(get_comment_author_ip()); ?>

需要加在哪里呢?就本站而言,这里使用的是知更鸟begin主题,需要加在主题目录下的Inc/function/coment-template.php文件里面。找到以下代码。

  1. <span class="comment-meta commentmetadata">

将代码加在这个span的前面就可以了。如下图

wordpress丨更知鸟Begin主题之评论区美化

这样就能同时展示UA信息图标和文字归属地信息了。

以上部署已经完成,不过貌似还有些问题,会遮掩评论达人的图标,需要加一些css来修饰一下。

  1. /*UA信息和运营商位置*/
  2. .country-flag {
  3.     color#000;
  4.     margin-left20px;
  5.     font-weightnormal;
  6.     font-size10px;
  7. }
  8. .WB-OS {
  9.     color#000;
  10.     font-weightnormal;
  11.     font-size10px;
  12. }

将以上代码加入到style.css文件中,然后就完成了。效果图:

wordpress丨更知鸟Begin主题之评论区美化

更多待更新...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  7   博主  0

    • avatar 唯品秀博客 1

      唯品秀前端博客主题开源了,可以瞅瞅博客https://www.weipxiu.com/,主题下载地址:https://github.com/weipxiu/Art_Blog

      • avatar π大大 0

        很不错值得分享

        • avatar 黑猫博客 0

          不错 不错 拿走了,感谢分享。

          • avatar 123 4

            • avatar 123 4

              • avatar 123 4

                • avatar 123 4

                  咋刷新不行