WordPress子比美化教程(持续更新中)

温馨提示:本文最后更新于2024-03-08 20:45:12,某些文章具有时效性,若有错误或已失效,请在下方留言。

主题美化说明

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

主题美化说明

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

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

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

图片[2] - WordPress子比美化教程

将以下代码放到自定义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;
}
/**彩色滚动条样式结束*/
图片[3] - WordPress子比美化教程

将下面代码放置自定义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.将下面的 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" rel="external nofollow" >留言</a>或联系<a target="_blank" title="觅知博客" href="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes" rel="external nofollow" ><b>觅知社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束

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

PHP代码

article_time_update();//文章过期提示
图片[4] - WordPress子比美化教程

3.CSS 代码:(在自定义 CSS 样式添加下面代码)

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

效果图

图片[5] - WordPress子比美化教程

第一个样式

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

图片[6] - WordPress子比美化教程

第二个样式

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

图片[7] - WordPress子比美化教程

复制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] - WordPress子比美化教程

教程如下

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

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

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

图片[9] - WordPress子比美化教程

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图标函数
图片[10] - WordPress子比美化教程
放在第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;}

演示图

图片[11] - WordPress子比美化教程

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

在子比主题设置—自定义CSS样式,添加下面的CSS代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.tfblog.cn/wp-content/uploads/2023/05/pinglu.png) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}

图片自己保存到本地,图片大小(162 X 75,建议透明的png图片),自己添加喜欢的背景图片。

效果

图片[12] - WordPress子比美化教程

CSS代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式,添加如下CSS代码:

 /*常用语样式*/
.wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)}
.wiiuii-words-li:hover{background:var(--float-btn-bg)}

javascript代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义javascript代码,添加如下jQuery代码:

 // 评论常用语
$('.wiiuii-words-li').on('click', function() {
   var $wiiuii_comment = $('#comment');
    var wiiuii_com_text = $(this).find('span').text();
    var wiiuii_com_original = $wiiuii_comment.val();
    $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + '  ' + wiiuii_com_text : wiiuii_com_text);
    $('.wiui_words').removeClass('open');
});

PHP代码

第一步:在“../zibll/template/comments.php”子比主题的 template 目录下“comments.php”文件,搜索 smilie 在上方位置添加如下代码:

图片[13] - WordPress子比美化教程
// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}

第二步:在“../zibll/inc/functions/functions.php”子比主题的 template 目录下“functions.php”文件,搜索 smilie 在“表情”上方位置添加如下代码:

图片[14] - WordPress子比美化教程
    // 常用语函数
    if ('wiui_words' == $type) {
        $but = '<a class="but btn-input-expand mr6" href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><i class="fa fa-fw fa-comment-o"></i><span class="hide-sm">常用语</span></a>';
        // 下面是自定义常用语,自己自定义喜欢常用语,最好不超过10条
        $wiiuii_words_args = array('谢谢博主分享!', '博主NB,666', '感谢楼主分享!', '感谢大佬分享!', '教程很好用,谢谢!');
        foreach ($wiiuii_words_args as $wiiuii_word) {
            $wiui_word_index++;
            $wiui_words .= '<li class="wiiuii-words-li"><b>' . $wiui_word_index . '、</b><span>' .$wiiuii_word . '</span>' . '</li>';
        }
        $dropdown = '<div class="dropdown-code">';
        $dropdown .= '<span>请选择评论常用语:</span>';
        $dropdown .= '<ul>';
        $dropdown .= $wiui_words;
        $dropdown .= '</ul>';
        $dropdown .= '</div>';
    }

演示图

图片[15] - WordPress子比美化教程

首先找到 /wp-content/themes/zibll/inc/functions 目录下的 zib-posts-list.php 打开后如下图
搜索:“免费资源”,凡是改动代码请先自行备份!备份!备份!

图片[16] - WordPress子比美化教程

上图中改成你需要的颜色既可,下面奉上class列表供大家参考。

class列表

class样式class样式class样式
c-red红色文字b-theme主题背景色jb-red渐变红色背景
c-yellow橙色文字b-red红色背景jb-yellow渐变橙色背景
c-blue蓝色文字b-yellow橙色背景jb-blue渐变蓝色背景
c-blue-2深蓝色文字b-blue蓝色背景jb-green渐变绿色背景
c-green绿色文字b-green深蓝色背景jb-purple渐变紫色背景
c-purple紫色文字b-purple紫色背景jb-vip1渐变金色背景
jb-vip2渐变黑色背景

代码说明

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 共2条

请登录后发表评论

    • 的头像 - 腾飞博客en7660