子比主题添加文件下载提取码中一键复制功能

前言：

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

美化教程

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

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

/* 
 *by：万事坞 leohi.top 
 *子比主题下载页面一键复制提取码功能 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：万事坞 leohi.top 
 *子比主题下载页面一键复制提取码功能 css 样式结束
 */

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

/* 
 *子比主题下载页面一键复制提取码功能 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 代码结束 
 */

首页文章上方添加一个独立的大 NEW 最新发布样式

美化教程

安装方法

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

<!--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>
<!--NEW 最新发布样式结束-->

如果觉得代码太长，可以将以上代码复制下来，放到一个 css 文件当中再引用即可，

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

<link rel='stylesheet' id='ripro_chlid_style-css'  href='/css/news.css' type='text/css' media='all' />

简单一行CSS样式代码实现网站全局变灰操作方式及教程方法

前言

网站全体变灰主要在用于哀悼缅怀烈士和悼念日使用，国家公祭日等等
勿忘历史勿忘痛

操作教程

只需要在两个文件中添加一行代码就可以实现，具体演示效果可以查看上方截图的效果

1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面

其他网页或者主题直接在 foot 或者 head 文件底部添加即可，记得添加引用即可如

CSS 样式代码：

样式一代码：推荐使用

/*网站整体灰白样式开始一*/
          :root {
            --BG_COLOR: #121212;
            --FONT_COLOR: rgba(255, 255, 255, .87);
            --TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
            --SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
            --TAB_TITLES_HOVER_COLOR: #fff;
            --TITLE_HOVER_COLOR: #0D9BFF;
            --RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
            --FOCUS_BG_COLOR: #222222;
            --TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
            --IMG_DEFAULT_COLOR: #333333;
          }
          html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
          }
          body{
            filter:gray;
          }
/*网站整体灰白样式开始一*/

第二种样式代码：

/*网站整体灰白样式开始二*/
body {
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
}
/*网站整体灰白样式二结束*/

第三种样式代码：

/*网站整体灰白样式开始三*/
html{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}
/*网站整体灰白开始样式三结束*/

利用element显示Notification通知，复制提醒，禁用F12或右键菜单提醒

美化教程

引用cdn资源

代码放在头部（比如主题目录里的header.php）就可以了

<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/packages/theme-chalk/lib/index.css">

如果引入上面的导致网站很卡，请引入下面的资源：

<!-- 引入VUE -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">

以下都是JS，后台主题设置—>自定义代码—>自定义 javascript 代码添加以下代码，记得尽量放在其他代码上面

复制提醒

/* 复制提醒 */
document.addEventListener("copy",function(e){
    new Vue({
        data:function(){
            this.$notify({
                title:"嘿！复制成功",
                message:"若要转载请务必保留原文链接！爱你呦~",
                position: 'bottom-right',
                offset: 50,
                showClose: false,
                type:"success"
            });
            return{visible:false}
        }
    })
})

禁用右键菜单并提醒

/* 禁用右键菜单并提醒 */
document.oncontextmenu = function () {
new Vue({
    data:function(){
        this.$notify({
            title:"嘿！没有右键菜单",
            message:"复制请用键盘快捷键",
            position: 'bottom-right',
            offset: 50,
            showClose: false,
            type:"warning"
        });
        return{visible:false}
    }
})
return false;
}

禁用F12按键并提醒

/* 禁用F12按键并提醒 */
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
  event.keyCode = 0;
  event.returnValue = false;
    new Vue({
            data:function(){
                this.$notify({
                    title:"嘿！别瞎按",
                    message:"坏孩子！",
                    position: 'bottom-right',
                    offset: 50,
                    showClose: false,
                    type:"error"
                });
                return{visible:false}
            }
        })
  return false;
}
};

安装教程：

1、目前适配好的是社长在用的子比主题，如果你也是子比主题的话，直接将下面的代码放置到：

后台–>子比主题设置—>自定义代码—>自定义底部 HTML 代码：,添加以下代码：

<script>
$.getJSON("这里添加你的 api 接口地址?encode=json",function(data){
$("#comment").text(data.text);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

搭建 API 接口

接口搭建的话，下载我这边提供的文件，上传到您需要放置的目录上，然后进行访问，
例如：https://www.yzczi.com/api.php 加上?encode=json 完整的地址就是：https://www.yzczi.com/api.php?encode=json
下载好之后文件，你会发现有一个pinglun.txt的文本文件，里面就是可以自定义添加你需要预设的评论，也可以使用我提前写好的
当然如果想对接别人的的其他语录接口，也是一样的，直接放进接口地址里面接口，需要注意的就是，需要 json 输入格式

源码下载

https://wwb.lanzoub.com/iuNfI0a6rkdc

区别于子比默认的侧边栏评论样式

美化教程

/*首页评论*/
/*by：万事坞-leohi.top*/
.comment-mini-lists>div.posts-mini{border: 1px dashed #999999;border-radius: 10px;margin-top: 10px;}

子比主题切换【早/晚】模式 layer 样式提示弹窗

美化教程

使用教程：

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
});
}); 
// 早夜间模式切换提示弹窗结束

