知更鸟主题分享美化以及百度分享在HTTPS中失效的问题修复

  • A+
所属分类:网站搭建

知更鸟主题分享美化以及百度分享在HTTPS中失效的问题修复

一、百度分享HTTPS中失效的问题修复

在查看知更鸟的主题的时候发现,在模板函数(functions.php中),有这么一段代码。

wp_register_script( 'bd_share', get_template_directory_uri() . "/js/bd-share.js", array(), version, true );

以这里可知,百度分享的代码是放在js/bd-share.js当中的。

于是到js/bd-share.js,找到了百度分享的代码,修改为本地使用,配合静态的static文件即可。

with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://www.ishare.work/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];// 用于本地调用

本地调用所需要的static文件下载地址:地址

二、分享按钮美化方法

1.在主题css(一般是放在样式表style.css当中)里面找到如下代码,需要将这段代码替换掉。

替换后的效果,如图所示:

/** 喜欢分享 **/
#social {
position: relative;
margin: 50px auto;
}
.social-main {
position: relative;
margin: 0 auto;
width: 243px;
}
.social-main span {
float: left;
}
.social-main a {
color: #999;
line-height: 36px;
border-radius: 2px;
}
.share-s a, .shang-s a {
text-align: center;
}
.like a {
float: left;
padding-left: 15px;
}
.social-main a:hover {
background: #f1f1f1;
color: #444;
transition: all 0.2s ease-in 0s;
}
.like a {
background: #fff;
width: 120px;
display: block;
border: 1px solid #ddd;
}
.share-s a {
background: #fff;
width: 120px;
display: block;
padding-left: 15px;
border: 1px solid #ddd;
}
.social-main i {
color: #999;
margin: 0 5px 0 0;
}
/** 赏 **/
.shang-empty {
position: absolute;
left: 90px;
top: 0px;
width: 62px;
height: 38px;
overflow: hidden;
}
.shang-empty span {
background: #fff;
width: 60px;
height: 60px;
display: block;
margin: -10px 0 0 0;
border-radius: 60px;
border: 1px solid #ddd;
}
.shang-p a {
position: absolute;
background: #fff;
left: 96px;
top: -5px;
width: 48px;
height: 48px;
font-size: 16px;
line-height: 45px;
display: block;
border: 1px solid #ddd;
border-radius: 40px;
left: 101px\9;
top: 0\9;
width: 38px\9;
height: 38px\9;
line-height: 35px\9;
}
.shang-s {
height: 37px;
}
#shang {
width: 280px;
display: block;
}
.shang-img {
float: left;
}
.shang-img img {
width: 140px;
height: auto;
}
.shang-main h4 {
font-size: 15px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.shang-main i {
color: #ff0000;
}
/** 分享 **/
#share {
position: absolute;
top: -60px;
rightright: -29px;
width: 302px;
height: 68px;
display: none;
z-index: 999;
}
#share a {
float: left;
background: #999;
font-size: 20px !important;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
margin-left: 4px;
padding-left: 0;
text-align: center;
border-radius: 3px;
background: rgba(128, 128, 128, 0.9);
}
#share .be-addbox:hover {
background: #7ab951 !important;
}
#share .be-qzone:hover {
background: #ff7400 !important;
}
#share .be-stsina:hover {
background: #ff0000 !important;
}
#share .be-tqq:hover {
background: #46c0e6 !important;
}
#share .be-renren:hover {
background: #3b68ac !important;
}
#share .be-weixin:hover {
background: #006f1d !important;
}
.bd_weixin_popup {
height: 250px !important;
}
.bd_weixin_popup_foot {
display: none;
}

2.替换后的代码:

/** 喜欢分享 **/
#social {
position: relative;
margin: 50px auto;
}
.social-main {
position: relative;
margin: 0 auto;
width: 243px;
}
.social-main span {
float: left;
}
.social-main a {
color: #fff;
line-height: 36px;
border-radius: 40px;
}
.share-s a, .shang-s a {
text-align: center;
}
.like a {
float: left;
padding-left: 15px;
}
.social-main a:hover {
background: #696969;
color: #fff;
transition: all 0.2s ease-in 0s;
}
.like a {
background: #FF0000;
width: 120px;
display: block;
border: 1px solid #ddd;
}
.share-s a {
background: #0000FF;
width: 120px;
display: block;
padding-left: 15px;
border: 1px solid #ddd;
}
.social-main i {
color: #fff;
margin: 0 5px 0 0;
}
/** 赏 **/
.shang-empty {
position: absolute;
left: 90px;
top: 0px;
width: 62px;
height: 38px;
overflow: hidden;
}
.shang-empty span {
background: #fff;
width: 60px;
height: 60px;
display: block;
margin: -10px 0 0 0;
border-radius: 60px;
border: 1px solid #ddd;
}
.shang-p a {
position: absolute;
background: #ffab2e;
left: 96px;
top: -5px;
width: 48px;
height: 48px;
font-size: 16px;
line-height: 45px;
display: block;
border: 1px solid #ddd;
border-radius: 40px;
left: 101px\9;
top: 0\9;
width: 38px\9;
height: 38px\9;
line-height: 35px\9;
}
.shang-s {
height: 37px;
}
#shang {
width: 280px;
display: block;
}
.shang-img {
float: left;
}
.shang-img img {
width: 140px;
height: auto;
}
.shang-main h4 {
font-size: 15px;
font-size: 1.5rem;
text-align: center;
margin-bottom: 10px;
}
.shang-main i {
color: #ff0000;
}
/** 分享 **/
#share {
position: absolute;
top: -60px;
rightright: -29px;
width: 302px;
height: 68px;
display: none;
z-index: 999;
}
#share a {
float: left;
background: #999;
font-size: 20px
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
margin-left: 4px;
padding-left: 0;
text-align: center;
border-radius: 20px;
background: rgba(128, 128, 128, 0.9);
}
#share .be-addbox {
color: #7ab951;
border: 1px solid #7ab951;
background: #fff;
}
#share .be-addbox:hover {
background: #7ab951 !important;
color: #fff !important;
}
#share .be-qzone {
color: #ff7400;
border: 1px solid #ff7400;
background: #fff;
}
#share .be-qzone:hover {
background: #ff7400 !important;
color: #fff !important;
}
#share .be-stsina {
color: red;
border: 1px solid red;
background: #fff;
}
#share .be-stsina:hover {
background: #ff0000 !important;
color: #fff !important;
}
#share .be-tqq {
color: #46c0e6;
border: 1px solid #46c0e6;
background: #fff;
}
#share .be-tqq:hover {
background: #46c0e6 !important;
color: #fff !important;
}
#share .be-renren {
color: #3b68ac;
border: 1px solid #3b68ac;
background: #fff;
}
#share .be-renren:hover {
background: #3b68ac !important;
color: #fff !important;
}
#share .be-weixin {
color: #006f1d;
border: 1px solid #006f1d;
background: #fff;
}
#share .be-weixin:hover {
background: #00ff43 !important;
color: #fff !important;
}
.bd_weixin_popup {
height: 250px !important;
}
.bd_weixin_popup_foot {
display: none;
}

发表评论

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