WordPress和子比主题模板&子比美化合集教程

前言

  • 本页主题美化内容是觅知社长在建站时一个一个测试过无任何错误的记录合集,使用之前先参考本站,若觉得实用就拿去用吧,我会持续的更新。

主题美化说明:

  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题,请一定要测试后在进行美化。
  • 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。

必要说明:(核心重点)

  • ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
  • 最新版子比主题)CSS 代码添加到后台:子比主题设置—>自定义代码—>自定义 CSS 样式
  • 最新版子比主题)JS 即 javascript 代码添加到:后台子比主题设置—>自定义代码—>自定义 javascript 代码
  • 最新版子比主题)没有特殊说明的小工具,自定义 HTML 小工具:添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去,保存即可。
  • ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
  • 其他添加方式的,我会在教程里告知,若只需添加 CSS+JS 的教程,我可能不重复告知了,请注意看上面的方法。
  • 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。

下面开始美化教程

美化教程

前言

  • 这个小东西估计大家都很熟悉,一般就是引导用户收藏网站用途,因此分享给大家

添加教程

  • 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
  • 2、添加路径:在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
  • 社长是放在 所有页面-页脚区内部 添加下方代码
<!---CTRL+D 收藏小工具开始--->
<style type="text/css">
#go-fav {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #3d3d3d;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 1)
}

#go-fav span {
    padding: 5px 10px;
    background: rgba(255, 197, 0, 1);
    border-radius: 5px;
    color: #202020;
    margin: 0 5px
}

#go-fav a {
    color: #aeaeae
}

#go-fav a:hover {
    color: var(--focus-color)
}
</style>
<div id="go-fav"> 赶紧收藏我们,查看更多心仪的内容?按<span>Ctrl</span>+<span>D</span>收藏我们 或<a class="find-more" href="/" rel="nofollow noopener" target="_blank"> 发现更多</a></div>
<!---CTRL+D 收藏小工具结束-彩豆博客 www.521cd.cn--->

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

前言:

有朋友联系想要这个效果功能,因为最近比较忙,一直没有分享,正好趁着这次分享一次性分享给大家

使用方法

  • 1、在 zibll 主题目录下,themes/zibll/footer.php文件中的顶部添加下面添加下面的代码:
<!---给网站数据库查询&页面加载耗时功能--->
<center>
<p> 本次数据库查询:<?php echo get_num_queries(); ?>次 页面加载耗时<?php timer_stop(3); ?> 秒</p>
</center>
<!---网站数据库查询&页面加载耗时功能 彩豆博客 www.521cd.cn--->

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

前言:

  • 这个功能适用于喜欢一些二次元的朋友,具体本站就添加效果了,可查看下面的预览截图

使用教程

  • 1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:
  • 2.在代码 28 行 background: url()括号内填写你需要显示的图片链接
/*悬浮按钮美化开始 彩豆博客 www.521cd.cn*/
span.float-btn.more-btn.hover-show.nowave {
    margin-top: 0px
}

.float-right.round.position-bottom {
    background: #fff;
    border-radius: var(--main-radius);
    transition: 0s;
    right: 1px;
    bottom: 170px;
    border-radius: 20px 0 0 20px;
    box-shadow: -5px 3px 10px 0px rgb(5 5 5 / 15%)
}

.float-right.round .float-btn {
    border-radius: 8px 0px 0px 17px
}

.float-right .float-btn {
    background: #fff
}

.float-right.round.position-bottom::before {
    content: '';
    width: 30px;
    height: 60px;
    background: url(填写你显示的图片链接);
    background-size: cover;
    display: block;
    margin: 5px 3px 0 7px;
}


.dark-theme .float-right.round.position-bottom {
    background: #414141;
    border: 1px solid #4a4a4a;
    transition: 0s
}

.dark-theme .float-right .float-btn {
    background: #414141
}

.dark-theme .float-right.round.position-bottom a:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}

.dark-theme .float-right.round.position-bottom span:hover {
    background: #505255;
    --this-color: var(--muted-2-color)
}

span.newadd-btns.hover-show.float-btn.add-btn .hover-show-con.dropdown-menu.drop-newadd>a:hover {
    background-color: #d8d8d836;
    border-radius: 8px
}

a.float-btn.ontop.fade {
    display: none
}
/*悬浮按钮美化结束*/

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客
  • 此功能无需过多赘述,具体效果查看下发效果预览

使用教程:

1.子比主题设置—>自定义代码—>自定义 javascript 代码:,添加以下 JS 代码:

// 早夜间模式切换提示弹窗
$(".toggle-theme").click(function() {
var toggleThemeText = "当前为早间亮白模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "当前为晚间暗黑模式";
$("body").css("background-image","none");
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
}); 
// 早夜间模式切换提示弹窗结束 彩豆博客 www.521cd.cn

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客
  • 这个功能本身类似一个用户中心的样式,也可以认为是导航和投稿的样式,具体使用可自行根据自己需求修改代码中的链接和图片

使用教程:

  • 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
    2、添加路径:在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
  • 3、我是添加在首页侧边栏
  • 4、修改代码中的链接以及图片地址,
