关注VPS服务器
相关知识分享

Header Footer Code Manager插件_Wordpress添加自定义HTML/JS/CSS代码

Header Footer Code Manager插件也叫页眉页脚代码管理器,是一个可以给Wordpress添加自定义HTML/JS/CSS代码的插件,,用户可以在插件中创建代码,然后添加到想要显示的页眉、页脚、文章内容上下等位置中。本文是老魏分享 Header Footer Code Manager插件安装使用的详细图文教程。

我们在使用 wordpress建站的过程中,遇到某段代码觉得比较有用,通过这个插件能添加脚本还不用修改主题文件,比如说看到一段代码:网站统计代码(百度统计、CNZZ统计、谷歌分析等)或者添加在线客服工具代码,就可以用这个插件来添加。而且后期不会因为主题升级而丢失这段效果代码,也不用每次主题升级后还手动添加代码,更别说会经常忘记这个事情了。

Header Footer Code Manager插件特点

  • 减少插件使用数量,避免错误添加代码而破坏网站;
  • 切换、升级、更改主题后,不会丢失代码段;
  • 在任意位置添加不限数量的js脚本和css样式;
  • 管理脚本加载哪些文章或页面;
  • 支持自定义文章类型;
  • 支持仅加载特定文章或页面或最新文章;
  • 控制脚本在页面上的确切加载位置–页眉,页脚,内容之前或之后;
  • 脚本只能在台式机或移动设备上加载,启用、禁用一个或其它;
  • 使用简码手动放置代码到任何地方;
  • 标记每个代码段以方便参考;
  • 插件会记录哪个用户在什么时间添加并最后编辑了代码段;

Header Footer Code Manager插件使用场景

  • 谷歌分析;
  • 谷歌AdSense;
  • Google跟踪代码管理器;
  • Clicky Web Analytics或其他分析跟踪脚本;
  • 聊天模块,例如Olark,Drip;
  • Pinterest网站验证;
  • Facebook像素,Facebook脚本,Facebook图像标记;
  • Google转换像素;
  • 推特;
  • 来自Crazy Egg的热图,通知栏Hello Bar等;
  • 任何代码片段(HTML / Javascript / CSS);

Header Footer Code Manager安装

在 wordpress后台插件,安装插件,搜索 Header Footer Code Manager会看到如下图所示,安装并启用。

Header Footer Code Manager安装

Header Footer Code Manager安装

Header Footer Code Manager设置

安装完成后点击设置进入,或者在 wordpress仪表盘左侧设置栏找到 HFCM > All Snippets,开始添加新的代码片段。

如下图所示分别添加如下:

snippet name片段名:区分不同片段;

site display代码生效范围:site wide全站,specific posts指定文章,specific pages指定页面,specific categories指定分类,specific post types指定文章类型,specific tags指定标签,lastest posts最新文章(自选数量),shortcode only手动添加短代码。

location代码存放位置:可以把代码插入到文章或页面的 header头部、before content内容之前、after content内容之后、footer尾部。

device display:代码在哪些设备上展示。所有设备,仅限台式机,仅限移动设备。

status状态:active激活,inactive未激活。

snippet/code代码存放区域。

Header Footer Code Manager设置

Header Footer Code Manager设置

Header Footer Code Manager使用

使用时比如谷歌分析代码是全站通用就选择site wide全站,save保存之后就成功了。

而有些代码是我们想让它生效时才生效,这时候可以用shortcode only手动生成短代码,然后添加到指定地方就行了。

Header Footer Code Manager插件用起来很简单,网上有一些汉化版老魏不建议用,因为一共也没多少个英文单词,哪怕用谷歌浏览器在线翻译功能也能立即搞明白了,不是什么难理解的内容。如果你经常折腾网站的话,会需要用到Wordpress添加自定义HTML/JS/CSS代码插件,首选考虑Header Footer Code Manager插件,方便的很。

赞(0)
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Header Footer Code Manager插件_Wordpress添加自定义HTML/JS/CSS代码》
文章链接:https://www.vpsss.net/22778.html
本站资源仅供个人学习交流,转载请保留出处及链接,不允许用于商业用途,否则法律问题自行承担。