教程开始 放自定义顶部或底部html都可以，也可以放文件里，都随意 <!-- Made by Juanyi --> <!-- 和子比有兼容问题的记得注释掉，如果没引用Jquery记得把注释取消 --> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js&q…

美化图 javascript代码： <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

前言： WordPress信息统计小工具是前几天逛别的网站看到挺可以的，然后就到百度搜索一下，果然有很多这样的教程，但是那些小工具都只显示文字，不怎么美化，特别的简洁。作为喜欢花里胡哨和爱捣鼓的我，当然要进行一些修改啦！O(∩_∩)O哈哈~，然后我自己就弄出了看上去比较可以的信息统计小工具（算是图片版吧<del>~），代码基本都是借鉴大佬的。本来有9个信息统计（删除一些…

前言： 众所周知zibll子比主题是一个非常优秀的WordPress博客主题，但作者可能不怎么喜欢花里胡哨的文章标签，只优化了标签云显示彩色标签，文章标签没有进行彩色化（纯色）。而对于我这种喜欢花里胡哨的来说，只能自己动手，丰衣足食咯！O(∩_∩)O哈哈~文章标签美化采用的是CSS覆盖原来的样式，达到彩色的效果！直接在后台主题自定义CSS样式粘贴CSS代码，这样升级主题时无需二次复…

美化图： HTML代码： <!--开始--> <style> .but-download>.but,.but-download>span{min-width: 200px;padding: .5em;margin-top: 10px;}.pay-extra-hide{background: var(--muted-border-color);display: b…

美化图 CSS代码： /*进度条加载显示*/ #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;} javascript代码： //进度条…

美化图 将下面的函数代码加入到主题目录下functions.php文件中。 //文章过期提示 function article_time_update() { date_default_timezone_set('PRC'); $newdate=time(); $updated_date = get_the_modified_time('Y-m-d H:i:s…

前言 这一个很简单的网站点击彩色的效果，采用js来实现 美化教程 首先创建JS文件，复制下面的代码，粘贴到文件中，然后用script标签调用：代码调用如：，就可以啦！Worderss主题一般都在后台主题设置里的自定义JS代码里添加，其他大同小异。 JS代码： function clickEffect() { let balls = []; let longPressed = false; let …

美化图： 代码： /*手机侧边栏背景图片*/ @media (max-width: 767px){ .mobile-navbar.show,.mobile-navbar.left{ background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; ba…

美化图 在子比主题设置—>文章&列表—>文章页—>版权提示内容处添加以下代码： <div> <!--网站声明代码start--> <div> <fieldset style=" border: 1px dashed #008cff; padding: 10px; border-radi…

美化图 在主题设置—》自定义CSS样式，添加下面的CSS代码： /*评论背景图*/ textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://www.cunshao.com/666666/m…

前言 WordPress默认的浏览器侧边栏滚动条是非常丑陋的，当然，有些WordPress主题是自带美化的侧边滚动栏不需要我们自己去美化，有些WordPress主题是没有美化侧边滚动栏的，那么这时就需要我们去美化啦！村少今天就教大家如何自定义美化侧边滚动栏。其实非常简单，只需一句代码的事情就可以自定义美化WordPress侧边滚动栏，并且代码适用于绝大多数WordPress主题。 美化教程 一般主…

前言： 这是简单的改动一下代码，添加了几个类，如果作者更新主题时下载页面没改动代码的话，更新主题后【复制粘贴代码】进去就能用！（更新前记得备份！记得备份！记得备份！不然就被刷新代码了） 美化图： 代码: （一些说明请仔细看） CSS代码：（放在哪，这里就不在说了，自己可以压缩一下CSS代码） /*下载样式*/ .download-article{ padding: 0 10px; } .downl…

美化图 在主题目录—>footer.php的“<footer class….>”上方加入以下代码： <!--底部可爱底线提示--> <div class="app_normal window" style="padding-top:" data-reactroot=&quo…

代码： 1.在子比主题根目录新建一个func.php文件，最顶部写上<?php（如果已经新建过了，请忽略此步骤） 2.以下代码添加到刚刚新建的func.php文件里 3.你们可以根据自己情况，修改+1 year 最终赠送的会员时间，比如一个月：+1 month 4.当然这个代码里获取到的认证时间小时可能会有偏差，因为它使用了PHP的date函数来获取当前时间   function …

美化图 CSS代码： /*文章列表样式*/ @media screen and (min-width: 768px){.posts-item .item-thumbnail{width: 100%; height: 300px;}/*.posts-item .item-heading{text-align: center;}*/.posts-item .item-body{margin-top: …

前言 现在大部分博客图标都采用Font Awesome图标库，因为Font Awesome图标库满足了大部分用户的需求了，但做为喜欢花里胡哨的我们是不够的，Font Awesome图标库的图标不仅没有彩色的图标，个性化的图标还有点少！所以对于我们喜欢彩色的菜单图标选择性很少！所以只能引入其他的矢量图标库，今天我就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标。 美化教程 阿里巴巴矢量图…

前言： 这个应该好好吐槽一下，主题作者应该更新美化轮播图按钮样式，太矩形了（边角弄圆一点也好呀!）,自己动手丰衣足食，喜欢我这个样式的小伙伴，拿去吧！点赞一波就好啦！ 美化图： CSS代码：（压缩过了） /*幻灯片上一张、下一张按钮样式*/ .swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-butto…

美化图 1、在主题目录下functions.php文件把下面的代码添加进去： // 文章字数和阅读时间 function count_words_read_time () { global $post; $text_num = mb_strlen(preg_replace('/s/','',html_entity_decode(strip_tags($pos…

我们常常在自己博客网站发表自己的一些文章，微语页面在这时候就起到了一个很好的作用。微语页面简单地说就像我们微信的朋友圈那样。 美化教程 1、首先在子比主题目录的functions.php里面加入以下代码： //微语 add_action('init', 'my_custom_init'); function my_custom_init() { $label…

前言： 本来是准备把另一个追剧页面弄好后在一起发教程的，但一直还没有时间去弄追剧页面的样式美化（暂时没有了样式设计的想法），有星友需要这个页面，所以今天就先发布WordPressB站追番页面吧（后期会发布追剧的页面，敬请期待…）！O(∩_∩)O哈哈~。 WordPress追番页面是我在百度翻找了好久，无意间在GitHub找到的，是由Mario（蘑菇君）大佬二开的（大佬就大佬，我永远滴神…），然后我…

前言： 用jQuery+Layer.js实现的一个主题切换小提示。 美化图： 第一步： 调用Layer.js，Layer.js是一个非常优秀的弹层组件，看自己是否已经调用了Layer组件 （办法：先别调用下面的Layer.js,看直接使用第二步的代码能否使用，若无法使用就证明没有调用Layer，自己把下面的代码放到主题里【自定义头部HTML代码】） <script type="te…

美化图 CSS代码： /*导航栏图片背景*/ .header-layout-1{position:relative;background-image:url(https://www.cunshao.com/666666/meihua/img/huacao.png);background-position:center right;background-size:auto 100%;} 说明：图片背…

如果注意观察我网站的左上角，就会发现有xxFPS这几个字不断的发生变化，只需一句js代码即可实现！今天就给大家分享一下WordPress添加帧率显示的教程！ 美化教程 你只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码，把下面的js代码复制粘贴到里面即可。 // FPS帧 $('body').before(�…