本站设计-正确使用自定义代码示例及教程

直接修改源码,首先就是麻烦,毕竟还要找到源文件修改。其次就是还有风险,万一不小心改错了什么,更麻烦!最重要的就是更新直接覆盖,你添加的代码全没了….
使用添加自定义代码就十分简单了,主题设置提供多个位置的自定义代码!方便修改,还不会因更新而丢失!嗯哼,这样是不是很方便啊!

添加教程

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

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

CSS、JS代码添加示例

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

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

本站设计-正确使用自定义代码示例及教程 插图1

主题添加自定义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>
本站设计-正确使用自定义代码示例及教程 插图2

自定义代码能实现的功能千变万化,以上教程只是一个推荐示例,肯定不能满足所有人的需求,不是万不得已不推荐直接修改源码!

只要使用自定义代码就一定会有风险!所以请注意!

  • 使用自义定代码,需要有一定的代码基础
  • 代码不规范、或代码错误将会引起意料不到的问题
  • 如果网站遇到未知错误,请首先检查自定义代码是否规范、无误

最后提一下,PHP代码是没法这样设置的,只有改源码!

温馨提示:本文最后更新于2022-12-14 18:55:36,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞26赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容