WordPress和Zibll主题美化教程[更新至:2022-07-05]

WordPress和Zibll主题美化教程-猫叔栈

注意说明

  • 每个人的审美观念不一样,所以请先参考本站或测试在用。
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化
  • 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
  • 美化代码部分采集跟站长捣鼓出来的,都是已经过测试

更新教程及说明

  • (最新版)CSS代码添加到后台子比主题设置->自定义代码->自定义CSS样式
  • (最新版)JS即javascript代码添加到后台子比主题设置->自定义代码->自定义javascript代码
  • (最新版)没有特殊说明的小工具,自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去,保存即可。
  • 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我不重复告知了,请注意看上面的方法。

使用方法

只需在主题设置自定义CSS代码里面添加美化的css代码即可! 如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码即可!

滚动条样式代码CSS:

 ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    -moz-border-radius: 0.125rem;
    -webkit-border-radius: 0.125rem;
    background-color: #ccc;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

自定义代码CSS

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

自定义代码CSS

第一种

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

第二种

/*首页文章列表悬停上浮开始*/
/*@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.2s;}.tab-content .posts-item:not(article):hover{transform: translateY(-5px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}*/
.tab-content .posts-item:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 20px rgba(0, 0, 0, .25);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}
@keyframes index-link-active {
    0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}
    16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}
    100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}
}
/*首页文章列表悬停上浮结束*/

自定义代码CSS

//网站动态标题开始 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "【新消息】你有一条未读消息";
        clearTimeout(titleTime)
    } else {
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        100)
    }
});
//网站动态标题结束

因为字体是在本站的,如果需要的话可以点我下载,把字体下载放到根目录,把 www.ffsir.com 修改成你的主站链接即可。

自定义代码CSS

/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("https://www.ffsir.com/msi/font/WebFont.woff2") format("woff2");font-display: swap;}
*{font-family: "lovely"}
/*自定义网站字体结束*/

因为鼠标样式是在本站的,如果需要的话可以打开下载指针样式下载指针悬停链接把样式下载,在wp-content/uploads里新建一个mouse的文件夹把两个文件放进去,把 www.ffsir.com 修改成你的主站链接即可。

自定义代码CSS

/** 普通指针样式**/ 
body{cursor: url(https://www.ffsir.com/msi/mouse/normal.cur), default;}
/** 链接指针样式**/ 
a:hover,.cursor:hover,button:hover,svg:hover{cursor:url(https://www.ffsir.com/msi/mouse/link.cur), pointer;}
/** 鼠标样式 结束**/

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

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【猫叔栈(www.ffsir.com)】<br>复制成功,若要转载请务必保留原文链接!</p>', function(){});}

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

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

后台设置—>外观—>小工具—>添加自定义HTML代码,加到合适侧边栏即可

<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

效果演示

图片[2] - WordPress和Zibll主题美化教程[更新至:2022-07-05] - 猫叔栈

添加方法: 后台设置—>外观—>小工具—>添加Zibll 链接列表(新版),加到标题右侧按钮即可

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链

效果演示

图片[3] - WordPress和Zibll主题美化教程[更新至:2022-07-05] - 猫叔栈
图片[4] - WordPress和Zibll主题美化教程[更新至:2022-07-05] - 猫叔栈

1 2 3 4 5 6 7

© 版权声明
THE END
点赞10 分享
评论 共2条
头像
请认真评论,发表纯数字纯表情做禁言处理!
提交
头像

昵称

取消
昵称常用语表情代码图片