前言
本文章只是个人无聊时的对子比主题美化记录集合,同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧,我会不定期(主要是想不到好的美化了)更新一些美化教程、好玩的小工具、页面等等。
美化说明:
每个人的审美观念不一样,所以请先参考本站或测试在用 。- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,
请要测试后在进行美化 。 - 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
- 子比主题美化都是我自己鼓捣、测试后才分布的,完全免费,开放。
- 嗯…暂时想到这些,以后想到在加。
美化教程(集合)
说明:(重要)
- 一些老教程随机顺序,新教程排在最后,越往后越新。
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓ (最新版) CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式 (最新版) JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码 (最新版) 没有特殊说明的小工具,自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。 ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑ - 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。
- 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。
教程按是更新时间排序,最新的美化教程排在最后面-页码越往后越新
1.文章上一篇/下一篇封面图
一、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”文件【自己看图中的代码,位置】添加下面的代码
![图片[1]-子比主题美化教程(备忘录)[更新时间:2022年11月12日] -时尚博客](https://lishishang.cn/wp-content/uploads/2023/01/d2b5ca33bd211455-1024x435-1.png)
<?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}
三、效果
![图片[2]-子比主题美化教程(备忘录)[更新时间:2022年11月12日] -时尚博客](https://lishishang.cn/wp-content/uploads/2023/01/d2b5ca33bd211718-1024x164-1.png)
感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
暂无评论内容