WordPress和子比主题模板&网站美化方法教程2024/10/12更新

WordPress和子比主题模板&网站美化方法教程-小白兔技术部落
WordPress和子比主题模板&网站美化方法教程2024/10/12更新
此内容为付费阅读,请付费后查看
兔币0.01
立即购买
您当前未登录!建议登陆后购买,可保存购买订单
安全
可靠
信赖
付费阅读
已售 1

前言:
最初开始的时候设置就发布过一个 go 跳转文件美化版,在第 15 号教程,今天再给大家分享一个仪表盘版本的
使用方法:
1、找到子比主题/wp-content/themes/zibll 目录下的 go.php 文件打开
2、直接将下面的代码复制替换到 go.php 文件中即可
3、如需修改跳转快与慢,在文件的 78 行,将默认的 1500 修改即可,数值越小加载越快

效果预览:

WordPress和子比主题模板&网站美化方法教程-觅知博客

这个功能本身类似一个用户中心的样式,也可以认为是导航和投稿的样式,具体使用可自行根据自己需求修改代码中的链接和图片
使用教程:
1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
2、添加路径:在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
3、我是添加在首页侧边栏
4、修改代码中的链接以及图片地址,

效果预览:

<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>
<div id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1426239465@qq.com" target="_blank" rel="noopener"><img title="觅知博客" src="添加你需要展示的图片" alt="图片" style="border-radius:5px;"></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=1426239465@qq.com" target="_blank" style="background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" rel="noopener">发送邮件</a>
<a class="cms_link" href="https://www.填写您的网址" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">随便看看</a>
<a class="grid_link" href="https://www.填写您的网址" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
</div>
<div>
  <hr>
<a href="/" target="_blank" rel="noopener">点击在线投稿</a>
  <br>
投稿邮箱:<b>1738220177@qq.com</b>
  <br>
交流 QQ:<b><a href="https://wpa.qq.com/wpa_jump_page?v=3&uin=1426239465&site=qq&menu=yes" target="_blank" rel="noopener">1738220177</a></b>
</div>

前言:这个是两个小功能,鼠标移动到文章头图时会有动态效果以及首页文章列表鼠标移动悬停上浮效果
1.子比主题设置—>自定义代码—>自定义 CSS 样式:,添加以下 CSS 代码:

效果预览

WordPress和子比主题模板&网站美化方法教程-觅知博客

前言:
这个功能其实很多朋友应该都有之前的那种樱花效果,但是用过的都知道那个樱花效果太妨碍阅读了,今天分享给大家一个优化版,减少了数量以及效果优化
安装
将下面的这段代码整合到新建 js 文件,命名 leaves.js,然后引用,就可以看到效果了,我就不上预览图了
默认效果是枫叶,如果想改成其他的可自行更换代码第三行中的文件图片矢量图,

<script src="你上传的文件路径地址/leaves.js"></script>
var stop, staticx;
var img = new Image();
img.src = "https://p1.xywm.ltd/2022/07/31/62e604b42d4cf.webp";

function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
    cxt.save();
    var xc = 20 * this.s / 2;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
    cxt.restore()
};
Sakura.prototype.update = function() {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom("fnr");
        if (Math.random() > 0.4) {
            this.x = getRandom("x");
            this.y = 0;
            this.s = getRandom("s");
            this.r = getRandom("r")
        } else {
            this.x = window.innerWidth;
            this.y = getRandom("y");
            this.s = getRandom("s");
            this.r = getRandom("r")
        }
    }
};
SakuraList = function() {
    this.list = []
};
SakuraList.prototype.push = function(sakura) {
    this.list.push(sakura)
};
SakuraList.prototype.update = function() {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update()
    }
};
SakuraList.prototype.draw = function(cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt)
    }
};
SakuraList.prototype.get = function(i) {
    return this.list[i]
};
SakuraList.prototype.size = function() {
    return this.list.length
};

function getRandom(option) {
    var ret, random;
    switch (option) {
        case "x":
            ret = Math.random() * window.innerWidth;
            break;
        case "y":
            ret = Math.random() * window.innerHeight;
            break;
        case "s":
            ret = Math.random();
            break;
        case "r":
            ret = Math.random() * 4;
            break;
        case "fnx":
            random = -0.5 + Math.random() * 1;
            ret = function(x, y) {
                return x + 0.5 * random - 1.7
            };
            break;
        case "fny":
            random = 1.5 + Math.random() * 0.7;
            ret = function(x, y) {
                return y + random
            };
            break;
        case "fnr":
            random = Math.random() * 0.03;
            ret = function(r) {
                return r + random
            };
            break
    }
    return ret
}

function startSakura() {
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    var canvas = document.createElement("canvas"),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
    canvas.setAttribute("id", "canvas_sakura");
    document.getElementsByTagName("body")[0].appendChild(canvas);
    cxt = canvas.getContext("2d");
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom("x");
        randomY = getRandom("y");
        randomR = getRandom("r");
        randomS = getRandom("s");
        randomFnx = getRandom("fnx");
        randomFny = getRandom("fny");
        randomFnR = getRandom("fnr");
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura)
    }
    stop = requestAnimationFrame(function() {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee)
    })
}
window.onresize = function() {
    var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
    startSakura()
};

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false
    } else {
        startSakura()
    }
};

1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
2、添加路径:在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
3、我是添加在文章侧边栏
4、修改代码中的链接以及文字改为自己的

效果预览:

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

先下载我提供的文件
将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具,效果展示是一样的我是添加在小工具的
添加路径:在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
我是添加在首页顶部全宽度
修改代码中的链接以及文字改为自己的就好
将我提供的三个 css 和 js 文件上传到你自己服务器,然后再下面代码填写对应路径
模块代码下载地址

说明:

  • 这是简单的改动一下代码,添加了几个类,如果作者更新主题时下载页面没改动代码的话,更新主题后【复制粘贴代码】进去就能用!(更新前记得备份!记得备份!记得备份!不然就被刷新代码了)

代码:(一些说明请仔细看)

  • CSS代码:(放在哪,这里就不在说了,自己可以压缩一下CSS代码)

注意:

  • PHP文件路径:主题文件夹/zibll/pages/download.php
  • 有一些文字说明比如:站长声明、下载说明,自己在代码中修改一下。
  • 微信公众号的图片+文字,代码里面有注释提示的,自己改一下就好。
  • 有疑问请留言。

效果:

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

1 2 3 4 5 6 7 8

温馨提示:本文最后更新于2024-10-12 21:46:42,某些文章具有时效性,若有错误或已失效,请在下方留言或联系兔子警长
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享