共有 0 条评论

wordpress多说评论框核心脚本embed.js本地化+回复后显示浏览器及操作系统信息 – 小冉的博客

wordpress多说评论框核心脚本embed.js本地化+回复后显示浏览器及操作系统信息

一、embed.js本地化

多说社会化评论框核心脚本embed.js文件是个多说官方提供的公用文件,如果官方渠道过于拥挤,或者服务器故障(这个已经有过了~~),就会导致页面加载过慢或者完全无法加载,如果我们将其下载下来,放到我们自己的空间,就会使加载速度有一定的提升,同时也可以对多说评论框做一些个性化调整,因为我们使用的多说评论框主体代码全部都在这里面。以下用wordpress的多说插件为例。

首先打开多说核心脚本的远程文件:embed.js【点此下载】,然后点击右键-另存为,将其保存下来,上传到你自己的空间里。

然后用flashfxp等FTP客户端软件找到wordpress的【wp-content/plugins/duoshuo】目录,找到【WordPress.php】,用各种文本编辑器打开,如:记事本,我比较喜欢用Notepad++。

打开【WordPress.php】,搜索“embed.js”,会找到两处网址:embed.js【点此下载】,将这两处替换为你上传后的embed.js地址,推荐将embed.js上传至多说插件目录:【wp-content/plugins/duoshuo】,如上传至多说插件目录,【WordPress.php】中的两处替换网址就改为【wp-content/plugins/duoshuo/embed.js】,然后保存上传即可。

刷新下页面,然后点击鼠标右键 查看源代码-搜索 embed.js,如果显示wp-content/plugins/duoshuo/embed.js,而且多说评论框区域一切正常,那么恭喜您,多说社会化评论框核心脚本embed.js本地化就完全成功了!

您也可以用这种方法,将embed.js上传至七牛云存储等CDN当中就能使速度再次提升!

二、多说回复后显示浏览器及操作系统信息

修改前请确保您的多说核心脚本embed.js已经本地化

检查方法:在有多说回复框的页面点击鼠标右键查看源代码,搜索embed.js,如果找到:http://static.duoshuo.com/embed.js 这条网址,说明您的多说没有做过本地化

注意:回复本文就可以查看到效果了

然后在主题的样式表内(主题目录内的style.css文件)添加如下样式代码:

