子比美化

518

美化说明

  • 教程来于网络搜集，自行判断是否可用
  • 美化代码可能引起各种问题，请自行测试

美化教程

PHP代码放置于funtions.php或func.php文件最下面即可

图片[1]-子比美化-Z天空
//新文章发布角标
function add_new_label_to_post_title($title, $id) {
    if (!is_admin() && !is_single()) {
        $post_time = get_the_time('U', $id);
        if (time() - $post_time <= 24 * 60 * 60) {
            $title .= ' <div class="tianyishangke-new-icon">NEW</div>';
        }
    }
    return $title;
}
add_filter('the_title', 'add_new_label_to_post_title', 10, 2);

css代码放后台自定义代码，自定义CSS样式区域

/*新文章发布图标样式*/
.posts-item{
    position: relative;
    overflow: visible; 
}

.tianyishangke-new-icon{
    position: absolute;
    top: 15px;
    right: 0; 
    padding: 5px 10px;
    background: #ff2626;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    border-radius: 5px 0 0 5px;
}

.tianyishangke-new-icon:before {
    position: absolute;
    content: " ";
    display: block;
    width: 7px;
    height: 110%;
    padding: 0 0 7px;
    top: 0;
    right: -7px; 
    background: inherit;
    border-radius: 0 5px 5px 0;
}

.tianyishangke-new-icon:after {
    position: absolute;
    content: " ";
    display: block;
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0.35);
    bottom: -3px; 
    right: -5px; 
    border-radius: 0 5px 5px 0;
}
图片[2]-子比美化-Z天空

1.进入你的后台，点击–外观—主题编辑器–先点击 functions.php 文件，把代码下面代码加入即可，无需修改，然后点击更新文件

图片[3]-子比美化-Z天空
//WordPress 站点显示页面加载时间、数据库查询次数及内存占用
function performance( $visible = false ) {
  $stat = sprintf( '本页生成数据库 %d 次查询，耗时 %.3f 秒，使用 %.2fMB 内存',
    get_num_queries(),
    timer_stop( 0, 3 ),
    memory_get_peak_usage() / 1024 / 1024
  );
  echo $visible ? $stat : "<!-- {$stat} -->" ;
}

2.找到 footer.php文件 然后添加如下代码  然后点击更新

图片[4]-子比美化-Z天空
<center><?php if(function_exists('performance')) performance(true) ;?></center>
图片[5]-子比美化-Z天空

将以下css代码追加保存到主题设置->自定义代码->自定义CSS代码！

/*文章标题加上渐变彩色文字*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}

@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: -100% 0
  }
}

图片[6]-子比美化-Z天空

将以下css代码追加保存到主题设置->自定义代码->自定义CSS代码！

/*为你的昵称添加流彩文字效果*/
.display-name{
background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-size: 100% 600%;
animation: wzw 10s linear infinite;
}
@keyframes wzw {
0% {
background-position: 0 0;
}

100% {
background-position: 0 -300%;
}

}

进入主题设置->全局&功能->自定义代码，将以下代码中的图片地址修改为你的图片地址后，保存到自定义CSS样式

CSS代码1：

/***日间主题模式***/
body {
    background-image: url("https://z1293.top/z1293.jpg");/**这里改为你自己的图片地址**/
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("https://z1293.top/z1293.jpg");/**这里改为你自己的图片地址**/
    background-size: cover;
}

CSS代码2：(说明：图片自己换，夜间无背景，全黑。)

