转自丘壑博客
前（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的最佳插件
Author(s): David Artiss
Current Version: 2.3.2
Last Updated: 2018-10-22
96%Ratings20,000+InstallsWP 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 theWidget Logicplugin
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 thelongtextformat. This can hold over 4 billion characters.
第4步：编辑页面或帖子，插入短代码
现在，你可以使用此自定义字段CODEshowtime将JavaScript代码嵌入到文章中的任何位置。只需在帖子内容的任何位置添加这个名字即可 ，见上图。
总结
该插件可帮助你创建新的JS字段，并可以在所有页面和文中重复使用。只需要输入JS字段的名称以及包含JS代码的值字段。填写字段后，就可以在内容中使用字段名称。在给新JS字段命名时，不要忘记输入前缀CODE。
网友评论