<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>
<div id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=931106824@qq.com" target="_blank" rel="noopener"><img title="彩豆博客" src="添加你需要展示的图片" alt="图片" style="border-radius:5px;"></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=931106824@qq.com" target="_blank" style="background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" rel="noopener">发送邮件</a>
<a class="cms_link" href="https://www.521cd.cn/?random" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">随便看看</a>
<a class="grid_link" href="https://www.521cd.cn/" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
</div>
<div>
  <hr>
<a href="/" target="_blank" rel="noopener">点击在线投稿</a>
  <br>
投稿邮箱:<b>931106824@qq.com</b>
  <br>
交流 QQ:<b><a href="https://wpa.qq.com/wpa_jump_page?v=3&uin=931106824&site=qq&menu=yes" target="_blank" rel="noopener">931106824</a></b>
</div>

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

前言:

  • 这个功能其实很多朋友应该都有之前的那种樱花效果,但是用过的都知道那个樱花效果太妨碍阅读了,今天分享给大家一个优化版,减少了数量以及效果优化

安装

  • 将下面的这段代码整合到新建 js 文件,命名 leaves.js,然后引用,就可以看到效果了,我就不上预览图了
  • 默认效果是枫叶,如果想改成其他的可自行更换代码第三行中的文件图片矢量图,
<script src="你上传的文件路径地址/leaves.js"></script>
var stop, staticx;
var img = new Image();
img.src = "https://p1.xywm.ltd/2022/07/31/62e604b42d4cf.webp";

function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
    cxt.save();
    var xc = 20 * this.s / 2;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
    cxt.restore()
};
Sakura.prototype.update = function() {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom("fnr");
        if (Math.random() > 0.4) {
            this.x = getRandom("x");
            this.y = 0;
            this.s = getRandom("s");
            this.r = getRandom("r")
        } else {
            this.x = window.innerWidth;
            this.y = getRandom("y");
            this.s = getRandom("s");
            this.r = getRandom("r")
        }
    }
};
SakuraList = function() {
    this.list = []
};
SakuraList.prototype.push = function(sakura) {
    this.list.push(sakura)
};
SakuraList.prototype.update = function() {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update()
    }
};
SakuraList.prototype.draw = function(cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt)
    }
};
SakuraList.prototype.get = function(i) {
    return this.list[i]
};
SakuraList.prototype.size = function() {
    return this.list.length
};

function getRandom(option) {
    var ret, random;
    switch (option) {
        case "x":
            ret = Math.random() * window.innerWidth;
            break;
        case "y":
            ret = Math.random() * window.innerHeight;
            break;
        case "s":
            ret = Math.random();
            break;
        case "r":
            ret = Math.random() * 4;
            break;
        case "fnx":
            random = -0.5 + Math.random() * 1;
            ret = function(x, y) {
                return x + 0.5 * random - 1.7
            };
            break;
        case "fny":
            random = 1.5 + Math.random() * 0.7;
            ret = function(x, y) {
                return y + random
            };
            break;
        case "fnr":
            random = Math.random() * 0.03;
            ret = function(r) {
                return r + random
            };
            break
    }
    return ret
}

function startSakura() {
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    var canvas = document.createElement("canvas"),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
    canvas.setAttribute("id", "canvas_sakura");
    document.getElementsByTagName("body")[0].appendChild(canvas);
    cxt = canvas.getContext("2d");
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom("x");
        randomY = getRandom("y");
        randomR = getRandom("r");
        randomS = getRandom("s");
        randomFnx = getRandom("fnx");
        randomFny = getRandom("fny");
        randomFnR = getRandom("fnr");
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura)
    }
    stop = requestAnimationFrame(function() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee)
    })
}
window.onresize = function() {
    var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
    startSakura()
};

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false
    } else {
        startSakura()
    }
};
  • 1、这个功能是和随机预览文章的功能,点击一次更换一次文章
  • 2、将下面的 PHP 代码加入到主题目录下:themes/zibll/functions.php 文件中。
  • 3、添加完成之后访问:你的域名+/?random,然后可以自己添加在菜单里面
  • 4、具体效果可以访问查看:https://www.521cd.cn/?random