/*背景图*/
body {background: var(--body-bg-color);} :root{--body-bg-color:url(https://z1293.top/z1293.jpg) top fixed;}

需要注意的是，网站背景图片的色调，亮度等都需要和整体颜色相互配合才能达到较好的效果，背景太花哨或者颜色不合适都只会让网站变得很丑！

自定义javascript代码

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【小鱼的避风港(WWW.XYXZ2021.COM)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

自定义底部HTML代码

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

复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里，即可大功告成。

/*文章随机彩色标签*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
图片[7]-子比美化-Z天空

在后台主题设置里的自定义JS代码里添加

function clickEffect() {
        let balls = [];
        let longPressed = false;
        let longPress;
        let multiplier = 0;
        let width, height;
        let origin;
        let normal;
        let ctx;
        const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
        const canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
        const pointer = document.createElement("span");
        pointer.classList.add("pointer");
        document.body.appendChild(pointer);
    
        if (canvas.getContext && window.addEventListener) {
            ctx = canvas.getContext("2d");
            updateSize();
            window.addEventListener('resize', updateSize, false);
            loop();
            window.addEventListener("mousedown", function(e) {
                pushBalls(randBetween(10, 20), e.clientX, e.clientY);
                document.body.classList.add("is-pressed");
                longPress = setTimeout(function() {
                    document.body.classList.add("is-longpress");
                    longPressed = true;
                }, 500);
            }, false);
            window.addEventListener("mouseup", function(e) {
                clearInterval(longPress);
                if (longPressed == true) {
                    document.body.classList.remove("is-longpress");
                    pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
                    longPressed = false;
                }
                document.body.classList.remove("is-pressed");
            }, false);
            window.addEventListener("mousemove", function(e) {
                let x = e.clientX;
                let y = e.clientY;
                pointer.style.top = y + "px";
                pointer.style.left = x + "px";
            }, false);
        } else {
            console.log("canvas or addEventListener is unsupported!");
        }
    
    
        function updateSize() {
            canvas.width = window.innerWidth * 2;
            canvas.height = window.innerHeight * 2;
            canvas.style.width = window.innerWidth + 'px';
            canvas.style.height = window.innerHeight + 'px';
            ctx.scale(2, 2);
            width = (canvas.width = window.innerWidth);
            height = (canvas.height = window.innerHeight);
            origin = {
                x: width / 2,
                y: height / 2
            };
            normal = {
                x: width / 2,
                y: height / 2
            };
        }
        class Ball {
            constructor(x = origin.x, y = origin.y) {
                this.x = x;
                this.y = y;
                this.angle = Math.PI * 2 * Math.random();
                if (longPressed == true) {
                    this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
                } else {
                    this.multiplier = randBetween(6, 12);
                }
                this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
                this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
                this.r = randBetween(8, 12) + 3 * Math.random();
                this.color = colours[Math.floor(Math.random() * colours.length)];
            }
            update() {
                this.x += this.vx - normal.x;
                this.y += this.vy - normal.y;
                normal.x = -2 / window.innerWidth * Math.sin(this.angle);
                normal.y = -2 / window.innerHeight * Math.cos(this.angle);
                this.r -= 0.3;
                this.vx *= 0.9;
                this.vy *= 0.9;
            }
        }
    
        function pushBalls(count = 1, x = origin.x, y = origin.y) {
            for (let i = 0; i < count; i++) {
                balls.push(new Ball(x, y));
            }
        }
    
        function randBetween(min, max) {
            return Math.floor(Math.random() * max) + min;
        }
    
        function loop() {
            ctx.fillStyle = "rgba(255, 255, 255, 0)";
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (let i = 0; i < balls.length; i++) {
                let b = balls[i];
                if (b.r < 0) continue;
                ctx.fillStyle = b.color;
                ctx.beginPath();
                ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
                ctx.fill();
                b.update();
            }
            if (longPressed == true) {
                multiplier += 0.2;
            } else if (!longPressed && multiplier >= 0) {
                multiplier -= 0.4;
            }
            removeBall();
            requestAnimationFrame(loop);
        }
    
        function removeBall() {
            for (let i = 0; i < balls.length; i++) {
                let b = balls[i];
                if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
                    balls.splice(i, 1);
                }
            }
        }
    }
    clickEffect();

CSS代码：

/* logo扫光 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}

CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

CSS代码：

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}

CSS代码：

/*首页文章列表悬停上浮*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}

网站后台—>外观—>小工具—>自定义HTML

<!--跑马灯公告-->
<style>
  #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} }
</style>
    <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;">
        <marquee>
        <b id="nr">欢迎来到Z天空 - 教程分享-闲谈聊天</b> </marquee>
    </div>
图片[8]-子比美化-Z天空

子比主题设置—>文章&列表—>文章页面—>版权提示内容处添加以下代码

<div>
  <!--网站声明代码start-->
  <div>
    <fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      <legend
        align="center"
        style="
          width: 30%;
          text-align: center;
          background-color: #008cff;
          border-radius: 5px;
         background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;" 
        "
      >
        文章版权声明
      </legend>
      1、本网站名称：<span style="color: #3333ff"
        ><span style="color: #FF6666; font-size: 18px"
          ><strong>Z天空</strong></span
        ></span
      ><br />
      2、本站永久网址：<font color="#FF6666">https://z1293.top</font
      ><br />
      3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长z1293@foxmail.com进行删除处理。<br />
      4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码end--><br />
</div>

注：自行修改代码中的文字内容。

图片[9]-子比美化-Z天空

CSS代码：

/*导航栏图片背景*/
.header-layout-1{position:relative;background-image:url(https://www.cunshao.com/666666/meihua/img/huacao.png);background-position:center right;background-size:auto 100%;}

说明：图片背景是透明的，然后我自己乱搞的花花，你可以自己弄更好看的图片，图片大小是1800*80、2000*80

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

THE END
教程区
# Wordpress# 子比主题# 子比美化
喜欢就支持一下吧
点赞8打赏 分享
风飘扬的头像-Z天空
群晖Docker出现无法执行此操作，可能是因为网络不稳定或系统正忙。请稍后再试。-Z天空
群晖Docker出现无法执行此操作，可能是因为网络不稳定或系统正忙。请稍后再试。
群晖Docker出现无法执行此操作，可能是因为网络不稳定或系统正忙。请...
2年前 3047
Dokcer 安装 V2rayA-Z天空
Dokcer 安装 V2rayA
Dokcer 安装 V2rayA
2年前 983
群晖Docker安装和运行v2rayA-Z天空
群晖Docker安装和运行v2rayA
群晖Docker安装和运行v2rayA
1年前 433
MSteel批量打印软件-Z天空
MSteel批量打印软件
MSteel批量打印软件
2年前 287
Douyin-Live-Recorder直播录制-Z天空
Douyin-Live-Recorder直播录制
Douyin-Live-Recorder直播录制
1年前 277
群晖（Synology）NAS 启用腾讯云 DDNS 并安装免费证书-Z天空
群晖（Synology）NAS 启用腾讯云 DDNS 并安装免费证书
群晖（Synology）NAS 启用腾讯云 DDNS 并安装免费证书
2年前 277
用户封面
风飘扬的头像-Z天空
群晖安装OpenWrt（iStoreOS）构建旁路由配置OpenClash
pvetools安装
群晖NAS中如何配置反向代理转发
HivisionIDPhotos证件照-群晖搭建
UNRAID更换邮箱和GUID流程
Esxi 许可证