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图标函数

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

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代码

在后台 >> 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 在上方位置添加如下代码：

// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}

}

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

    // 常用语函数
    if ('wiui_words' == $type) {
        $but = '<a class="but btn-input-expand mr6" href="javascript:;"><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>';
    }

将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容

<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！</div>

将下面的代码放到自定义CSS即可实现

.shangye {
    color: #fff;
    background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
    border: 1px solid #5282f7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 50px;
    border-radius: 4px;
}

将代码放到自定义CSS样式即可

全局追悼CSS代码

body > .header,
body > .container,
body > .footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

首页追悼CSS代码

html .home>.header,
html .home>.container,
html .home>.footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}