WP主题美化教程集锦[笔记]

代码：

/*手机侧边栏背景图片*/
@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://pic.imgdb.cn/item/62f37f4216f2c2beb190088b.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

注意:

这是一个简单的CSS代码，若要更换图片请把‘‘url(https://pic.imgdb.cn/item/62f37f4216f2c2beb190088b.jpg)’’更换成“url(自己的图片链接)”即可。

CSS代码：（压缩过了）

/*幻灯片上一张、下一张按钮样式*/
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

进入主题设置的自定义代码，在自定义CSS代码中添加以下代码即可

/***日间主题模式***/
body {
    background-image: url("https://xx.xx.xxx/wp-content/uploads/2022/08/16536750174957778.png");
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("https://xx.xx.xxx/wp-content/uploads/2022/08/16536750174957778.png");
    background-size: cover;
}

其中两个url后面括号里的就是背景地址，记得替换成自己的就OK了

第一步：调用Layer.js

Layer.js是一个非常优秀的弹层组件，看自己是否已经调用了Layer组件（办法：先别调用下面的Layer.js,看直接使用第二步的代码能否使用，若无法使用就证明没有调用Layer，自己把下面的代码放到主题里【自定义头部HTML代码】）

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

第二步：jQuery代码

把下面的jQuery代码放到主题设置的【自定义javascript代码】就大功告成啦！

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

/***日间主题模式***/
body {
    background-image: url("/**这里改为你自己的图片地址**/");
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/***夜间主题模式***/
.dark-theme {
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/**这里改为你自己的图片地址**/");
    background-size: cover;
}

提示：建议夜间模式下不使用背景图片

PHP代码

在本主题目录下“func.php”(zibi主题推荐放这里）或者“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://img.wiiuii.cn/img/new.png" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://img.wiiuii.cn/img/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;}

首先在目录里创建一个img文件 把图片放img目录里面即可

在该目录再创建一个index.php

然后再把以下代码放入你创建的PHP文件

```<?php $img_array = glob("img/*.{gif,jpg,png,webp}",GLOB_BRACE);$img = array_rand($img_array); header("location:$img_array[$img]"); ?>```

调用方法

http(s)://域名/xxx

CSS代码

<!-- 樱花飘落效果 -->
<script type="text/javascript" src="https://api.azpay.cn/729/2.js"></script>

css代码

<!-- 鼠标点击烟花爆炸效果 -->
<script type="text/javascript" src="https://api.azpay.cn/729/2.js"></script>

其实就是在微信和QQ中打开网站时提示让他们在浏览器种打开即可极大的减少网站被举报和屏蔽。

<div><script>
    // 跳转提示
    if (is_weixn_qq()) {;
        window.location.href = 'https://c.pc.qq.com/middle.html?pfurl='+window.location.href; 
    }
    function is_weixn_qq(){
        // 判断当前是否微信/QQ浏览器
        var ua = navigator.userAgent;
        var isWeixin = !!/MicroMessenger/i.test(ua);
        var isQQ = !!/QQ\//i.test(ua);
        if(isWeixin||isQQ){
            return true;
        }
        return false;
    }
    </script></div>