WordPress子比主题美化教程合集—持续更新中

0844684

1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面

其他网页或者主题直接在 foot 或者 head 文件底部添加即可，记得添加引用即可如

<style type=”text/css”>此处中间添加 css 代码样式</style>

/*网站整体灰白样式开始一*/
          :root {
            --BG_COLOR: #121212;
            --FONT_COLOR: rgba(255, 255, 255, .87);
            --TAB_TITLES_COLOR: rgba(255, 255, 255, .6);
            --SUB_TITLE_COLOR: rgba(255, 255, 255, .38);
            --TAB_TITLES_HOVER_COLOR: #fff;
            --TITLE_HOVER_COLOR: #0D9BFF;
            --RIGHT_CONTENT_TEXT_COLOR: rgba(255, 255, 255, .5);
            --FOCUS_BG_COLOR: #222222;
            --TAB_SUBTITLES_BG_COLOR: rgba(50, 51, 53, .7);
            --IMG_DEFAULT_COLOR: #333333;
          }
          html {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
          }
          body{
            filter:gray;
          }
/*网站整体灰白样式开始一*/

首先把下面的代码复制然后在 wordpress 程序的主题小工具中添加自定义 HTML代码。

大家自行修改一下代码里面的网站内容即可，千万不要乱删除。
路径：WordPress 后台——外观——小工具——自定义 HTML——复制代码粘贴代码进去——首页-侧边栏

第一步：添加小工具-自定义 HTML 代码：

<!--侧边栏百度一下开始--> 
<div class="searchs">
<div class="tit"><strong>百度一下</strong></div>
<mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
<form action="https://www.baidu.com/s" method="GET" target="_blank">
<input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="请输入搜索关键词" value="安笙博客">
<div target="q">关键词不能为空</div><input type="submit" value="百度搜索">
</form>
</mip-form>
</div>
<!--侧边栏百度一下结束-->

第二步：在模板的自定义 CSS 样式中添加如下代码：

