子比主题美化教程(备忘录)[更新时间:2022年11月12日] -时尚博客

前言

本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

美化说明：

每个人的审美观念不一样，所以请先参考本站或测试在用。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请要测试后在进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
子比主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。
嗯…暂时想到这些，以后想到在加。

美化教程（集合）

说明：（重要）

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

教程按是更新时间排序，最新的美化教程排在最后面-页码越往后越新

一、PHP代码

在主题目录下“func.php”文件合适位置添加下面的代码【默认图片url自己改】：

/**
* 子比文章上一篇/下一篇背景图函数
*/
function wiiuii_prev_next_cover($wiui_post){
    if(!empty($wiui_post)){
        $wiui_post_cover = get_post_meta($wiui_post->ID, 'cover_image', true);
        if(empty($wiui_post_cover)){
            $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $wiui_post->post_content, $matches);
            $wiui_post_cover = $matches[1][0];
        }
    }else{
        // 默认图片
        $wiui_post_cover = "https://www.wiiuii.cn/wp-content/uploads/2022/08/3d16bac247231101.jpg";
    }
    return '<img class="wiiuii-prev_next-cover" src="' . $wiui_post_cover . '" />';
}

在主题目录“zibll/inc/functions/functions.php”文件【自己看图中的代码，位置】添加下面的代码

添加代码位置

<?php echo wiiuii_prev_next_cover($prev_post);/*455行a标签上方->上一篇文章封面*/ ?>

<?php echo wiiuii_prev_next_cover($next_post);/*466行a标签上方->下一篇文章封面*/ ?>

二、CSS代码

css样式代码就不说哪里添加了，聪明人都知道…..

/*文章上一篇/下一篇背景图*/
.content-wrap>.content-layout>.theme-box>.article-nav{height:100%}
.article-nav>.main-bg.box-body.main-shadow{position:relative;overflow:hidden;height:100%}
.article-nav>.main-bg.box-body.main-shadow>a{position:absolute;z-index:2}
.article-nav>.box-body+.box-body>a{right:15px}
.wiiuii-prev_next-cover{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.article-nav>.main-bg.box-body.main-shadow::before,.wiiuii-prev_next-cover{position:absolute;top:0;left:0;right:0;bottom:0}
.article-nav>.main-bg.box-body.main-shadow::before{content:"";transition:opacity .5s cubic-bezier(.4,.01,.165,.99);z-index:1;background:var(--main-shadow);-webkit-backdrop-filter:saturate(0) blur(3px);backdrop-filter:saturate(0) blur(3px)}
.article-nav>.main-bg.box-body.main-shadow:hover::before{opacity:0}

三、效果

效果图

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1 本网站名称：时尚博客(lishishang.cn)
2 本站永久网址：https://lishishang.cn/
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ3572069413进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END