![zibll子比主题美化教程(备忘录)[更新:6-19]-优诺-小站](http://23.80.90.190:9001/i/2026/03/12/69b294c80139f.png)
31、网站内添加复制文章内容自动添加博客名称和原文地址
- 1、关于这个网站复制自动添加版权和原文地址的这个功能之前我也有研究过，网站百度也有很多，但是基本上都是失效的，要么能用也只是在文字内复制之后会自动添加，但是代码质量的就不会自动添加，对于如果不懂 javascript 代码的朋友来说是很头疼的，因此社长也研究了优化一版，分享给大家使用。
使用方法：
- 1、将下面的 PHP 代码加入到主题目录下：
themes/zibll/header.php 文件中,需要注意的是，需要放在<head></head> 代码中间否则没用 - 2、其他主题同理，放置在 header.php 文件中，因为这个是全局引用文件
- 3、自行修改一下，文章来源出自 XXX 博客的文字内容即可
- 4、添加之后去赶快体验一下吧~如果教程有帮到你，，可以多推荐推荐YOY-小站
<!--复制内容自动添加原文地址开始 by YOY-小站-->
<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 YOY-小站--> 32、 文章内图片鼠标移动到图片外边框自动发光
1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分，这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框
2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码，把下面的 css 代码复制粘贴到里面即可。
里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置
/*鼠标移动图片外发光*/
/*by：YOY-小站-www.uuno.cc*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}效果图：
![图片[1]-zibll子比主题美化教程(备忘录)[更新:6-19]-优诺-小站](http://23.80.90.190:9001/i/2026/03/12/69b2908b2f6f6.jpg)
33、网站右上角添加漂亮复制弹出样式
- 1.子比主题设置—>自定义代码—>
自定义底部 HTML 代码 ,添加以下代码 - 2.其他主题自行添加在主题的
head 或 food 文件底部 即可
<!--第二款复制提示开始 by YOY-小站-->
<script src="http://23.80.90.190:9001/i/2026/03/12/69b2908d0d849.js"></script>
<link rel="stylesheet" href="http://23.80.90.190:9001/i/2026/03/12/69b2908ec2b9b.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 YOY-小站-->效果预览
![图片[2]-zibll子比主题美化教程(备忘录)[更新:6-19]-优诺-小站](http://23.80.90.190:9001/i/2026/03/12/69b2909084293.jpg)
34、利用 redis 和 opcache 给你的网站提速
35、WordPress给博客评论框添加一言随机语录
36、子比主题添加文件下载提取码中一键复制功能
前言
因为自带的子比主题的独立下载页是没有复制按钮的，如果有提取码密码的话则需要人工复制一下密码，一来很麻烦二来也容易复制错，因此找到了这个一件复制的样式，分享给大家
教程分为两步，添加 css 样式和添加 js 代码即可如下
1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
/*
*by：YOY-小站 www.uuno.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：YOY-小站 www.uuno.cc
*子比主题下载页面一键复制提取码功能 css 样式结束
*/2.子比主题设置—>自定义代码—>自定义 javascript 代码：,添加以下 javascript 代码：
/*
*by：YOY-小站 www.uuno.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：YOY-小站 www.uuno.cc
*/预览效果
![图片[3]-zibll子比主题美化教程(备忘录)[更新:6-19]-优诺-小站](http://23.80.90.190:9001/i/2026/03/12/69b290925cd93.jpg)
37、WP 网站有新文章发布时发送邮件通知所有用户
前言
这个功能我还是很喜欢的因为前两天网站搬家，我检查了一下 uploads 图片文件夹，光图片就已经占用半个服务器空间，因此有了这个文章删除时自动删掉图片附件还是很香的，可以很大程度减缓服务器压力和时间成本
1、只需将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件底部就可以了。
//删除文章时删除图片附件开始 by YOY-小站
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 YOY-小站39、WordPress子主主题评论等级添加
40、子比主题内嵌入其它网站页面
© 版权声明
THE END
- 最新
- 最热
只看作者