在首页添加一个多功能导航模块小工具

美化教程

先下载我提供的文件
将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
添加路径：在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置
我是添加在首页顶部全宽度
修改代码中的链接以及文字改为自己的就好
将我提供的三个 css 和 js 文件上传到你自己服务器，然后再下面代码填写对应路径

<!--1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
3、我是添加在首页顶部全宽度
4、修改代码中的链接以及文字改为自己的就好
5、将下面的三个 css 和 js 文件上传到你自己服务器，然后再下面代码填写对应路径-->

<!--首页四个导航模块样式文件-->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="添加你刚上传的位置/dhmk.css">
  <link rel="stylesheet" href="添加你刚上传的位置//iconfontdhmk.css">
  <script type="text/javascript" src="添加你刚上传的位置//iconfontdhmk.js"></script>
<!--首页四个导航模块-->
<div class="ads-box"> 
  <div class="home-first"> 
  <div class="container hide_sm"> 
   <div class="row ron"> 
     <!--导航模块 1-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-1 hf-widget-software"> 
    <h3 class="hf-widget-title"> 
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-huiyuan"></use>
    </svg> 
    <a href="/user/" target="_blank" rel="noopener">会员中心</a><span>专属贴心服务</span> 
    </h3> 
    <div class="hf-widget-content"> 
     <div class="scroll-h"> 
      <ul> 
       <li><a href="/user/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-dingyue"></use>
       </svg><span>升级会员</span></a></li> 
       <li><a href="/message/news" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-xiaoxi"></use>
       </svg><span>消息订单</span></a></li> 
       <li><a href="/renzheng/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-zhinan"></use>
       </svg><span>身份认证</span></a></li> 
       <li><a href="/newposts/" target="_blank" rel="noopener">
       <svg class="kuai" aria-hidden="true">
      <use xlink:href="#icon-tougaofabu"></use>
       </svg><span>资源投稿</span></a></li> 
      </ul>       
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 2-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-2"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-tishi"></use>
    </svg>
    <a href="/" target="_blank" rel="noopener">广告服务</a><span>广告位展示</span> </h3> 
    <div class="hf-widget-content"> 
     <div class="no-scroll hf-tags"> 
      <a class="style_orange" href="/" target="_blank" rel="noopener"><span>广告位 1</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 2</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 3</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 4</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 5</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 6</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 7</span></a> 
      <a class="" href="/" target="_blank" rel="noopener"><span>广告位 8</span></a> 
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 3-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-1 hf-widget-hot-cats"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-kuaijiedaohang-ceping"></use>
    </svg>
    <a href="https://bg.leohi.tip/" target="_blank" rel="noopener">快捷导航</a><span>万事坞资源教程</span> </h3> 
    <div class="hf-widget-content"> 
     <div class="scroll-h"> 
      <ul> 
       <li><a href="https://bg.leoihi.top/category/yuanma" target="_blank" rel="noopener">
       <i class="hhicon iconfont icon-moban"></i><span>网站源码</span></a></li> 
       <li><a href="https://bg.leoihi.top/category/wpmb" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-yuanma"></i><span>主题模板</span></a></li> 
<li><a href="https://bg.leoihi.top" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-jiaocheng"></i><span>教程分享</span></a></li> 
<li><a href="https://bg.leoihi.top" target="_blank" rel="noopener">
<i class="hhicon iconfont icon-moban"></i><span>友情链接</span></a></li> 
      </ul> 
     </div> 
    </div> 
     </div> 
    </div> 
      <!--导航模块 4-->
    <div class="col-1-4"> 
     <div class="hf-widget hf-widget-4"> 
    <h3 class="hf-widget-title">
    <svg class="ydicon" aria-hidden="true">
      <use xlink:href="#icon-dongtai"></use>
    </svg>
    <a href="https://leohi.top/" target="_blank" rel="noopener">最新活动</a><span>注册会员享福利</span>      
    </h3> 
    <div class="hf-widget-content"> 
