Zibll主题V5.0正确使用新版自定义代码示例及教程-牛魔博客

子比主题拥有丰富的扩展性，有不少的小伙伴也喜欢各种搭配和美化，或者添加一些自定义的功能。

更新到5.0之后，一切操作都变得简单。

添加教程

首先要确认您需要添加的代码类型和功能，一般主要为CSS代码、JavaScript代码和HTML代码！
CSS代码用于显示样式一般添加到页面头部。
JavaScript代码一般添加到页面底部。
HTML代码就要根据需要选择添加位置了。

CSS代码和JavaScript代码一般位置都是非固定的，所以不要多考虑，全部保存到主题设置！

CSS、JS代码添加示例

进入主题设置-自定义代码 | v5.0及以上为主题设置-全局&功能-自定义代码

CSS保存到自定义CSS样式 | JavaScript代码保存到自定义javascript代码

主题添加自定义CSS样式和自定义JavaScript代码不需要写对应的HTML标签！

示例代码：

/*自定义CSS样式不需要写<style>标签*//**自定义CSS代码示例-调整文章列表卡片的图片长宽比例*/.posts-item.card .item-thumbnail {    padding-bottom: 50%;}

//自定义JavaScript代码不需要写<script>标签//JavaScript代码示例-百度统计代码var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?820fa9xxxxxxxxxxxxxxxxxxxxxxxxxx";  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();

HTML代码添加示例

HTML代码就要区分功能和显示位置了。那么主题提供哪些位置可以添加呢？

主题设置可添加的自定义HTML代码位置：

主题设置-自定义代码-自定义头部代码
主题设置-自定义代码-自定义底部代码
主题设置-文章页- 在文章内容前插入内容
主题设置-文章页- 在文章内容后插入内容

除了主题设置呢，更多的位置就是在小工具模块了！
通过自定义代码小工具模块可以将您的自定义代码添加到几乎任何位置！

自定义代码小工具示例

可以通过前台登录后点击模块配置或者在wp后台-外观-小工具添加小工具模块

<!--自定义代码示例-一个图片广告代码--><a href="https://www.aliyun.com/minisite/goods?userCode=qyth9w2q">  <img src="https://oss.zibll.com/demo.zibll.com/2020/03/860X80.jpg" class="image wp-image-915  attachment-full size-full"  style="max-width: 100%; height: auto;" srcset="https://oss.zibll.com/demo.zibll.com/2020/03/860X80.jpg 860w, https://oss.zibll.com/demo.zibll.com/2020/03/860X80-600x56.jpg 600w, https://oss.zibll.com/demo.zibll.com/2020/03/860X80-768x71.jpg 768w" sizes="(max-width: 860px) 100vw, 860px"></a>