wordpress美化代码合集-华灯初上

wordpress美化代码合集

主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。

下面大部分美化都是通用的，并以本人使用子比8.7版本举例。具体自定义代码位置以你的主题为准。

CSS 代码添加到后台：子比主题设置–>>自定义代码–>>自定义 CSS 样式
JS 即 javascript 代码添加到：后台子比主题设置–>>自定义代码–>>自定义 javascript 代码
没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台–>>外观–>>小工具–>>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。

0，文章卡片+三个点+背景美化

1775095240068

将下面 CSS 代码放到：子比主题 → 自定义 CSS 样式** 即可。注意要修改里面的图片链接

📁 点击展开/收起CSS样式代码

/* 文章卡片基础样式 */
.posts-item.card {
    position: relative !important;
    padding: 36px 10px 10px 10px;
    overflow: hidden;
    margin-bottom: 8px !important;
    background-image: url(/img/bgm/posts-item-card.webp);
    border-radius: 9px;
}
/* 文章卡片标题字体大小 */
.posts-item.card .item-heading {
    font-size: 14px;
}
/* 文章卡片装饰点 */
.posts-item.card::before {
    content: "";
    display: block;
    background: #007bff;
    top: 13px;
    left: 15px;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    box-shadow: 16px 0 #ff6347, 32px 0 #fdbc40;
    position: absolute;
    z-index: 1;
}
/* 文章卡片右上角时间隐藏 */
.posts-item.card .macgf_soft_time {
    display: none !important;
}

1、网站左上角添加 FPS 帧率显示

代码放到：子比主题–>>自定义CSS样式

📁 点击展开/收起CSS样式代码

// FPS 帧开始
$('body').before('');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;

fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
// FPS 帧结束

2、子比美化网站菜单图标旋转教程

代码放到：子比主题–>>自定义CSS样式

.figure{
    width: 15px;
    animation:0ms;
    -webkit-animation:rotateImg 3s linear infinite;
    vertical-align: middle;
  }
  @keyframes rotateImg {
    0% {transform : rotate(0deg);}
    100% {transform : rotate(360deg);}
  }
  @-webkit-keyframes rotateImg {
      0%{-webkit-transform : rotate(0deg);}
    100%{-webkit-transform : rotate(360deg);}
  }

3、子比主题文章标签美化

将下面的代码放到：子比主题–>>自定义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}

4、子比开通会员和联系站长常用代码

开通会员：两款

<a class="float-btn pay-vip" vip-level="1" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
<a class="pay-vip" href="javascript:;">

““

联系站长：

<a href="javascript:;" data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" data-class="modal-mini" data-toggle="RefreshModal" title="联系我们">联系我们</a></div>

积分购买：

<a data-class="modal-mini full-sm" data-height="330" data-remote="/wp-admin/admin-ajax.php?action=points_pay_modal" href=";" data-toggle="RefreshModal"><span style="color:red">积分不够？点我 快速购买积分</span></a>

5、页脚字体居中

将下面的代码放到：子比主题–>>自定义CSS

<style type="text/css" id="wp-custom-css">
.icon {
    width: 1em;
    : 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.footer .list-inline {
  text-align: center;
}    
</style>

“

6、LOGO扫光效果

将下面的代码放到：子比主题–>>自定义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;}}
/* logo 扫光结束 */

7、侧边滚动条美化

一共有两款侧边滚动条美化，放到子比主题–>>自定义CSS样式自行测试查看

第一款：单色

/*滚动条显示样式*/
::-webkit-scrollbar-thumb{
background-color:#FF6666; /*更改喜欢的十六进制颜色*/
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*滚动条大小*/
::-webkit-scrollbar{
width:8px;
height:8px;
}
/*滚动框背景样式*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}

第二款：彩色

/**彩色滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}

8、导航栏字体加粗

放到子比主题–>>自定义CSS样式

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

9、头像呼吸光环和鼠标悬停旋转放大

/*头像呼吸光环和鼠标悬停旋转放大*/
.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;}}

10、首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
@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);}}

11、设置网站动态标题

我们经常逛别人的网站，有些网站当我们离开该页面浏览其他页面的时候，我们在离开的页面上面会看到比如本站的“你别走吖 Σ(っ °Д °;)っ”这样的字样，当我们点回来的时候页面上面会看到“(/≧▽≦/)你又回来了！”的字样。那么我们如何实现呢？其实很简单，只需一句javascript语句即可实现。请看下面的教程。

在后台主题设置—>自定义代码—>自定义javascript代码把下面的代码添加到里面即可实现。

//动态标题 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！ " ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
});

或者在首页文件位于“”标签之前添加下面的代码也可以。

<script type="text/javascript">
      /*  动态标题*/
     var OriginTitile = document.title,
      titleTime;
     document.addEventListener("visibilitychange",
     function() {
      if (document.hidden) {
        document.title = "你别走吖 Σ(っ °Д °;)っ";
        clearTimeout(titleTime)
    } else {
        document.title = "(/≧▽≦/)你又回来啦！" ;
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        2000)
    }
    });
    </script>

12、添加鼠标样式

CSS代码1：

 /** 鼠标样式 开始**/
