专栏首页一丘一壑Code Embed:在WordPress文章和页面中添加Javascript的最佳插件

Code Embed:在WordPress文章和页面中添加Javascript的最佳插件

前(fei)言(hua)

自从又开始迷上了WordPress,每天都会花不少时间在WordPress相关的网站上闲逛,这感觉竟然有点像分手复合又陷入了热恋的情人,没事就腻歪在一起,要把之前错过的时间都补回来。。。

打算开一个系列《每日插件》,本文算作是第一篇吧

JavaScript 和 WordPress

什么是JavaScript?

广义上来说, JavaScript,通常缩写为JS,是一种高级的,解释执行的编程语言。 JavaScript是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。宿主环境:浏览器(web端)、node.js(服务端)

狭义上来说有两种:

一个是基于浏览器端的 JavaScript (前端 ),是运行在浏览器环境里的脚本语言,更多的是对html dom元素的操作,以及一些异步刷新等等,就像jquery的初衷一样,更少的代码,更多的特效;

一个是基于服务端的 JavaScript (后端 Node.js),尽管它设计之初是拿来写高性能服务的,但发展到今天实际用途已经很广泛了,除了服务器端开发,桌面、命令行工具用得也挺广泛的。

所以,当我们在谈论在WordPress中嵌入JavaScript时,特指的是浏览器端的JavaScript。

为什么要在WordPress文章或页面中添加JavaScript?

首先,通过JavsScript可以极大的丰富和扩展WordPress的功能,更好的满足自定义需求。

由于JavaScript是一种客户端脚本语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。

其次,JavaScript的功能丰富多样,再加上它的各种库,几乎能胜任任何工作。

在Web网页中的JavaScript从代码的来源来说,可以分为两类,第一方和第三方。

第一方是网页开发者自己使用的JavaScript代码(内容可控)。一些简单的需求完全可以直接手写一段小的代码即可,当然这里也是可以引入各种库的。

第三方则是来自其他服务提供商将自己的服务通过“HTML投放代码”的形式提供给网站使用(内容基本不可控)。由于Javascript的动态特性,一般的第三方服务都会直接或间接的提供Javascript文件给网站页面加载。这里有非常多的第三方服务可以使用,比如监控代码、Gist的嵌入代码、联盟或电商的推广代码等等都是这种形式。

最后,在WordPress上使用JavaScript很容易 。

一般来说,在WordPress文章或页面中插入JavaScript的方法有如下几种:

  • 编辑器:在古腾堡编辑器中插入一个HTML块,把代码以HTML的形式插入。这种方式比较方便,适合插入一些简单的小段代码,或者是第三方提供的动态加载代码。比如在本博客WordPress 精品插件大全页面的开发小记中的Python代码、PHP代码的嵌入就是直接使用了gist提供的JavaScript嵌入方式
  • PHP文件:WordPress核心代码中已经自带了很多的JavaScripty库,在主题文件中使用 wp_enqueue_script()注册JavaScript。这种方式比较灵活,自定义强,但对于不熟悉代码的用户可能会不太友好。具体方法在本博客的jQuery标签里的文章里有介绍
  • 管理后台:在WordPress管理后台中可以通过插入Header Scripts、Body Scripts、Footer Scripts 来形式来控制插入的范围。这种方式比较适合插入一下全局性的代码,如Google的Analytics、Adsense等代码,也可以为文章或页面插入单独的代码
  • 插件方式:通过WordPress插件的方式来插入JavaScript。这类插件也是很多的,本文重点要介绍的就是这种方式。

Code Embed:在WordPress文章和页面中添加Javascript的最佳插件

插件介绍

这个插件的作者是David Artiss,从他的自我介绍里得知他是 WordPress.com VIP team工作的,为一些大型企业客户提供技术服务,是WordPress的核心代码、文档、技术支持等方面的贡献者。

这个插件的评价几乎全是五星好评,唯一一个一星是用户找不到开始自定义字段的地方,作者还给耐心解释了,不愧是做VIP服务的啊!这耐性!

