主题美化合集，【子比主题zill美化教程(备忘录)】欢迎查看！！！

正文开始阅读，请点击右上角“关注”按钮，关注我们

------正文内容展示，开始阅读新内容------

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

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

使用方法：

1、将下面的 PHP 代码加入到主题目录下：themes/zibll/header.php文件中,需要注意的是，需要放在<head> 代码放置在这里</head> 代码中间否则没用
2、其他主题同理，放置在 header.php 文件中，因为这个是全局引用文件
3、自行修改一下，文章来源出自 XXX 博客的文字内容即可
4、添加之后去赶快体验一下吧~如果教程有帮到你，可以多推荐推荐

<!--复制内容自动添加原文地址开始 BY：映凡空间-www.yfkj6.com--> 
<script type="text/javascript">

  function addLink() {

  var selection = window.getSelection();

  pagelink = "</br></br>. 文章来源出自[ YOY-小站 ] 转载请保留原文链接: " + 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：映凡空间-www.yfkj6.com-->

32、文章内图片鼠标移动到图片外边框自动发光

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

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

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

/*鼠标移动图片外发光*/
/*BY：映凡空间-www.yfkj6.com*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}

33、添加透明复制提醒[复制提醒]

教程介绍

今天给使用子比主题的新手小白讲讲如何添加“透明复制提醒”一般各位博主网站上都已经添加了还有的人不会所以我就借”子比主题美化板块”来给大家分享下这个教程，不多说了教程开始。

自定义javascript代码

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【映凡空间站长提醒】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

效果图展示

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

<!--透明复制提示开始--> 
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->

34、利用 redis 和 opcache 给你的网站提速

给网站提提速&使用Redis和opcache为网站加速教程

3年前

238813

35、WordPress给博客评论框添加一言随机语录

代码-在header、footer等位置添加以下：【子比主题放置在后台自定义】

<script>
$.getJSON("https://tenapi.cn/yiyan/?format=json",function(data){
$("#comment").text(data.hitokoto);
});
$(function(){
$("#comment").click(function() {
$(this).select();
})
})
</script>

如果你的评论框id不是comment，则需要修改，首先右键评论框-审查元素-查看id或者class，选其一即可，之后把获取的id或者class替换到上述代码中的#conment

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

前言

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

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

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

/* 
 *BY：映凡空间-www.yfkj6.com/
 *子比主题下载页面一键复制提取码功能 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.yfkj6.com/ 
 *子比主题下载页面一键复制提取码功能 css 样式结束
 */

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

/* 
 *BY：映凡空间-www.yfkj6.com/
 *子比主题下载页面一键复制提取码功能 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.yfkj6.com/ 
 */

效果图

37、WP 网站有新文章发布时发送邮件通知所有用户

捣鼓了下WordPress发布文章或更新文章会发邮件通知已注册的用户，已经过测试，用户不想给邮箱打扰可以在消息通知中取消掉文章评论该选项，这里看下效果图

记得把代码放在主题目录下functions.php文件中

//邮件通知 BY：映凡空间-www.yfkj6.com
function newPostNotify($post_ID) {
     if( wp_is_post_revision($post_ID) ) return;
     global $wpdb;
     $blogurl   = get_bloginfo('url');    //获取首页链接
     $get_post_info = get_post($post_ID);
     if ( $get_post_info->post_status == 'publish' && $_POST['original_post_status'] != 'publish' ) {
         // 读数据库，获取所有用户的email
         $wp_user_email = $wpdb->get_results("SELECT DISTINCT * FROM $wpdb->users");
         // 依次给每个Email发邮件
        foreach ( $wp_user_email as $email ) {
            $user_id = $email->ID;
            //用户是否接收
            if (!zib_msg_is_allow_receive($user_id, 'posts')) {return;}
            $fsemail = $email->user_email;
             // 邮件标题：博客有新文章
            $subject = 'YOY-博客有新文章';
             // 邮件内容：新文章网址：+ URL
            $message = '您好！'.$email->display_name.'<br>您浏览过的YOY-博客更新了一篇新文章：' . get_permalink($post_ID).'<br><br>如有打扰在<a href="'.$blogurl.'/user" rel="noopener" target="_blank">消息通知</a>中关闭掉文章评论选项即可';
             // 发邮件
            wp_mail($fsemail, $subject, $message);
         }
     }
}
add_action('publish_post', 'newPostNotify');

38、WP 网站文章删除时自动删除内容文章中的图片和附件内容

前言

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

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

//删除文章时删除图片附件 BY：映凡空间-www.yfkj6.com/ 开始
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');
//删除文章时删除图片附件 BY：映凡空间-www.yfkj6.com/ 结束

39、WordPress子主主题评论等级添加

40、子比主题内嵌入其它网站页面