https://www.amitu.cn/xiaobaitu/tupian/qq.png

加入QQ群

https://www.amitu.cn/xiaobaitu/tupian/wechat.png

https://www.amitu.cn/xiaobaitu/tupian/about.png

联系我们

https://www.amitu.cn/xiaobaitu/tupian/updata.png

请求更新

41· 弹窗公告样式代码

1、子比主题本身就有公告弹窗的样式，但是有些朋友并未都是这款主题，我也正好看到有很多很好的弹窗样式，至此研究了一下集成给大家

系统公告风格

图片[1]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

安装方法：

1、将下面代码添加知网站 head 或者 food 文件底部即可
2、子比主题用户如想添加这种样式，你关闭自带的然后再自定义底部 HTML 代码添加下面代码即可
3、修改公告中文字内容即可

<!-- 第一种：弹窗公告开始 by www.0hao.cc-->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js" ;=""></script>
<script>
swal('通知','欢迎进入觅知短视频去水印系统','success');
</script>
<!-- 第一种：弹窗公告结束 by www.0hao.cc-->

42· 网站内添加复制文章内容自动添加博客名称和原文地址

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.0HAO.CC)】<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 零号资源网-->

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

前言：

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

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

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

/* 
<!--by：零号资源网-www.0hao.cc-->
 *子比主题下载页面一键复制提取码功能 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.0hao.cc--> 
 *子比主题下载页面一键复制提取码功能 css 样式结束
 */

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

/* 
<!--by：零号资源网-www.0hao.cc--> 
 *子比主题下载页面一键复制提取码功能 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.0hao.cc--> 
 */

效果预览：

图片[2]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

图片[3]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

44· 首页侧边栏添加一个当前时间进度效果小工具

这个安装教程就不过多赘述了，也很简单，所有的 JS 和 css 代码都集成在本地，没有外链调用
至于如果需要自己改颜色的话，查看代码当中的注释效果即可
1、在后台—》外观—》小工具—》自定义 HTML—》选择你需要放的位置社长是放在 首页-首页侧边栏

此处内容已隐藏，请评论后刷新页面查看.

45· 首页文章上方添加一个 NEW 最新发布样式

前言：
这个功能是从 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' />

此处内容已隐藏，请评论后刷新页面查看.

效果预览：

图片[4]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

46· wp 网站有新文章发布时发送邮件通知所有用户

前言：
这个功能的话算上一个激活老用户的功能吧，如非必要可以不用，因为如果你的网站注册用户比较多，我是不建议使用的，因为代码会执行你数据库下的所有用户邮箱进行发送，可能会操作服务器堵塞。具体效果应该有朋友昨天收到了我的测试邮件哈哈，
1、只需将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。
2、然后把里面的链接网站改成你自己的就可以了

此处内容已隐藏，请评论后刷新页面查看.

效果预览：

图片[5]-WordPress和子比主题模板&网站美化方法教程2024/10/12更新-小白兔技术部落

47· 子比给你的评论区添加一个自动输入随机评论文字 API 功能

48· WordPress 博客消息评论推送到企业微信通知提醒可推送到微信

49· 网站底部添加 CTRL+D 收藏按钮

前言
这个小东西估计大家都很熟悉，一般就是引导用户收藏网站用途，因此分享给大家
添加教程
1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
社长是放在所有页面-页脚区内部添加下方代码

此处内容已隐藏，请评论后刷新页面查看.

50· 给网站底部添加数据库查询和页面加载耗时功能

前言：
有朋友联系想要这个效果功能，因为最近比较忙，一直没有分享，正好趁着这次分享一次性分享给大家
使用方法
1、在 zibll 主题目录下，themes/zibll/footer.php文件中的顶部添加下面添加下面的代码：

<!---给网站数据库查询&页面加载耗时功能--->
<center>
<p> 本次数据库查询：<?php echo get_num_queries(); ?>次 页面加载耗时<?php timer_stop(3); ?> 秒</p>
</center>
<!---网站数据库查询&页面加载耗时功能零号资源网 www.0hao.cc--->

效果预览

温馨提示：本文最后更新于2024-10-12 21:46:42，某些文章具有时效性，若有错误或已失效，请在下方留言或联系兔子警长。

文章版权声明 1 本网站名称：小白兔技术部落
2 本站永久网址：https://www.amitu.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1738220177进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

------本页内容已结束，喜欢请分享------