<div class="scroll-h"> 
<ul> 
<li><h3><a href="https://bg.leoihi.top/xin-zaobao" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>每日新闻早报 60s</span><em>立即阅读</em></a></h3></li> 
<li><h3><a href="/user/" target="_blank" rel="noopener"> <i class="icon-time"></i> <span>签到领积分，资源免费下！</span><em>会员中心</em></a></h3></li> 
      </ul>       
     </div> 
    </div> 
     </div> 
    </div> 
   </div> 
  </div> 
   </div>
</div>
<!--首页四个导航模块结束-->

在文章中添加彩色渐变框以及编辑器中添加相应按钮

美化教程

首先把下面的CSS丢到你的主题style.css样式文件内，子比直接丢到自定义CSS里

/*WordPress文章页面新增彩色渐变框*/

#smcos_mhz,#smcos_xgh,#smcos_tkzj,#smcos_xyz,#smcos_gll ,#smcos_xty,#smcos_yyz,#smcos_szh,#smcos_wbk{

/*圆角值,在此定义*/

border-radius: 8px;

}

/*样式-迷幻紫*/

#smcos_mhz{

color: #555555;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(190, 196, 252), -6px 0 12px -5px rgb(189, 196, 252);

background-color: #8EC5FC;

background-image: linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);

background-image: -webkit-linear-gradient(62deg,#8EC5FC 0%,#E0C3FC 100%);

}

/*样式-西瓜红*/

#smcos_xgh{

color: #555555;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(255, 176, 172), -6px 0 12px -5px rgb(255, 161, 174);

background-color: #ff9a8b66;

background-image: linear-gradient(220deg,#FF9A8B 0%,#ff6a8838 55%,#FF99AC 100%);

background-image: -webkit-linear-gradient(220deg,#ff9a8b7a 0%,#ff6a88ab 55%,#ff99ac82 100%);

}

/*样式-天空之境*/

#smcos_tkzj {

color: #555555;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);

background-color: #FFDEE9;

background-image: linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);

background-image: -webkit-linear-gradient(0deg,#ffdee9c4 0%,#b5fffc8f 100%);

}

/*样式-小宇宙*/

#smcos_xyz {

color: #eeeeee;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(12, 85, 141), -6px 0 12px -5px rgba(10, 58, 93, 0);

background-image: radial-gradient( circle 263px at 100.2% 3%, rgba(12,85,141,1) 31.1%, rgba(205,181,93,1) 36.4%, rgba(244,102,90,1) 50.9%, rgba(199,206,187,1) 60.7%, rgba(249,140,69,1) 72.5%, rgba(12,73,116,1) 72.6% );

}

/*样式-橄榄绿*/

#smcos_gll {

color: #eeeeee;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);

background-image: linear-gradient( 102deg, rgba(68,110,92,1) 17.4%, rgba(107,156,120,1) 49.3%, rgba(154,183,130,1) 83.4%, rgba(247,237,191,1) 110.3% );

}

/*样式-小太阳*/

#smcos_xty {

color: #ffffff;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px; */

box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);

background-image: radial-gradient( circle farthest-corner at -8.9% 51.2%, rgba(255,124,0,1) 0%, rgba(255,124,0,1) 15.9%, rgba(255,163,77,1) 15.9%, rgba(255,163,77,1) 24.4%, rgba(19,30,37,1) 24.5%, rgba(19,30,37,1) 66% );

}

/*样式-优雅紫*/

#smcos_yyz {

color: #ffffff;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 10px;*/

box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);

background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(95,117,227,1) 0%, rgba(188,167,205,1) 90% );

}

/*样式-深邃黑*/

#smcos_szh {

color: #c7c7c7;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

/*border-radius: 5px;*/

box-shadow: 6px 0 12px -5px rgb(155, 170, 185), -6px 0 12px -5px rgba(177, 161, 207, 0);

background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,0,0,1) 0%, rgba(64,64,64,1) 90.2% );

}

/*样式-无边框*/

#smcos_wbk {

color: #000000;

overflow: hidden;

margin: 10px 0;

padding: 15px 15px 15px 35px;

}

#smcos_xyz a , #smcos_gll a{

color: #eeeeee;

}

#smcos_szh a{

color: #c7c7c7;

}

#smcos_xty a, #smcos_yyz a{

color: #ffffff;

}

然后把下面的代码放到你主题的函数文件functions.php

