【WordPress 教程】主题分享按钮代码记录

2022-01-04 0 1,328

wordpress的主题有很多,但真正符合自己审美标准的屈指可数。因此,大多数童鞋在安装主题后都会进行美化,以展示自己的个性,突出自己。开头的主题美化得太多了。建议你根据自己的喜好来折腾。毕竟适合自己的才是最好的!

【WordPress 教程】主题分享按钮代码记录

提示:修改中文主题模板,建议使用专门的编辑工具,如记事本++(免费)。切勿用操作系统附带的笔记本编辑模板文件,否则模板会放错地方。中文模板代码为 UTF-8,无 BOM(无签名)。
[用法]
Robins 主题不需要修改任何文件,只需将下面的css代码添加到主题选项-自定义样式-自定义样式中,或者自己添加到主题 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;  
}  

将其替换成以下代码即可。


/** 喜欢分享 **/  
#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;  
}  

 

至此文章已结束,如转载请注明:汇站网 » 【WordPress 教程】主题分享按钮代码记录

收藏 (0)

微信支付 微信扫一扫

支付宝支付 支付宝扫一扫

打赏二维码
点赞 (0)

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务