插件的功能很强大,使用也很方便,主要亮点如下:

  • Add HTML or JavaScript to posts or pages – particularly useful for embedding videos!
  • Embed in widgets using the Widget Logic plugin
  • Global embedding allows you set up some code in one post or page and then access it from another
  • Modify the keywords or identifiers used for embedding the code to your own choice
  • Search for embedding code via a simple search option
  • Add a simple suffix to the embed code to convert videos to responsive output
  • Embed an external script directly using just the URL
  • And much, much more!
  • 可以在任意文章或页面里插入HTML、JavaScript,嵌入视频的时候特别有用
  • 结合 Widget Logic 插件,可以支持有条件的插入
  • 全局性调用,在一篇文章/页面嵌入后可以在其他的文章/页面中调用。(这个绝对是亮点!)
  • 支持自定义嵌入代码的前缀关键词
  • 支持搜索
  • 支持视频的响应式嵌入
  • 支持第三方代码的直接嵌入或者直接使用URL进行嵌入
  • 。。。。

使用步骤

第1步:安装所需的插件

要将Javascript添加到 WordPress页面和文章 ,你需要安装Code Embed插件。安装WordPress插件的步骤很简单,可以下载WordPress插件文件并上传到你的站点。或者,使用WordPress仪表板中的“添加新插件”功能。安装后不要忘记激活插件。

第2步:在仪表板中打开选项

激活后,在文章的编辑页面中,单击三个点点,在“选项”选择“ 自定义字段”选项。

第3步:创建新的JavaScript代码条目

在文章编辑器下方,将看到“自定义字段”框,你需要点击“输入新栏目(add new)”,然后输入自定义字段的名称和值字段。

需要注意是:你需要使用CODE前缀(例如,CODEshowtime)作为自定义字段的名称,然后将javascript代码粘贴到值字段中。不要忘记单击“添加自定义字段”按钮以保存自定义字段。

基本这个值的字段可以算做无限长,可以存4百万个字符,你可以放心的添加:

WordPress stores the custom field contents in a MySQL table using the longtext format. This can hold over 4 billion characters.

第4步:编辑页面或帖子,插入短代码

现在,你可以使用此自定义字段CODEshowtime将JavaScript代码嵌入到文章中的任何位置。只需在帖子内容的任何位置添加这个名字即可 ,见上图。

总结

该插件可帮助你创建新的JS字段,并可以在所有页面和文中重复使用。只需要输入JS字段的名称以及包含JS代码的值字段。填写字段后,就可以在内容中使用字段名称。在给新JS字段命名时,不要忘记输入前缀CODE。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Display Posts : 按条件显示WordPress文章的最强插件

    WordPress本质上是一个内容管理系统(CMS),是显示、创建、发布和维护内容的软件。

    丘壑
  • 用Python分析WordPress官网所有插件的开发者信息(续以及人物介绍)

    书接上回,上一篇里我们讲了一点数据分析的思路和方法,顺带分析了一下http://WordPress.org上所有插件的作者信息,得到了几个数据,比如插件数量To...

    丘壑
  • WordPress 精品插件大全页面的开发小记

    昨天发布了一个Page页面:WordPress 精品插件大全。有些朋友比较感兴趣是如何做的,本篇简单写一下整个开发过程,作一个小结,也顺便整理一下代码,本地开发...

    丘壑
  • 零基础学基金投资系列-04-基金的分类(2)

    比方说,大名鼎鼎的余额宝,它的本质就是一只货币基金。余额宝背后所代表的货币基金叫天弘增利宝货币基金,是天弘基金公司发行的一款货币基金产品。

    Hongten
  • 推荐一个小而美的Python代码格式化工

    代码可读性是评判代码质量的标准之一,有一个衡量代码质量的标准是 Martin 提出的 “WFT” 定律,即每分钟爆出 “WTF” 的次数。你在读别人代码或者做 ...

    py3study
  • 大型网站技术架构核心原理与案例分析(二)

    扩展性(Extensibility):指对现有系统影响最小的情况下,系统功能可持续扩展或提升的能力。是系统架构设计层面的开闭原则,架构设计考虑未来功能扩展,当系...

    硬核项目经理
  • 海底电缆:互联网背后的无名英雄

    大数据文摘
  • react

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    sofu456
  • 寻找网站目录资源并提交

    网站目录提交需要花时间和精力寻找网站目录资源,我们需要考虑提交哪些网站目录,我们需要使用工具发现竞争对手的网站链接,这讲将详细介绍寻找网站目录资源。

    林雍岷
  • SAP ABAP实用技巧介绍系列之 ABAP XSLT copy keyword

    下列xslt将只会输出h2的My CD Collection,因为sub template 匹配之后没有任何实现:

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券