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的最佳插件

Code Embed

Author(s): David Artiss

Current Version: 2.3.2

Last Updated: 2018-10-22

simple-embed-code.2.3.2.zip

96%

Ratings

20,000+

Installs

WP 4.6+

Requires

插件介绍

这个插件的做者是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。