// 添加随便看看(BY www.521cd.cn)
function random_postlite() {
global $wpdb;
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
if ( isset( $_GET['random_cat_id'] ) ) {
$random_cat_id = (int) $_GET['random_cat_id'];
$query = "SELECT DISTINCT ID FROM $wpdb->posts AS p INNER JOIN $wpdb->term_relationships AS tr ON (p.ID = tr.object_id AND tr.term_taxonomy_id = $random_cat_id) INNER JOIN $wpdb->term_taxonomy AS tt ON(tr.term_taxonomy_id = tt.term_taxonomy_id AND taxonomy = 'category') WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
if ( isset( $_GET['random_post_type'] ) ) {
$post_type = preg_replace( '|[^a-z]|i', '', $_GET['random_post_type'] );
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = '$post_type' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
$random_id = $wpdb->get_var( $query );
wp_redirect( get_permalink( $random_id ) );
exit;
}
if ( isset( $_GET['random'] ) )
add_action( 'template_redirect', 'random_postlite' );
// 随便看看结束(BY www.521cd.cn)

1、关于这个网站复制自动添加版权和原文地址的这个功能之前我也有研究过,网站百度也有很多,但是基本上都是失效的,要么能用也只是在文字内复制之后会自动添加,但是代码质量的就不会自动添加,对于如果不懂 javascript 代码的朋友来说是很头疼的,因此社长也研究了优化一版,分享给大家使用。

方法一:

教程开始

1、添加核心 JS 代码

1.1、子比主题设置—>自定义代码—>自定义底部 HTML 代码:,添加以下代码:

1.2、其他主题自行添加在主题的 head 或 food 文件底部自行测试

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script type="text/javascript">
/**网站内容复制自动添加版权声明和原文地址*/
$(document).on("copy", function(e) {
  var selected = window.getSelection();
  var selectedText = selected.toString().replace(/\n/g, "<br>");
  var copyFooter =
      "<br>-----------------------<br>著作权归作者所有。<br>" +
      "商业转载请联系作者获得授权,非商业转载请注明出处。<br>" +
      "作者:彩豆博客<br> 源地址:" +
      document.location.href +
      "<br>来源:彩豆博客<br>© 版权声明:本文为博主原创文章,转载请务必保留原文链接!";
  if (document.location.pathname === "/") {
    var copyFooter =
        "<br>-----------------------<br>" +
        "来源:彩豆博客<br> 源地址:" +
        document.location.href +
        "<br>© 版权声明:商业转载请联系作者获得授权,非商业转载请注明出处。<br>";
  }
  var msgContent =
      '<span style="font-weight: 700;margin: 0 !important;">【彩豆博客(WWW.521CD.CN)】<br>复制成功,若要转载请务必保留原文链接</span>' + copyFooter;
  layer.msg(msgContent, {
    time: 2000,
    shift: 2,
    shade: 0.3,
    skin: "wiiuii-layer-mode"
  });
  var copyHolder = $("<div>", {
    id: "temp",
    html: selectedText + copyFooter,
    style: {
      position: "absolute",
      left: "-99999px"
    }
  });
  $("body").append(copyHolder);
  selected.selectAllChildren(copyHolder[0]);
  window.setTimeout(function() {
    copyHolder.remove();
  }, 0);
});
</script>

2、添加 css 样式代码

1.1、子比主题设置—>自定义代码—>自定义 css 代码:,添加以下代码:

/*layui 弹窗样式美化*/
.wiiuii-layer-mode{
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: none !important;
border-radius: 8px !important;
}

方法二:

  • 1、将下面的 PHP 代码加入到主题目录下:themes/zibll/header.php文件中,
  • 需要注意的是,需要放在<head> 代码放置在这里</head> 代码中间否则没用
  • 2、其他主题同理,放置在 header.php 文件中,因为这个是全局引用文件
  • 3、自行修改一下,文章来源出自 XXX 博客的文字内容即可
  • 4、添加之后去赶快体验一下吧~如果教程有帮到你,,可以多推荐推荐彩豆博客哈
<!--复制内容自动添加原文地址开始 by 彩豆博客--> 
<script type="text/javascript">

  function addLink() {

  var selection = window.getSelection();

  pagelink = "</br></br>. 文章来源出自[ 彩豆博客 ] 转载请保留原文链接: " + document.location.href;

  copytext = selection + pagelink;

  newdiv = document.createElement('div');

  newdiv.style.position = 'absolute';

  newdiv.style.left = '-99999px';

  document.body.appendChild(newdiv);

  newdiv.innerHTML = copytext;

  selection.selectAllChildren(newdiv);

  window.setTimeout(function () {

  document.body.removeChild(newdiv);

  }, 100);

  }

  document.oncopy = addLink;

</script>
<!--复制内容自动添加原文地址结束 by 彩豆博客--> 

前言:

因为自带的子比主题的独立下载页是没有复制按钮的,如果有提取码密码的话则需要人工复制一下密码,一来很麻烦二来也容易复制错,因此找到了这个一件复制的样式,分享给大家

教程分为两步,添加 css 样式和添加 js 代码即可如下

1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:

/* 
 *by:彩豆博客 www.521cd.cn 
 *子比主题下载页面一键复制提取码功能 css 样式开始
 *请本 CSS 代码放置子比主题设置->全局&功能->自定义 CSS 样式中即可
 */
.but-download .badg {
  position: relative;
  cursor:pointer;
}

.but-download .badg::after {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  top: -11px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  border-top: 10px solid rgb(236, 235, 235);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg::before {
  content: attr(data-before);
  position: absolute;
  width: 100px;
  height: 31px;
  top: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
     -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 14px;
  line-height: 31px;
  border-radius: 4px;
  color: #6c6a6a;
  background-color: rgb(236, 235, 235);
  text-align: center;
  -webkit-transition: .3s;
  -o-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
  opacity: 0;
}

.but-download .badg:hover::after,
.but-download .badg:hover::before {
  opacity: 1;
}
/* 
 *by:彩豆博客 www.521cd.cn 
 *子比主题下载页面一键复制提取码功能 css 样式结束
 */

2.子比主题设置—>自定义代码—>自定义 javascript 代码:,添加以下 javascript 代码:

/* 
 *by:彩豆博客 www.521cd.cn 
 *子比主题下载页面一键复制提取码功能 JavaScript 代码开始
 *请本 JavaScript 代码放置子比主题设置->全局&功能->自定义 javascript 代码中即可
 */
if(document.querySelectorAll(".but-download .badg")!=undefined){
     const reg = /[a-zA-z0-9]/ig;
    const copy1 = document.querySelectorAll(".but-download .badg");
    for (let i = 0; i < copy1.length; i++) {
      copy1[i].index = i;
      copy1[i].setAttribute("data-before", "点击复制");
      copy1[i].addEventListener("click", copyOperation);
      copy1[i].addEventListener("mouseout", copyOk);
    }

    function copyOperation() {
      var oInput = document.createElement("input");
      let text = this.innerText;
      text = text.match(reg).join("");
      oInput.value = text;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.setAttribute("data-before", "已复制");
    }
    function copyOk() {
      setTimeout(() => {
        this.setAttribute("data-before", "点击复制");
      }, 300)
    }
}
/* 
 *子比主题下载页面一键复制提取码功能 JavaScript 代码结束
 *by:彩豆博客 www.521cd.cn 
 */

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客
WordPress和子比主题模板&子比美化合集教程-彩豆博客

这个安装教程就不过多赘述了,也很简单,所有的 JS 和 css 代码都集成在本地,没有外链调用

至于如果需要自己改颜色的话,查看代码当中的注释效果即可

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏

<!--时间进度效果小工具开始-->    
 <style type="text/css">
      .time-schedule-main{/*background-color: white;*/border-radius: 8px;display: flex; justify-content: space-evenly; align-items: center;}.today-schedule,.toweek-schedule,.tomonth-schedule,.toyear-schedule{display: inline-block;width: 50px;height: 100px;background-color: white;border: 1px solid #eee;border-radius: 99px;}.mizhi-schedule-item{position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 99px;}.today-item,.toweek-item,.tomonth-item,.toyear-item{position: absolute;background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);width: 100%;height: 109%;bottom: 0;transition: all 1s;}.schedule-info{display: flex;color: #ff5991;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;flex-direction: column;align-items: center;justify-content: center;}.schedule-tilte{font-size: 12px;font-weight: 700;}.time-schedule-main img{background-repeat: no-repeat;max-width:unset !important;max-height:unset !important;width: 200px;height: 10px;top: 0;left: 0;position: absolute;animation: mizhi_move_wave 2s linear infinite;-webkit-animation: mizhi_move_wave 2s linear infinite;}@-webkit-keyframes mizhi_move_wave{0%{-webkit-transform: translateX(0)}50%{-webkit-transform: translateX(-25%)}100%{-webkit-transform: translateX(-50%)}}@keyframes mizhi_move_wave{0%{transform: translateX(0)}50%{transform: translateX(-25%)}100%{transform: translateX(-50%)}}
      /* 今日剩余背景颜色 */
      .today-item {
        background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
      }
      /* 本周剩余背景颜色 */
      .toweek-item {
        background-image: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
      }
      /* 本月剩余背景颜色 */
      .tomonth-item {
        background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
      }
      /* 今年剩余背景颜色 */
      .toyear-item {
        background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
      }
    </style>
    <div class="time-schedule-main">
      <div class="today-schedule">
        <div class="mizhi-schedule-item">
          <div class="today-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">今天仅剩</span>
            <span class="today-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toweek-schedule">
        <div class="mizhi-schedule-item">
          <div class="toweek-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本周还有</span>
            <span class="toweek-num">100%</span>
          </div>
        </div>
      </div>
      <div class="tomonth-schedule">
        <div class="mizhi-schedule-item">
          <div class="tomonth-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本月剩余</span>
            <span class="tomonth-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toyear-schedule">
        <div class="mizhi-schedule-item">
          <div class="toyear-item">
            <img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">今年还剩</span>
            <span class="toyear-num">100%</span>
          </div>
        </div>
      </div>
    </div>

 <script type="text/javascript">
$(function () {
  $.extend({
    mizhiSchedule: function () {
      var a = new Date(),
        e = 3600 * a.getHours() + 60 * a.getMinutes() + a.getSeconds(),
        c = e / 86400,
        b = (100 - 100 * c).toFixed(1);
      c = (109 - 109 * c).toFixed(2);
      $(".today-num").text(b + "%");
      $(".today-item").css("height", c + "%");
      b = a.getDay();
      0 === b && (b = 7);
      c = (e + 86400 * (b - 1)) / 604800;
      b = (100 - 100 * c).toFixed(1);
      c = (109 - 109 * c).toFixed(2);
      $(".toweek-num").text(b + "%");
      $(".toweek-item").css("height", c + "%");
      b = a.getFullYear();
      c = a.getMonth();
      a = a.getDate();
      var d = new Date(b, c + 1, 0).getDate();
      d = (e + 86400 * (a - 1)) / (86400 * d);
      var f = (100 - 100 * d).toFixed(1);
      (109 - 109 * d).toFixed(2);
      $(".tomonth-num").text(f + "%");
      $(".tomonth-item").css("height", f + "%");
      d = 0;
      f = [
        31,
        (0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 29 : 28,
        31,
        30,
        31,
        30,
        31,
        31,
        30,
        31,
        30,
        31
      ];
      for (var g = 0; g < c; g++) d += f[g];
      a =
        (e + 86400 * (d + a - 1)) /
        (86400 * ((0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 366 : 365));
      e = (100 - 100 * a).toFixed(1);
      a = (109 - 109 * a).toFixed(2);
      $(".toyear-num").text(e + "%");
      $(".toyear-item").css("height", a + "%");
    }
  });
  $.mizhiSchedule();
  setInterval($.mizhiSchedule, 2e3);
  
});

    </script>
<!--www.521cd.cn 时间进度效果小工具结束--> 

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

前言:

这个功能是从 ripro 的主题里面衍生过来,觉得挺好看,就拿过来优化适配了一下,具体效果可以参考本站,安装起来也很简单,不需要再 PHP 中修改,直接在外观小工具里面实现。

安装方法

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏添加下方代码

如果觉得代码太长,可以将下面的 css 样式中的首页最新发布标题里面 css 样式代码,复制下来,放到一个 css 文件当中再引用即可,

引用代码可参考我提供的,将/css/news.css 更改成你的文件路径就可以了

<link rel='stylesheet' id='ripro_chlid_style-css'  href='/css/news.css' type='text/css' media='all' />
<!--NEW 最新发布样式开始-->  
<style type="text/css">
/*首页最新发布标题*/
.zhankr-zx {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  line-height: 1;
}

.zhankr-zx:before {
  margin-right: 10px;
}

.zhankr-zx:after {
  margin-left: 10px
}

.zhankr-zx:before, .zhankr-zx:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  border-radius: 50%;
}

.zhankr-zx span {
  font-family: Futura;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 49px;
  letter-spacing: 5px;
  display: inline-block;
  font-weight: 700;
}

.zhankr-zx .zhankr-zx-n {
  font-size: 20px;
}

.zhankr-zx .zhankr-zx-n strong {
  display: block;
  font-size: 20px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.HhcatboxDes {
  position: absolute;
  opacity: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 180px;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-weight: 600;
  background: #f95491;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.HhCooltitle {
  margin-top: 10px
  }

/*首页最新发布标题*/
</style>
<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>发布</strong>
</div>
</div>
<script>document.querySelectorAll(".zhankr-zx")[0].parentNode.parentNode.style.cssText="background:#fff0;box-shadow:0 0 0";</script>
<!--www.521cd.cn NEW 最新发布样式结束--> 

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

前言:

这个功能我还是很喜欢的因为前两天网站搬家,我检查了一下 uploads 图片文件夹,光图片就已经占用半个服务器空间,因此有了这个文章删除时自动删掉图片附件还是很香的,可以很大程度减缓服务器压力和时间成本

1、只需将下面的 PHP 代码加入到主题目录下:themes/zibll/functions.php 文件底部就可以了。

//删除文章时删除图片附件 www.521cd.cn 开始
function delete_post_and_attachments($post_ID) {
    global $wpdb;
    //删除特色图片
    $thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
    foreach ( $thumbnails as $thumbnail ) {
        wp_delete_attachment( $thumbnail->meta_value, true );
    }
    //删除图片附件
    $attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
    foreach ( $attachments as $attachment ) {
        wp_delete_attachment( $attachment->ID, true );
    }
    $wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');
//删除文章时删除图片附件 www.521cd.cn 结束

在写文章的时候,发布之前你会设置很多标签,比如模板啊,源码,等等,这些关键词,往往需要搜索才能找到,社长给大家分享这个是只要你的文章中包含了你网站的关键词,就会自动添加超链接,也是更好的协助网站收录优化,提高内页收录

1.将下面的 PHP 代码加入到主题目录下:themes/zibll/functions.php 文件中。

// by 彩豆博客文章添加关键词链接开始
function wpkj_auto_add_tag_link($content){
$limit = 1; // 设置同一个标签添加几次链接
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;
$cleankeyword = stripslashes($keyword);
$url = '<a target="_blank" href="'.$link.'" title="'.str_replace('%s', addcslashes($cleankeyword, '$'), __('View all posts in %s')).'">'.addcslashes($cleankeyword, '$').'</a>';
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s';
$content = preg_replace($regEx,$url,$content,$limit);
}
}
return $content;
}
add_filter( 'the_content', 'wpkj_auto_add_tag_link', 1 );  
// by 彩豆博客文章添加关键词链接结束

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

子比主题自带的轮播图按钮样式方方正正的不太好看,优化一下之后变得听贴近整个主题:如下图。

WordPress和子比主题模板&子比美化合集教程-彩豆博客

优化教程:

/*轮播幻灯片按钮样式美化开始 www.521cd.cn*/
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*轮播幻灯片按钮样式美化结束 www.521cd.cn*/

优化后效果演示:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

最近看到很多朋友需要这个效果,因此分享给大家

1.将下面的 PHP 代码加入到主题目录下:themes/zibll/footer.php 文件中。

其他的主题和网站添加方式一样的,只需要添加网站全局引用的文件当中就行,或者 footer.php 文件中

自行修改一下首页和百宝箱的链接改为自己的即可

<!-- 右键美化 by 彩豆博客 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.521cd.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>        
        <li><a href="javascript:void(0);"  onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li style="border-bottom:1px solid gray"><a target="_blank" href="https://www.521cd.cn"><i class="fa fa-refresh fa-fw"></i><span>百宝箱</span></a></li>
        </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
 
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容!") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要百度的内容!") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要谷歌的内容!") : window.open("https://www.google.com/search?q=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
</script>
<!-- 右键美化结束 by 彩豆博客 -->

展示效果

WordPress和子比主题模板&子比美化合集教程-彩豆博客

最近比较忙更新的频率少了一些,正好有朋友说想要这个底部的美化方法,至此分享给大家

原来的样式是这样的:比较单一不好看

WordPress和子比主题模板&子比美化合集教程-彩豆博客

优化之后是这样的:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

教程分为两步,添加 css 样式和添加 HTML 代码即可如下

1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:

/*CSS 代码网站底部按钮美化 www.521cd.cn*/
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    margin-bottom: 5px;
}
.badge-subject {
    display: inline-block;
    background-color: #4d4d4d;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
    background-color: #007ec6;
}
.github-badge .bg-brightgreen {
    background-color: #4dc820;
}
.github-badge .bg-blueviolet {
    background-color: #8833d7;
}
.github-badge .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
    background-color: orange;
}
/*CSS 代码网站底部按钮美化结束 www.521cd.cn*/

2、子比主题设置—>页面&显示—>底部页脚—>板块二,添加以下 HTML 代码:

<!--网站底部按钮美化 html 开始 by 彩豆 www.521cd.cn-->
<div class="github-badge">

  <span class="badge-subject bg-blue">
     <a style="color:#fff" href="https://521cd.cn/links" target="_blank">友链申请</a>
  </span>-
  <span class="badge-subject bg-brightgreen">
     <a style="color:#fff" href="https://521cd.cn/mizhi-sitemap.xml" target="_blank">网站地图</a>
  </span>-
  <span class="badge-subject bg-green">
     <a style="color:#fff" href="https://www.521cd.cn/1057.html" target="_blank">本站主题</a>
  </span>-
  <span class="badge-subject bg-orange">
     <a style="color:#fff" href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">广告合作</a>
  </span>-
    <span class="badge-value bg-blueviolet">
     <a style="color:#fff" href="https://521cd.cn/disclaimers" target="_blank">免责申明</a>
  </span>-

</div>
<!--网站底部按钮美化 html 结束 by 彩豆 www.521cd.cn-->

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏

<div class="gn_box">
    <h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</font><font
            color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
            color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
    </center></h2>
    <center>
        <div id="CountMsg" class="HotDate">
            <span id="t_d"></span>
            <span id="t_h"></span>
            <span id="t_m"></span>
            <span id="t_s"></span>
        </div>
    </center>
    <script type="text/javascript"> function getRTime() {
        var EndTime = new Date('2022/01/01 00:00:00');
        var NowTime = new Date();
        var t = EndTime.getTime() - NowTime.getTime();
        var d = Math.floor(t / 1000 / 60 / 60 / 24);
        var h = Math.floor(t / 1000 / 60 / 60 % 24);
        var m = Math.floor(t / 1000 / 60 % 60);
        var s = Math.floor(t / 1000 % 60);
        document.getElementById("t_d").innerHTML = d + " 天";
        document.getElementById("t_h").innerHTML = h + " 时";
        document.getElementById("t_m").innerHTML = m + " 分";
        document.getElementById("t_s").innerHTML = s + " 秒";
    }
    setInterval(getRTime, 1000);
    </script>
</div>
<!--侧边栏新年倒计时 by 彩豆 www.521cd.cn-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客
  • 1.子比主题设置—>自定义代码—>自定义底部 HTML 代码:,添加以下代码:
  • 2.其他主题自行添加在主题的 head 或 food 文件底部即可
<!--第二款复制提示开始 by www.521cd.cn-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/521cd.cn/fzts/ts.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1426239465/521cd.cn/fzts/ts.css" />

<script type="text/javascript">
function copy_remind(){
  toastr.success("撰文不易,若要转载请务必保留原文链接,谢谢!", "复制成功!");
  clear_toastr(1600); 
   // 动态设置消息提示时间
  function clear_toastr(time){
       setTimeout(
           function(){ 
               toastr.clear();
       }, time);
  }
}
document.addEventListener("copy",function(e){
  if(window.getSelection(0).toString()){
      copy_remind();  //若所选文本不为空则显示
  }  
  else{
    toastr.info("啊噢...你没还没选择复制的内容呢!", "复制提示");  
  }
});  
</script>
<!--第二款复制提示结束 by www.521cd.cn-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客
  • 1、子比主题本身就有公告弹窗的样式,但是有些朋友并未都是这款主题,我也正好看到有很多很好的弹窗样式,至此研究了一下集成给大家

系统公告风格

WordPress和子比主题模板&子比美化合集教程-彩豆博客

安装方法:

  • 1、将下面代码添加知网站 head 或者 food 文件底部即可
  • 2、子比主题用户如想添加这种样式,你关闭自带的然后再自定义底部 HTML 代码添加下面代码即可
  • 3、修改公告中文字内容即可
<!-- 第一种:弹窗公告开始 by www.521cd.cn-->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js" ;=""></script>
<script>
swal('通知','欢迎进入 彩豆博客','success');
</script>
<!-- 第一种:弹窗公告结束 by www.521cd.cn-->

此教程是一位朋友在群内提出的,因为子比主题默认的是下图这个样式,不太好看,因此给大家共勉一下直接上教程

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码

<!--彩豆博客阿里图标库--> 
<script src="//at.alicdn.com/t/font_2820512_sco5ucv703.js"></script>
<!--彩豆博客阿里图标库--> 
  • 2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》 选择你需要放的位置社长是放在 首页-底部全宽度
  • 3、然后在下图的 —》标题右侧按钮文案 这里添加以下代码注意要勾选上(显示框架盒子)

友情链接动态风车图标代码及放置路径:

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche"></use></svg>更多友链</span></a></div>

首页最新发布风车动态图标代码及放置路径:

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche"></use></svg>最新发布
WordPress和子比主题模板&子比美化合集教程-彩豆博客

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客
WordPress和子比主题模板&子比美化合集教程-彩豆博客

1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://imgsa.baidu.com/forum/pic/item/d439b6003af33a871f7e3f0e9b5c10385343b597.jpg) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
/*评论背景图*/

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 :我是添加在首页侧边栏

标题文本:☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>
WordPress和子比主题模板&子比美化合集教程-彩豆博客

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、 网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码,把下面的 js 代码复制粘贴到里面即可。

2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码

<!--好看的鼠标点击爆炸效果 start-->
<!--by:觅知博客-www.521cd.cn-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/meme.js"></script>

<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/anime.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/fireworks.js"></script>
<!--好看的鼠标点击爆炸效果 END-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ,把下面的 php 代码复制粘贴到里面即可。

2、此代码理论上适用所有主题,只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 jsdelivr+github,可直接引用,部分的文字可修改成自己的

<center><span style="color: #ef0c7e;; font-size: 15px"><strong>------本页内容已结束,喜欢请分享------</strong></span></span><br /></center>
<br />
<h3 class="wp-block-zibllblock-biaoti title-theme"><strong>感谢您的来访,获取更多精彩文章请收藏本站。</strong></h3>
<a href="https://521cd.cn" target="_blank"  title="更多精彩文章,请关注“彩豆博客”">
    <img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 9px;  -webkit-border-radius: 9px; -moz-border-radius: 9px;" src="https://cdn.jsdelivr.net/gh/1426239465/98tc@d0774e08f0a0463dcd0fc072406c38534c269d00/2021/08/31/88dbbdacf7bc69c8813ebfdb22c7f7b3.png">
</a>

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分,这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框

2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码,把下面的 css 代码复制粘贴到里面即可。

里面的 8px 大小可自行调节,颜色代码#63B8FF 也可自行设置

/*鼠标移动图片外发光*/
/*by:彩豆博客-www.521cd.cn*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客
  • 虽然这个功能有些鸡肋,不过是可以避免大部分的快捷键打开网站控制台,要查看你网站的源码还是要费点劲的。
  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码,把下面的 css 代码复制粘贴到里面即可。
  • 其他主题的话在你的主题目录下的,footer.php文件中下面添加下面的代码:
WordPress和子比主题模板&子比美化合集教程-彩豆博客

自定义 HTML 代码

<!--安全 1 开始-->
<script type="text/javascript">
        window.onload = function(){
            document.onkeydown = function (){
                var e = window.event || arguments[0];
                //F12
                if(e.keyCode == 123){
                    return false;
                //Ctrl+Shift+I
                }else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
                    return false;
                //Shift+F10
                }else if((e.shiftKey) && (e.keyCode == 121)){
                    return false;
                //Ctrl+U
                }else if((e.ctrlKey) && (e.keyCode == 85)){
                    return false;
                }
            };
            document.oncontextmenu = function (){
                return false;
            }
        }
    </script>
<!--by:彩豆博客-www.521cd.cn-->
<!--安全 1 结束-->

方法 二:不要扒我了

网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码,把下面的 css 代码复制粘贴到里面即可。 其他主题的话在你的主题目录下的,footer.php文件中下面添加下面的代码:

<!--安全 2 不要扒我了开始-->
<script type="text/javascript">
((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert('不要扒我了');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});
</script>
<!--by:彩豆博客-www.521cd.cn-->
<!--安全 2 不要扒我了结束-->

wordpress自带的分页按钮是比较丑的很突兀,经过社长一段下面的 CSS 代码优化之后会变得更加美观

子比主题添加路径:网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式,把下面的 css 代码复制粘贴到里面即可。

自定义 CSS 代码

/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

这个是一个小功能,也是为了留个备忘录,担心下次搬家这个给忘了

添加方法: 后台设置—>外观—>小工具—>添加 Zibll 链接列表(新版),加到标题右侧按钮即可

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链
WordPress和子比主题模板&子比美化合集教程-彩豆博客

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

在 zibll 主题目录下,themes/zibll/footer.php 文件中的“</footer>”(重要)下面添加下面的代码:

<!--底部波浪开始-->
<!--by:彩豆博客-www.521cd.cn-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--by:彩豆博客-www.521cd.cn-->
<!--底部波浪结束-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可

<!--by:彩豆博客-www.521cd.cn-->
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<!--by:彩豆博客-www.521cd.cn-->

展示效果;

WordPress和子比主题模板&子比美化合集教程-彩豆博客

在后台子比主题设置—自定义 CSS 样式 添加以下代码:

#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/*by:彩豆博客-www.521cd.cn*/
/*底部可爱底线提示*/

在 zibll 主题目录下,themes/zibll/footer.php 文件中的“第一行”(重要)下面添加下面的代码:

<!--底部可爱底线提示-->
<!--by:彩豆博客-www.521cd.cn-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://z3.ax1x.com/2021/08/25/hZZUjU.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
<!--底部可爱底线提示-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

1、在 zibll 主题设置中—文章&列表—-文章页 处找到,版权声明添加以下代码

2、如不是子比主题,样式可通用,放置在你的主题文章页底部即可

样式一:

<!--网站声明代码样式一 start-->
<!--by:彩豆博客-www.521cd.cn-->
  <div>
    <fieldset  style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
      <legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;" >
        版权声明
      </legend>
      <span class="btn-info btn-xs">1</span> 本网站名称:<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址:<font color="#09ace2">https://www.521cd.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式一 end-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

样式二:

 <!--网站声明代码样式二 start-->
<!--by:彩豆博客-www.521cd.cn-->
    <div>
      <fieldset
        style="
          border: 1px dashed #008cff;
          padding: 10px;
          border-radius: 5px;
          line-height: 2em;
          color: #6d6d6d;
        "
      >
        <legend
          align="center"
          style="
            width: 30%;
            text-align: center;
            background-color: #008cff;
            border-radius: 5px;
           background-image: linear-gradient(to right, #0066FF, #FF99CC); text-align:center;" 
          "
        >
          文章版权声明
        </legend>
              <span class="btn-info btn-xs">1</span> 本网站名称:<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址:<font color="#09ace2">https://www.521cd.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
 <!--网站声明代码样式二 END-->        

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

样式三

  <!--网站声明代码样式三 start-->
<!--by:彩豆博客-www.521cd.cn-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
<span class="btn-info btn-xs">1</span> 本网站名称:<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址:<font color="#09ace2">https://www.521cd.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式三 end-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

样式四

  <!--文章网站声明代码样式四 start-->
<head>
<style type="text/css">
.post-copyright {
    box-shadow: 2px 2px 5px;
    line-height: 2;
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    transition: box-shadow .3s ease-in-out;
    overflow: hidden;
    border-radius: 12px!important;
    background-color: var(--main-bg-color);
}
.post-copyright:before {
    position: absolute;
    right: -26px;
    top: -120px;
    content: '\f25e';
    font-size: 200px;
    font-family: 'FontAwesome';
    opacity: .2;
}
.post-copyright__title {
    font-size: 22px;
}
.post-copyright_type {
    font-size: 18px;
    color:var(--theme-color)
}
.post-copyright .post-copyright-info {
    padding-left: 6px;
    font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
    display: inline-block;
    width: fit-content;
    padding: 2px 5px;
    font-size: 15px;
}
.muted-3-color {
    color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
    <div class="post-copyright" style="max-width:800px;margin:0 auto;">
        <div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
        <div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
        <div class="post-copyright-m">
            <div class="post-copyright-m-info">
                <div class="post-copyright-a">
                    <strong>文章作者</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.521cd.cn/">彩豆博客</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>隐私政策</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.521cd.cn/privacy-policy">privacy-policy</a></strong>
                    </div>
                </div>
                <div class="post-copyright-u" style="margin:10px 20px">
                    <strong>用户协议</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.521cd.cn/agreement">agreement</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>许可协议 </strong>
                    <div class="post-copyright-cc-info">
                        <a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
                        <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--文章网站声明代码样式四 end by www.521cd.cn-->

展示效果:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

使用方法

你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码,把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码:

// FPS 帧开始
// by:彩豆博客-www.521cd.cn
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();
// by:彩豆博客-www.521cd.cn
// FPS 帧结束

效果展示:

WordPress和子比主题模板&子比美化合集教程-彩豆博客

使用方法

复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里,即可大功告成。

自定义 CSS 代码:

/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by:彩豆博客-www.521cd.cn*/
/*文章随机彩色标签结束*/

使用方法

一般主题都会自带 自定义代码 这样主题设置的,只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦!
如果主题没有 自定义代码 那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美!

彩色滚动条代码 CSS:

/**彩色滚动条样式开始*/
/*by:彩豆博客-www.521cd.cn*/
::-webkit-scrollbar {
  width: 10px;  
  height: 1px;
}
::-webkit-scrollbar-thumb {
  background-color: #12b7f5;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #f6f6f6;
}
/*by:彩豆博客-www.521cd.cn*/
/**彩色滚动条样式结束*/

css代码:

/* logo 扫光开始 */
/*by:彩豆博客-www.521cd.cn*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/*by:彩豆博客-www.521cd.cn*/
/* logo 扫光结束 */

添加到自定 CSS 代码:

/*导航栏字体加粗开始*/
/*by:彩豆博客-www.521cd.cn*/
ul.nav {font-weight: 700;}
/*by:彩豆博客-www.521cd.cn*/
/*导航栏字体加粗结束*/

自定义css代码:

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by:彩豆博客-www.521cd.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by:彩豆博客-www.521cd.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

自定义 CSS 代码:

/*首页文章列表悬停上浮开始*/
/*by:彩豆博客-www.521cd.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by:彩豆博客-www.521cd.cn*/
/*首页文章列表悬停上浮结束*/
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞286 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容