16、子比主题侧边栏滚动播报小工具
![图片[1]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01ppWtvX1QbIi5Cj2wM_!!2210123621994.gif)
17、子比主题编辑器三点美化
![图片[2]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01GhJ6aM1QbIiA70ido_!!2210123621994.jpg)
18、子比主题 – 文章版权声明样式美化
子比主题:WordPress后台 >> 主题设置 >> 文章&列表 >> 文章页面 >> 将代码添加到“版权提示内容”中
![图片[3]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01jr4Q9k1QbIiH1Zmrw_!!2210123621994.jpg)
![图片[4]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Wora3l1QbIiKxJQmA_!!2210123621994.jpg)
![图片[5]-WordPress子比美化教程(持续更新中)-咕咚博客](https://www.xiaopangz.com//wp-content/uploads/2024/08/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240804035526.jpg)
![图片[6]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01jXHkOa1QbIiLtpRgL_!!2210123621994.jpg)
![图片[7]-WordPress子比美化教程(持续更新中)-咕咚博客](https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01NdagHt1QbIiqfmtxx_!!2210123621994.jpg)
19、子比主题 – 在线投稿联系方式小工具模块
使用教程
- 将下面的代码添加在 WordPress 后台小工具,效果展示是一样的
- 添加路径:后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置
HTML
<div class="zib-widget widget_text">
<div id="update_version">
<a href="/" target="_blank" rel="noopener"><img title="腾飞博客" src="https://www.tfbkw.com/wp-content/uploads/2024/05/20240524203517214-tougao.webp" alt="图片" style="border-radius:5px;"></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=tfblog@126.com" target="_blank" style="background-image: linear-gradient(120deg, #3ca5f6 0%, #a86af9 100%);" rel="noopener">站长邮箱</a>
<a class="cms_link" href="/" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">在线投稿</a>
<a class="grid_link" href="/" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
</div>
<div>
<hr>
</div>
</div>
CCS
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
20、子比主题日间、夜间模式切换提示
这个一共需要两个代码,跟着我步骤走,一个是JS引入的文件代码,一个是JS代码。
代码部署
这个是JS链接引入,直接将下面的代码放到:子比主题->>自定义头部HTML代码即可
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
这个是JS代码,直接将下面的代码放到:子比主题->>自定义javascript代码即可
$(".toggle-theme").click(function() {var toggleThemeText = "当前为日间模式";if (!$("body").hasClass('dark-theme')) {toggleThemeText ="当前为夜间模式";}layer.msg(toggleThemeText, {time: 2000,anim: 1});});
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END









暂无评论内容