/*文本编辑自定义快捷标签按钮*/
 add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 function bolo_after_wp_tiny_mce($mce_settings) {
 ?>
 <script type="text/javascript"> 
 QTags.addButton( 'z_mhz', '迷幻紫', '<div id="smcos_mhz">迷幻紫</div>', "" );
 QTags.addButton( 'z_xgh', '西瓜红', '<div id="smcos_xgh">西瓜红</div>', "" );
 QTags.addButton( 'z_tkzj', '天空之境', '<div id="smcos_tkzj">天空之境</div>', "" );
 QTags.addButton( 'z_xyz', '小宇宙', '<div id="smcos_xyz">小宇宙</div>', "" );
 QTags.addButton( 'z_gll', '橄榄绿', '<div id="smcos_gll">橄榄绿</div>', "" );
 QTags.addButton( 'z_xty', '小太阳', '<div id="smcos_xty">小太阳</div>', "" );
 QTags.addButton( 'z_yyz', '优雅紫', '<div id="smcos_yyz">优雅紫</div>', "" );
 QTags.addButton( 'z_szh', '深邃黑', '<div id="smcos_szh">深邃黑</div>', "" );
 QTags.addButton( 'z_wbk', '无边框', '<div id="smcos_wbk">无边框</div>', "" ); 
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }

添加动态气泡背景

美化教程

主题后台设置中自定义CSS内加入以下代码

<!--canva动效果-->
<div id="bubble"></div>
<script>class BGBubble{constructor(i){this.defaultOpts={id:"",num:100,start_probability:.1,radius_min:1,radius_max:2,radius_add_min:.3,radius_add_max:.5,opacity_min:.3,opacity_max:.5,opacity_prev_min:.003,opacity_prev_max:.005,light_min:40,light_max:70,is_same_color:!1,background:"#f1f3f4"},"[object Object]"==Object.prototype.toString.call(i)?this.userOpts={...this.defaultOpts,...i}:this.userOpts={...this.defaultOpts,id:i},this.color=this.random(0,360),this.bubbleNum=[],this.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,this.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame}random(i,t){return Math.random()*(t-i)+i}initBubble(i,t){const a=window.innerWidth,s=window.innerHeight,n=this.userOpts,e=this.random(n.light_min,n.light_max);this.bubble={x:this.random(0,a),y:this.random(0,s),radius:this.random(n.radius_min,n.radius_max),radiusChange:this.random(n.radius_add_min,n.radius_add_max),opacity:this.random(n.opacity_min,n.opacity_max),opacityChange:this.random(n.opacity_prev_min,n.opacity_prev_max),light:e,color:`hsl(${t?i:this.random(0,360)},100%,${e}%)`}}bubbling(i,t,a){!this.bubble&&this.initBubble(t,a);const s=this.bubble;i.fillStyle=s.color,i.globalAlpha=s.opacity,i.beginPath(),i.arc(s.x,s.y,s.radius,0,2*Math.PI,!0),i.closePath(),i.fill(),i.globalAlpha=1,s.opacity-=s.opacityChange,s.radius+=s.radiusChange,s.opacity<=0&&this.initBubble(t,a)}createCanvas(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),this.canvas.style.display="block",this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight,this.canvas.style.position="fixed",this.canvas.style.top="0",this.canvas.style.left="0",this.canvas.style.zIndex="-1",document.getElementById(this.userOpts.id).appendChild(this.canvas),window.onresize=(()=>{this.canvas.width=window.innerWidth,this.canvas.height=window.innerHeight})}start(){const i=window.innerWidth,t=window.innerHeight;this.color+=.1,this.ctx.fillStyle=this.defaultOpts.background,this.ctx.fillRect(0,0,i,t),this.bubbleNum.length<this.userOpts.num&&Math.random()<this.userOpts.start_probability&&this.bubbleNum.push(new BGBubble),this.bubbleNum.forEach(i=>i.bubbling(this.ctx,this.color,this.userOpts.is_same_color));const a=this.requestAnimationFrame;this.myReq=a(()=>this.start())}destory(){(0,this.cancelAnimationFrame)(this.myReq),window.onresize=null}}const bubbleDemo=new BGBubble("bubble");bubbleDemo.createCanvas(),bubbleDemo.start();</script>

温馨提示：本文最新于2023-07-10 18:23:41进行了更新，某些文章内容具有时效性，若失效或有错误，请在下方留言。

掌柜声明

本站网络名称： 楊仙森万事坞

本站永久网址： https://leohi.top

网站权益说明：文章部分源于网络，仅供大家学习与参考，并无商业用途，如有侵权，可联系本站管理员予以处理。
① 本站一切资源不代表本站立场，并不代表本坞赞同其观点和对其真实性负责。
② 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客若发现请通知坞长。
③ 本站资源来源于网络，如发现失效，可留言告知并第一时间更新。