/** 普通指针样式**/
body{cursor: url(https://www.cunshao.com/666666/meihua/img/5ccab616ea9c8.cur), default;}
/** 链接指针样式**/
a:hover{cursor:url(https://www.cunshao.com/666666/meihua/img/5ccab63d8fc80.cur), pointer;}
/** 鼠标样式 结束**/

CSS代码2：

/*鼠标指针样式*/ 
body{cursor:url(https://www.cunshao.com/666666/meihua/img/normal1.png), default;}
a:hover{cursor:url(https://www.cunshao.com/666666/meihua/img/link1.png), pointer;}

13、首页主内容上方添加跑马灯公告小工具

网站后台—>外观—>小工具—>自定义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">欢迎来到~~~~ - 网络IT科技魅力博客。</b> </marquee>
    </div>

14、添加复制提示框

javascript代码：

//复制提示
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

15、顶部添加彩色进度条

CSS代码：

/*进度条加载显示*/
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}

javascript代码：

//进度条加载显示
$(window).scroll(function() {
    var a = $(window).scrollTop(),
    c = $(document).height(),
    b = $(window).height();
    scrollPercent = a / (c - b) * 100;
    scrollPercent = scrollPercent.toFixed(1);
    $("#percentageCounter").css({
        width: scrollPercent + "%"
    });
}).trigger("scroll");

在主题目录header.php中，添加以下代码，放在body标签下（最后一行）

<div id="percentageCounter"></div>

16、文章页面添加文章字数和阅读时间

1、在主题目录下functions.php文件把下面的代码添加进去：

//  文章字数和阅读时间
function count_words_read_time () {
  global $post;
  $text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8');
  $read_time = ceil($text_num/300); // 修改数字300调整时间
  $output .= '共计' . $text_num . '字，阅读大约' . $read_time  . '分钟。';
  return $output;
}

2、在主题目录zibll/inc/functions/zib-single.php,把下面代码添加到132行处（如下图）

<!--文章字数和阅读时间--><i class="fa fa-hourglass-start"></i> <?php echo count_words_read_time(); ?>

17、顶部导航栏添加背景图片

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%;}

18、修改主题字体（网站字体美化）

CSS代码：（字体样式一：）

 /*字体*/
@font-face{font-family:"wiiuii";src:url(https://www.cunshao.com/666666/meihua/adjzRQKK4rMhqM7T.ttf);}
*{font-family:"wiiuii"}

CSS代码：（字体样式二：）

/*全站字体美化*/
@font-face{
font-family: 'moe';
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.ttf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.otf');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.dfont');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.eot');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.svg');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff');
src:  url('https://cdn.jsdelivr.net/gh/muwenhuan/Coolimg/fzlty.woff2');
}
body{
font-family:'moe';
}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.lazyloading:not(.swiper-lazy-loaded){opacity: 0;}@media (max-width:640px) {
    .meta-right .meta-view{
      display: unset !important;
    }
  }

注：（非常重要）font-family是自定义字体名称（自己修改），url这是字体文件的地址（自己修改），*这是全局显示。

19、下载页面添加声明或说明

HTML代码：

<!--开始-->
                <style>
                .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: block;margin: 10px;padding: 20px;color: var(--muted-color);border-radius: 4px;}
                .panel:hover{border: 1px solid #FF6666;}/*框颜色背景色*/
                .panel{margin-bottom: 10px; background-color: #fff; border: 1px solid #268df7; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05);}
                .panel-heading{padding: 10px 15px;border-bottom: 1px solid #268df7;border-top-left-radius: 3px;border-top-right-radius: 3px;color: #0000FF;background-color: #99CCFF;}/*边框部分颜色*/
                .panel-heading h3{margin-top: 0;margin-bottom: 0;font-size: 14px;color: #0000FF;font-family: inherit;font-weight: 500;line-height: 1.1;}
                .panel-body .help li{line-height:25px;font-size:14px;color: #000;}
                .panel-body .help li em{font-style:normal;background: #FFFFCC;padding:5px;border-radius:4px;color: #FF3399;}
                .panel-body .shengming{line-height:25px;font-size:14px;color:#C33;}
                </style>
                <div class="panel">
                     <div class="panel-heading">
                          <h3>下载说明</h3>
                     </div>
                     <div class="panel-body">
                      <ul class="help">
                        <li>1.本站所提供的压缩包若无特别说明，解压密码均为<em>www.cunshao.com</em>;</li>
                        <li>2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;</li>
                      <li>3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;</li>
                      <li>4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便本站及时进行更新;</li>
                      <li>5.其他下载问题请自行搜索教程，这里不一一讲解。</li>
                      </ul>
                     </div>
                     </div>
                     <div class="panel">
                     <div class="panel-heading">
                       <h3>站长声明</h3>
                     </div>
                     <div class="panel-body">
                      <span class="shengming">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有，若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！</span>
                     </div>
                    </div>
                <!--结束-->

添加说明（注意）：主题目录zibll/pages/download.php,在合适的位置添加上面的即可，大概是在115行位置添加（我的在115行添加，不知道新版有没有变化）。

20、聚合热搜API对接子比，目前整合13个热榜，均为本地api

api文件下载地址：https://cunshao.lanzoup.com/i5W5R0ztbeje

首页版：

将index.php里的内容复制到/wp-content/themes/zibll/index.php里你想要放置的地方

hotlist文件夹放到/wp-content/themes/zibll 内即可

页面版：

将HotList.php、hotlist放到/wp-content/themes/zibll/pages 内

然后前往wp后台 – 页面 – 新建页面模板选择“热搜榜单页面”

目前已整合13个热搜榜单如有Bug请联系开发者修复

最后

需要在子比主题设置 – 全局&功能 – 自定义代码 – 自定义CSS样式内添加以下CSS代码

/*聚合热搜CSS*/
.hot-ico {
height: 18px;
margin-right: .25rem;
margin-bottom: .2rem;
}
.hot-rank {
width: 18px;
border-radius: 4px;
background: rgba(124,124,124,.3);
display: inline-block;
}
.hot-rank-1 {
color: #fff;
background: #f1404b;
}
.hot-rank-2 {
color: #fff;
background: #c56831;
}
.hot-rank-3 {
color: #fff;
background: #b89e2c;
}
/*聚合热搜CSS结束*/