WordPress子比美化教程

文章最后更新时间：2024-07-25 11:29:52

此页主题美化根据【子比主题】而来，可修改一下来提升个人博客的魅力

主题美化说明

主题美化和小工具可能会引起一系列问题，如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。
主题美化可能会修改主题文件。更新时，请及时备份主题美化文件，或收藏此站点，以免丢失部分主题页面或美化效果。

主题美化说明

不会的看下面

CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式
JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码
没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可
其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

更新站长推荐的美化，让子比更炫起来！！

1、子比主题美化网站菜单图标旋转教程

在自己网站主题的CSS中加入以下代码：

在Wordpress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。

2、主题logo扫光代码

3、网站侧边滚动条

将以下代码放到自定义CSS里面即可！

/**彩色滚动条样式开始*/
::-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;
}
/**彩色滚动条样式结束*/

4、首页文章列表悬停上浮代码

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

5、文章底部添加最后更新时间或过期失效提示

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

//文章过期提示开始
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="觅知博客" href="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes"><b>觅知社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束

2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 317 行，因为我的代码有改动，所有不确定行数，见下图）搜索文章分页或者添加钩子，下面添加下方代码即可。

PHP代码

article_time_update();//文章过期提示

3.CSS 代码：（在自定义 CSS 样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

效果图

6、子比主题外链修改 go 外链跳转页面

第一个样式

主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。

第二个样式

主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。

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

复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里，即可完成。

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}

8、子比主题添加热门标签页面

教程如下

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

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

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

9、文章列表右上角添加文章置顶+新文章发布ICON图标

PHP代码

在子比主题目录下“func.php”(子比主题推荐放这里）或者“functions.php”，在合适位置放下面PHP代码

/**
* 新文章发布New小图标
*/
function wiiuii_post_newicon($post){
    //date_default_timezone_set('PRC');
    $wiui_date = date("Y-m-d H:i:s");
    $wiui_post_date = get_the_time('Y-m-d H:i:s', $post);
    $wiui_diff = (strtotime($wiui_date)-strtotime($wiui_post_date))/3600;
    if($wiui_diff<24){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://www.tfbkw.com/wp-content/uploads/2023/08/new.png" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://www.tfbkw.com/wp-content/uploads/2023/08/xin-top.png" draggable="false" alt="置顶文章" /></div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}

上面《img》标签icon图标链接自己修改。

最关键的PHP代码及放置位置

在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中，大概440行的文章放入下面PHP代码（看图）

$html .= wiiuii_post_newicon($post);//新文章+置顶文章icon图标函数

放在第440行

CSS代码

/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.wiiuii-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.wiiuii-new-icon img{-webkit-user-drag: none;}

演示图

10、手机左侧菜单添加背景图片

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图片里面的链接换成你自己的即可！！

THE END