首页分类自定义标题美化
首先这个美化需要子比的小工具，那就是：外观–>>小工具–>>Zibll 文章列表，如果用首页文章会没有的。
直接将下面的代码放到自定义CSS即可，然后图片链接输入自己的动图即可。
.box-body.notop {background: var(--main-bg-color);padding: 5px;padding-left: 1.2em;border-radius: 10px;margin-bottom: 10px;}.title-theme {position: relative;padding-left: 1.3em;font-size: 20px;margin: 5px;}.title-theme::before {content: '';top: -30px;width: 64px;height: 64px;left: -32px;background: url(图片url链接);box-shadow: 0 0 black;background-size: cover;}.title-theme small {font-size: 60%;margin-left: 20px;}.title-theme .ml10::before {position: absolute;content: '';width: 1px;background: var(--theme-color);top: 30%;left: 115px;bottom: 16%;}WordPress子比主题新用户注册随机头像显示
当用户在前台注册时会随机一个头像，后台图像不只是单单一个了，很常用的一个功能，很多网站使用的是第三方插件，今天分享一个简单的修改方法。
此代码放在func.php或者functions.php中
function zib2_sign_in($user_id) {
// 检查用户ID是否有效
if (!$user_id) {
return;
}
// 检查是否通过社交登录
$social_login = get_user_meta($user_id, 'oauth_new', true);
// 构造头像图片的基础文件系统路径
$avatars_base_dir = WP_CONTENT_DIR . '/uploads/tx/'; // 基于WP_CONTENT_DIR的相对路径
// 获取目录下所有图片文件
$avatars = glob($avatars_base_dir . '*.{jpg,jpeg,png,gif}', GLOB_BRACE | GLOB_NOSORT);
// 如果没有找到图片，直接返回
if (empty($avatars)) {
return;
}
// 从图片数组中随机选择一个图片文件
$random_avatar_path = $avatars[array_rand($avatars)];
// 构造完整的随机头像URL
$url = home_url('wp-content/uploads/tx/' . basename($random_avatar_path));
// 更新用户头像的元数据
// 确保zib_update_user_meta函数存在并且可以正确执行
zib_update_user_meta($user_id, 'custom_avatar_id', 1);
zib_update_user_meta($user_id, 'custom_avatar', $url);
}
// 将函数挂载到用户注册钩子上
add_action('user_register', 'zib2_sign_in');评论区块美化
子比主题评论区块增加美化框及背景色，基本可以美化到大改5级评论且拥有颜色变化了。
自己替换图中的图片链接
/*定义日夜间颜色*/
body{
--acg-color:#fff8fa;
--acg-color2:#f8fdff;
}
.dark-theme{
--acg-color:#323335;
--acg-color2:#323335;
}
/* 修改子比主题评论区默认样式 */
#postcomments .commentlist .comment+.comment {
/* 顶部边框设置为1像素宽，颜色为50%不透明度的黑色 */
border-top: 1px solid rgb(50 50 50 / 0%);
/* 内边距设置为0 0 15px 0，意味着上下左右分别是0、0、15px和0 */
padding: 0 0 15px 0;
/* 设置内容不会溢出元素的框，隐藏溢出的部分 */
/*overflow: hidden;*/
/* 设置边框半径为15像素，使边框呈现圆角效果 */
border-radius: 15px;
/* 外边距设置为0 15px 15px，意味着上下左右分别是0、15px、15px和默认值 */
margin: 0 15px 15px;
/* 设置边框宽度为1像素，颜色为默认值（通常是黑色） */
border: 1px solid;
/* 设置元素的定位类型为相对定位 */
position: relative;
/* 设置元素的显示类型为flow-root，这是一个新的CSS显示值，允许元素创建新的格式化上下文，同时保持其在文档流中的位置 */
display: flow-root;
/* 内边距设置为10px，意味着上下左右都是10px，这个属性会覆盖上面已经定义过的padding属性 */
padding: 10px;
}
/* 选择所有在#postcomments下的.commentlist里的.comment元素后面的同级元素，并选择其中序号为奇数的元素 */
#postcomments .commentlist .comment+.comment:nth-child(odd) {
/* 将背景图像设置为粉色星星 */
background-image: url(图片链接);
/* 内边距设置为左边0，右边5px，顶部0，底部51px */
padding: 0 5px 0 51px;
/* 将边框颜色设置为#ff8bb5粉红色 */
border-color: #ff8bb5;
/* 将背景颜色设置为一个变量(--acg-color)，这个变量是我们最开始设置的日夜间背景色 */
background-color: var(--acg-color);
}
/* 选择所有在#postcomments下的.commentlist里的.comment元素后面的同级元素，并选择其中序号为偶数的元素 */
#postcomments .commentlist .comment+.comment:nth-child(even) {
/* 将背景图像设置为蓝色星星 */
background-image: url(图片链接);
/* 内边距设置为左边0，右边5px，顶部0，底部51px */
padding: 0 5px 0 51px;
/* 将边框颜色设置为#71baff80淡蓝色 */
border-color: #71baff80;
/* 将背景颜色设置为一个变量(--acg-color2)，之前我们设置的日夜间颜色 */
background-color: var(--acg-color2);
}
/*从上面我们能够了解到评论美化的基础，那么就可以直接开始评论回复的美化*/
#postcomments .children {
margin-left: 86px;
background: rgb(116 116 116 / 0%);
margin-bottom: 6px;
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
border: 1px solid;
position: relative;
display: flow-root;
}
#postcomments .children:nth-child(even) {
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #71baff80;
background-color: var(--acg-color2);
}
#postcomments .children:nth-child(odd) {
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #ff8bb5;
background-color: var(--acg-color);
}
#postcomments .children .children {
background: rgb(116 116 116 / 0%);
margin-bottom: 6px;
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
border: 1px solid;
position: relative;
display: flow-root;
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #ff8bb5;
background-color: var(--acg-color);
}
/*最后我们会发现评论区第一条评论没有美化到*/
/*于是我们补充第一条评论缺失样式的问题*/
/*如果你只补充第一条评论缺失的样式那么他就是旧版单色的美化*/
#postcomments .commentlist .comment {
border-top: 1px solid var(--main-border-color)
border-top: 1px solid rgb(50 50 50 / 0%);
/*overflow: hidden;*/
border-radius: 15px;
margin: 0 15px 15px;
border: 1px solid;
position: relative;
display: flow-root;
background-image: url(图片链接);
padding: 0 5px 0 51px;
border-color: #71baff80;
background-color: var(--acg-color2);
}网站增加全屏水印
$(document).ready(function() {
var watermark_txt = "鹿泽笔记" + getDate();
watermark({"watermarl_element":"watermark-wrapper", "watermark_txt":watermark_txt});
});
function watermark(settings) {
//默认设置
var defaultSettings={
watermarl_element:"body",
watermark_txt:"",
watermark_x:10,//水印起始位置x轴坐标
watermark_y:10,//水印起始位置Y轴坐标
watermark_rows:2000,//水印行数
watermark_cols:2000,//水印列数
watermark_x_space:50,//水印x轴间隔
watermark_y_space:50,//水印y轴间隔
watermark_color:'#d7d7d7',//水印字体颜色
watermark_alpha:0.3,//水印透明度
watermark_fontsize:'15px',//水印字体大小
watermark_font:'思源黑体',//水印字体
watermark_width:500,//水印宽度
watermark_height:50,//水印长度
watermark_angle:15//水印倾斜度数
};
//采用配置项替换默认值，作用类似jquery.extend
if(arguments.length===1&&typeof arguments[0] ==="object" ) {
var src=arguments[0]||{};
for(key in src) {
if(src[key]&&defaultSettings[key]&&src[key]===defaultSettings[key]){
continue;
} else if(src[key]){
defaultSettings[key]=src[key];
}
}
}
var oTemp = document.createDocumentFragment();
var maskElement=document.getElementById(defaultSettings.watermarl_element) || document.body;
//获取页面最大宽度
var page_width = Math.max(maskElement.scrollWidth,maskElement.clientWidth);
//获取页面最大高度
var page_height = Math.max(maskElement.scrollHeight,maskElement.clientHeight,maskElement.scrollTop);
//水印数量自适应元素区域尺寸
defaultSettings.watermark_cols=Math.ceil(page_width/(defaultSettings.watermark_x_space+defaultSettings.watermark_width));
defaultSettings.watermark_rows=Math.ceil(page_height/(defaultSettings.watermark_y_space+defaultSettings.watermark_height));
var x;
var y;
for (var i = 0; i < defaultSettings.watermark_rows; i++) {
y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
for (var j = 0; j < defaultSettings.watermark_cols; j++) {
x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
var mask_div = document.createElement('div');
mask_div.id = 'mask_div' + i + j;
mask_div.className = 'mask_div';
//mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
mask_div.innerHTML=(defaultSettings.watermark_txt);
//设置水印div倾斜显示
mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
mask_div.style.visibility = "";
mask_div.style.position = "absolute";
mask_div.style.left = x + 'px';
mask_div.style.top = y + 'px';
mask_div.style.overflow = "hidden";
mask_div.style.zIndex = "1029"; // 9999
// pointer-events:none 让水印不遮挡页面的点击事件
mask_div.style.pointerEvents='none';
// 设置边框
// mask_div.style.border="solid #eee 1px";
// 兼容IE9以下的透明度设置
mask_div.style.filter="alpha(opacity=50)";
mask_div.style.opacity = defaultSettings.watermark_alpha;
mask_div.style.fontSize = defaultSettings.watermark_fontsize;
mask_div.style.fontFamily = defaultSettings.watermark_font;
mask_div.style.color = defaultSettings.watermark_color;
mask_div.style.textAlign = "center";
mask_div.style.width = defaultSettings.watermark_width + 'px';
mask_div.style.height = defaultSettings.watermark_height + 'px';
mask_div.style.display = "block";
oTemp.appendChild(mask_div);
};
};
maskElement.appendChild(oTemp);
}
function getDate() {
var d = new Date();
var year = d.getFullYear() >= 10 ? d.getFullYear() : ('0'+d.getFullYear());
var month = d.getMonth()+1 >= 10 ? d.getMonth()+1 : ('0'+d.getMonth()+1);
var day = d.getDate() >= 10 ? d.getDate() : ('0'+d.getDate());
var hour = d.getHours() >= 10 ? d.getHours() : ('0'+d.getHours());
var minute = d.getMinutes() >= 10 ? d.getMinutes() : ('0'+d.getMinutes());
var second = d.getSeconds() >= 10 ? d.getSeconds() : ('0'+d.getSeconds());
return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
}论坛图片按照九宫格排序
将论坛图片修改为九宫格样式
CSS
/*九宫格适配*/
.lists-imgs:not(.count-1)>span {
flex: 0 0 calc(100% / 3 - 4px);
padding-bottom: calc(100% / 3 / 1 - 4px);
margin: 2px;
position: relative;
}
.lists-imgs:not(.count-1) {
display: flex;
flex-wrap: wrap;
--img-count: 9;
width: 70%;
}PHP
打开/inc/functions/bbs/inc/posts.php文件搜索$imgs_max = 4; 把他改成$imgs_max = 9;
👋 感谢您的观看！
© 版权声明
THE END