🎉 恭喜你发现了宝藏!

WordPress子比美化教程(持续更新中) 25/12/19更新

文章最后更新时间:2025-12-21 00:58:26

直接将下面的代码放到:子比主题–>>自定义CSS样式即可!

@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}
图片[1] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面的代码放到:/wp-content/themes/zibll/footer.php</footer>标签后面即可

<!--底部波浪开始-->
<div class="wiiuii_layout">
<svg class="editorial"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 24 150 28"
     preserveAspectRatio="none">
 <defs>
 <path id="gentle-wave"
 d="M-160 44c30 0 
    58-18 88-18s
    58 18 88 18 
    58-18 88-18 
    58 18 88 18
    v44h-352z" />
  </defs>
  <g class="parallax">
   <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
   <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
   <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
  </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

效果

诺守博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!

将下面的代码放到你想显示的地方即可!

<p class="tengfei-print">诺守博客致力于分享优质实用的互联网资源,内容包括有网站搭建、建站源码、样式特效、主题美化、实用工具、素材资源、技术教程,致力打造一个IT博客!</p>

将下面的代码放到:自定义CSS样式即可!

<style>
.tengfei-print{
    width:1000px;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: dy 5s steps(60, end) infinite;
    animation: dy 5s steps(50, end) infinite;
}
 
@-webkit-keyframes dy{
    from{
        width:0;
    }
}
@keyframes dy{
    from{
        width:0;
    }
}
</style>
图片[2] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面的代码放到:子比主题–>>自定义CSS样式即可!

::selection {
    background: transparent;
    color:#57BD6A;
}
图片[3] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面的代码放到:子比主题–>>自定义CSS样式即可!

.navbar-top .sub-menu,
.theme-popover {
    background: linear-gradient(135deg, #ffffffb0 35%, #ffffffb0 100%);
    backdrop-filter: saturate(5) blur(20px)
}
图片[4] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

放到:子比主题–>>自定义CSS样式即可!

.wp-posts-content img {border-radius: 15px;}

效果如下

我是诺守博客

这个样式就是鼠标移动显示隐藏的文字,非常的实用,将下面的css放到:子比主题–>>自定义CSS样式即可,然后我们通过标签来实现隐藏文字,如下代码,记住代码里面的css代码是.wponss,那么我们的元素需要是class

.wponss {
    text-decoration: none;
    transition: filter 150ms ease-in-out;
    transition-delay: 500ms;
    filter: blur(4px);
        }
.wponss:hover {filter: blur(0);
transition-delay: 0ms;
        }
<p class="wponss">我是诺守博客</p>
图片[5] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

将下面代码放置自定义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);}}
/*首页文章列表悬停上浮结束*/

教程如下

1、进入子比主题目录—>pages这个目录下创建PHP文件,然后把下面的代码添加进去。

2、把上面的代码添加进行保存后,进入到后台—>页面—>新建页面—->选择热门标签页面即可使用。

3、如果懒得创建添加PHP文件的话,可以下载下面我创建好的PHP文件,上传到子比主题的pages这个目录下,然后按照第2点进行创建页面就好了

图片[6] - WordPress子比美化教程(持续更新中) 25/12/19更新 - 诺守博客

CSS代码

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://picshack.net/ib/7Lm5teUTyV.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

这是一个简单的CSS代码,若要更换图片请将CSS图片里面的链接换成你自己的即可!!

1 2 3 4 5

© 版权声明
THE END
点赞900赞赏 分享
评论 共1条

请登录后发表评论