/*多说UA开始*/
span.ua{
 margin: 0 1px!important;
 color:#FFFFFF!important;
 /*text-transform: Capitalize!important;
 float: right!important;
 line-height: 18px!important;*/
}
.ua_other{
 background-color: #ccc!important;
 color: #fff;
 border: 1px solid #BBB!important;
 border-radius: 4px;
}
.ua_ie{
 background-color: #428bca!important;
 border-color: #357ebd!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_firefox{
 background-color: #f0ad4e!important;
 border-color: #eea236!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_maxthon{
 background-color: #7373B9!important;
 border-color: #7373B9!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_ucweb{
 background-color: #FF740F!important;
 border-color: #d43f3a!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_sogou{
 background-color: #78ACE9!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_2345explorer{
 background-color: #2478B8!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_2345chrome{
 background-color: #F9D024!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_mi{
 background-color: #FF4A00!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_lbbrowser{
 background-color: #FC9D2E!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_chrome{
 background-color: #EE6252!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_qq{
 background-color: #3D88A8!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_apple{
 background-color: #E95620!important;
 border-color: #4cae4c!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.ua_opera{
 background-color: #d9534f!important;
 border-color: #d43f3a!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
  
  
.os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
 background-color: #39b3d7!important;
 border-color: #46b8da!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
  
.os_android {
 background-color: #98C13D!important;
 border-color: #01B171!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_ubuntu{
 background-color: #DD4814!important;
 border-color: #01B171!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_linux,.os_other {
 background-color: #3A3A3A!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_mac{
 background-color: #666666!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_unix{
 background-color: #006600!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
.os_nokia{
 background-color: #014485!important;
 border-color: #1F1F1F!important;
 border-radius: 4px;
 padding: 0 5px!important;
}
/*多说UA结束*/

如果您需要再美化一下,向本站的一样在前面加上地球、电脑、微信等小图标样式,请下载Font Awesome,获得其他图标请访问:其他图标 http://fontawesome.io/icons/

它提供了479中小图标,只需要将下载到的 css 和 fonts 两个目录上传后(注意: css 和 fonts 需要上传至站点根目录),在header内引入上传后的CSS文件即可,非常方便!

在header.php中间插入以下代码引入css:


注意:css目录内有两个css文件:
<blockquote>font-awesome.css
font-awesome.min.css</blockquote>
font-awesome.min.css 是 font-awesome.css 的压缩版!

保存上传后就可以显示了,快去试试吧!

如果您觉得本文对大家有帮助,请一定记得点击下方的分享按钮召唤您滴小伙伴前来围观啊!

2017年10月03日,国庆放假闲来无事,回来看看自己的博客,之前还在各种鼓捣多说呢,现在多说居然关门了,无奈换回了自带的评论,美化下自带的评论,教程写在这里希望对大家有所帮助.

一般来说,想显示评论者的操作系统和浏览器只需要一个插件WP-UserAgent即可,但是很多用户不仅足于只显示这两个,同时还想要有运营商的信息,本文将做介绍。效果如下面评论框

第一步、部署文件

1、下载show-useragent文件

链接:

下载 “wp添加回复浏览器信息” 1bpatayz – 已下载47次 –

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

 

第二步、引用文件

将以下代码放到主题目录下的functions.php

 

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

第三步、显示位置添加

现在我们只需要将以下代码放到指定位置,它就能显示了。一般主题而言,在主题根目录comment-template文件内 ,调用系统评论的在/wp-includes/class-walker-comment.php,找到


在它的下面添加以下代码

    <!--?php CID_print_comment_flag();/*国籍*/ echo ' ';/*空格*/ CID_print_comment_browser();/*浏览器*/ echo convertip(get_comment_author_ip());/*运营商*/ ?-->

如果你的图标显示位置不是很好,可以加以下两行css代码调整

/*调整留言者系统浏览器和运营商位置*/
.ua-info {
    margin-left: 30px;
}
.WB-OS img {
    vertical-align: -3px;
}

至此我们已经完美配置成功.

  • 用支付宝打我
  • 用微信打我

你可以像猪一样的生活,但你永远不会像猪一样快乐!!!

41条回应:“wordpress多说评论框核心脚本embed.js本地化+回复后显示浏览器及操作系统信息”

  1. “同盟源 原文中“其他浏览器及及其他操作系统信息”的CSS错误样式,现在我已修正现供大家参考!!!”我是用link rel引用样式表,你说的只是适用于你的主题吧…

  2. ..............说道:

    妥妥的

  3. 小酷说道:

    phpcms的怎么实现多说评论添加访客浏览器操作系统判断

  4. 娜音娜语说道:

    不错,我学习了

  5. 最励志官网说道:

    好久没来了,过来踩踩

  6. 歪妖内涵网说道:

    不错的网站,很喜欢,期待互访

  7. 话未了说道:

    用处有点但不会太大,因为评论框内的资源如图片、css等无法本地化

  8. 好久没来了,过来踩踩

  9. 小众网站说道:

    请教个问题:这个多说访客的用户等级是怎么实现的啊?

  10. 小苍老师说道:

    谢谢!博主提供!好样的

  11. 乐儿说道:

      半夜,我在邻居窗户下玩手机吃零食,突然房门大开。
      一围着浴巾的MM拿着扫把向我打来“没见过偷看人家洗澡还TM带零食的”
      “大姐我真是来蹭wifi的”。说多了都是泪,大伙听我解释………

  12. Denton说道:

    不错,参考一下,不过多说已经升级新版本了,现在都支持微信登陆了,你这个版本旧了,我的网站www.urkeji.com 换了新版本,欢迎访问。

  13. 小冉博客说道:

    wordpress 多说插件又更新

  14. 小熊说道:

    大神 vip代码怎么写呢?求指教[威武]

  15. 你的评论 是怎么弄的 这么好看~~~

  16. 金龙说道:

    nhjghjgguguiuiuikhkhhkjhkj

  17. Thinkerchan说道:

    博主来分析多说js源码吧

发表评论

电子邮件地址不会被公开。 必填项已用*标注