/*<a target="_blank" href="https://www.xzma.cn/tag/%e7%99%be%e5%ba%a6%e4%b8%80%e4%b8%8b" title="View all posts in 百度一下">百度一下</a>自定义 CSS 样式*/
.searchs {
background-color: #fff;
border: 1px solid #eaeaea;
padding: 15px;
overflow: hidden;
transition: all 0.3s;
border-radius: 4px;
position: relative;
margin: 0px 0px 15px 0px;
}
.mip-layout-container, .mip-layout-fixed-height {
margin: 0px 0px 0px 0px;
display: block;
position: relative;
}
mip-form form {
position: relative;
}
.searchs input[type="text"] {
border: #45B6F7 1px solid;
border-radius: 4px;
width: calc( 100% - 2px );
}
mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {
padding-right: 30px;
}
.searchs input {
outline: none;
}
mip-form input, mip-form textarea, mip-form select {
border: 1px solid #f1f1f1;
padding: 6px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
resize: none;
font-size: 16px;
}
mip-form div {
display: none;
color: #ec1f5c;
font-size: 12px;
text-align: left;
padding: 0 10% 0 3%;
}
.searchs input[type="submit"] {
position: absolute;
right: 2px;
top: 2px;
background-color: #45B6F7;
color: #fff;
font-size: 13px;
margin: 1px;
height: 31px;
line-height: 31px;
padding: 0 10px;
font-family: "微软雅黑";
}
mip-form input[type='submit'] {
border: 1px solid #f1f1f1;
border-radius: 5px;
color: #333;
background-color: #d8d7d7;
}
.searchs input {
outline: none;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
.tit strong {
font-weight: normal;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
/*百度一下自定义 CSS 样式结束*/

1、在后台子比主题设置—自定义 CSS 样式 添加以下代码：

#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/*底部可爱底线提示*/

2、在 zibll 主题目录下，themes/zibll/footer.php 文件中的“第一行”（重要）下面添加下面的代码：

<!--底部可爱底线提示-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://z3.ax1x.com/2021/08/25/hZZUjU.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text"  style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
<!--底部可爱底线提示-->

1、在 zibll 主题设置中—文章&列表—-文章页 处找到，版权声明添加以下代码

2、如不是子比主题，样式可通用，放置在你的主题文章页底部即可

样式一

<!--网站声明代码样式一 start-->
  <div>
    <fieldset  style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
      <legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;" >
        版权声明
      </legend>
      <span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>安笙博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.xzma.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=99899472&site=qq&menu=yes" target="_blank">99899472</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式一 end-->

样式二

 <!--网站声明代码样式二 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, #0066FF, #FF99CC); text-align:center;" 
          "
        >
          文章版权声明
        </legend>
              <span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>安笙博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.xzma.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=99899472&site=qq&menu=yes" target="_blank">99899472</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
 <!--网站声明代码样式二 END-->

样式三

  <!--网站声明代码样式三 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>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>安笙博客</strong></span></span><br />
      <span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.xzma.cn</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=99899472&site=qq&menu=yes" target="_blank">99899472</a>进行删除处理。<br />
      <span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
      <span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
      <span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
    </fieldset>
  </div>
  <!--网站声明代码样式三 end-->

样式四

  <!--文章网站声明代码样式四 start-->
<head>
<style type="text/css">
.post-copyright {
    box-shadow: 2px 2px 5px;
    line-height: 2;
    position: relative;
    margin: 40px 0 10px;
    padding: 10px 16px;
    border: 1px solid var(--light-grey);
    transition: box-shadow .3s ease-in-out;
    overflow: hidden;
    border-radius: 12px!important;
    background-color: var(--main-bg-color);
}
.post-copyright:before {
    position: absolute;
    right: -26px;
    top: -120px;
    content: '\f25e';
    font-size: 200px;
    font-family: 'FontAwesome';
    opacity: .2;
}
.post-copyright__title {
    font-size: 22px;
}
.post-copyright_type {
    font-size: 18px;
    color:var(--theme-color)
}
.post-copyright .post-copyright-info {
    padding-left: 6px;
    font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
    display: inline-block;
    width: fit-content;
    padding: 2px 5px;
    font-size: 15px;
}
.muted-3-color {
    color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
    <div class="post-copyright" style="max-width:800px;margin:0 auto;">
        <div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
        <div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
        <div class="post-copyright-m">
            <div class="post-copyright-m-info">
                <div class="post-copyright-a">
                    <strong>文章作者</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.xzma.cn/">安笙博客</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>隐私政策</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.xzma.cn/privacy-policy">privacy-policy</a></strong>
                    </div>
                </div>
                <div class="post-copyright-u" style="margin:10px 20px">
                    <strong>用户协议</strong>
                    <div class="post-copyright-cc-info">
                        <strong><a href="https://www.xzma.cn/agreement">agreement</a></strong>
                    </div>
                </div>
                <div class="post-copyright-c" style="margin:10px 20px">
                    <strong>许可协议 </strong>
                    <div class="post-copyright-cc-info">
                        <a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
                        <strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--文章网站声明代码样式四—->

1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。 

2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的

  此处内容已隐藏，请评论后刷新页面查看.

1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分，这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框

2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码，把下面的 css 代码复制粘贴到里面即可。 

里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置

  此处内容已隐藏，请评论后刷新页面查看.
  • 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
  • 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。 
  • 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：
  此处内容已隐藏，请评论后刷新页面查看.

样式儿【不要扒我了】

  此处内容已隐藏，请评论后刷新页面查看.

wordpress自带的分页按钮是比较丑的很突兀，经过社长一段下面的 CSS 代码优化之后会变得更加美观

子比主题添加路径： 网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。

  此处内容已隐藏，请评论后刷新页面查看.

这个是一个小功能，也是为了留个备忘录，担心下次搬家这个给忘了

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

  此处内容已隐藏，请评论后刷新页面查看.

社长已经添加判断代码，添加之后只会在首页显示，其他页面不显示 

1.将下面的 PHP 代码加入到主题目录下：themes/zibll/footer.php 文件中。

有两个版本，一个是精简代码版，一个是全 js 代码版，都是一样的，只不过社长有强迫症，代码太多看的很累

  此处内容已隐藏，请评论后刷新页面查看.

1 2 3 4 5

温馨提示： 本文最后更新于2025-03-12 17:47:39，某些文章具有时效性，若有错误或已失效，请在下方留言或联系安笙博客。
本站资源均为网友推荐收集整理而来，请勿商业运营，仅供学习和研究，请在下载后24小时内删除！！
------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

© 版权声明
安笙の博客
打赏作者
订阅
本文是原创文章，采用CC BY-NC-SA 4.0协议，完整转载请注明来自安笙の博客
THE END
值得一看子比美化技术教程
# 子比美化# 底部美化# WP美化# 整站美化
喜欢就支持一下吧
点赞684赞赏 分享
安笙的头像-安笙博客钻石赞助
本地部署 DeepSeek 大模型教程-安笙博客
本地部署 DeepSeek 大模型教程
本地部署 DeepSeek 大模型教程
31天前 400
国内开源镜像站点汇总【记录】-安笙博客
国内开源镜像站点汇总【记录】
国内开源镜像站点汇总【记录】
6天前 391
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术-安笙博客
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术
13天前 390
哪吒探针：云服务器vps在线监控面板-安笙博客
哪吒探针：云服务器vps在线监控面板
哪吒探针：云服务器vps在线监控面板
24天前 390
职场人的日常：一场永不落幕的生存剧场-安笙博客
职场人的日常：一场永不落幕的生存剧场
职场人的日常：一场永不落幕的生存剧场
13天前 390
SEO：数字时代的制胜之道-安笙博客
SEO：数字时代的制胜之道
SEO：数字时代的制胜之道
27天前 389
相关推荐
WordPress子比主题美化教程合集—持续更新中-安笙博客
WordPress子比主题美化教程合集—持续更新中
WordPress子比主题美化教程合集—持续更新中
昨天 844
本地部署 DeepSeek 大模型教程-安笙博客
本地部署 DeepSeek 大模型教程
本地部署 DeepSeek 大模型教程
31天前 400
国内开源镜像站点汇总【记录】-安笙博客
国内开源镜像站点汇总【记录】
国内开源镜像站点汇总【记录】
6天前 391
职场人的日常：一场永不落幕的生存剧场-安笙博客
职场人的日常：一场永不落幕的生存剧场
职场人的日常：一场永不落幕的生存剧场
13天前 390
哪吒探针：云服务器vps在线监控面板-安笙博客
哪吒探针：云服务器vps在线监控面板
哪吒探针：云服务器vps在线监控面板
24天前 390
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术-安笙博客
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术
13天前 390
评论 抢沙发

请登录后发表评论

    暂无评论内容

默认头像
百度一下
       

换一句
     ——安笙博客——
WordPress子比主题美化教程合集—-安笙博客
844人已阅读
WordPress子比主题美化教程合集—持续更新中
TOP1
本地部署 DeepSeek 大模型教程-安笙博客
本地部署 DeepSeek 大模型教程
31天前400人已阅读
TOP2
国内开源镜像站点汇总【记录】-安笙博客
国内开源镜像站点汇总【记录】
6天前391人已阅读
TOP3
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术-安笙博客
当深夜的耳机成为当代人的眼泪容器：网易云文案的情感炼金术
13天前390人已阅读
TOP4
哪吒探针：云服务器vps在线监控面板-安笙博客
哪吒探针：云服务器vps在线监控面板
24天前390人已阅读
TOP5
职场人的日常：一场永不落幕的生存剧场-安笙博客
职场人的日常：一场永不落幕的生存剧场
13天前390人已阅读
TOP6
标签云
魔方财务魔方高质量SEO高效获取首发风起指挥家风洞效应随机背景随机图片随机api陪玩系统陪玩点单阿里云闪电加速闪客网盘闪客存储长点知识镜像汇总软件仓库路由测试