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

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

前言

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

美化说明:

  • 每个人的审美观念不一样,所以请先参考本站或测试在用
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、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日] -时尚博客
添加代码位置
<?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日] -时尚博客
效果图
------本页内容已结束,喜欢请分享------

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

© 版权声明
THE END
喜欢就支持一下吧
点赞12 分享
温馨提示:本文最后更新于2023-01-27 14:28:32,某些文章具有时效性,若有错误或已失效,请在下方留言或联系时尚博客站长
评论 抢沙发

请登录后发表评论

    暂无评论内容