给wordpress网站添加自定义JS(Javascript)的2种方法

有时候网站需要一些特殊行为效果，那就需要Javascript来完成了，javascript简称js，不过大部分这些都是专业前端人员的工作，普通人利用CMS建站基本上很少用得到这个，因为大部分主题把需要的效果都已经呈现出来了。

虽然如此，但还是有些工作可能需要自己添加js，比如你需要用google analytics来查看每天网站的流量详情，比如需要将网站添加到各大搜索引擎，这个时候可能就需要稍微了解一点如何添加自定义js的知识了。

[wpcode id=”22747″]

方法1：通过插件添加js(Javascript)

添加自定义js到wordpress最小白的方法当然是通过插件来完成的，其实还有一些wordpress主题本身就提供添加自定义js，但这种主题比较少，所以还是插件更通用。

因为插件挺多，我就拿一个举例，其他大致用法都差不多的，我要说的是Insert Headers and Footers by WPBeginner这款插件，你可以直接通过左边菜单的plugins搜索安装，也可以到wordpress.org网站去下载再上传安装插件。

安装过程就不多说了，安装完成后在左侧的setting中会增加一项Insert Headers and Footers，点击就能在网站的头部<head>或者底部<footer>添加一些代码了。

Insert Headers and Footers ‹ My Blog — WordPress

比如你使用google analytics的时候，需要在网站头部添加一串代码，每次网站有任何流量，google analytics就会跟踪，以下是google analytics的G4账号js代码：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

你只要复制这串代码放到上面图片中的Scripts in Header中保存，通常48小时之后google analytics就会对你的网站全程追踪了，之后你就可以查看你的流量来源，甚至每天的交易金额等等。

假如某些功能要插入javascript到底部的，你就放入footer中，复制粘贴保存就行了，这个方法适合新手和小白，真没什么好说的了，一看便知。当然假如你懂得javascript语言，自己能编写js的话，也可以把自己写的直接加进去。

可以说wordpress建站几乎任何功能都能找到插件，但是一个wordpress网站安装太多插件也并不是一件很好的事情，所以还有其他办法添加自定义js，那些个专业人士更喜欢用这个方法，不过可能会更复杂一点。

方法2：通过修改wordpress主题的functions.php文件添加自定义js(Javascript)

通过主题的functions.php添加自定义js，首先我建议你先对你使用的主题创建一个子主题即child theme，至于如何创建子主题：直接用插件，创建完，插件都可以删掉。

为何我建议创建子主题，因为一般来说原主题经常会升级，这是为了兼容最新的wordpress版本，不管你的主题是免费的还是付费的都如此，其实根本原因还是因为wordpress本身就经常升级。每次升级主题，新版本就会删除你对主题的任何改动，functions.php也不例外，但是假如你创建了子主题，升级原主题之后，原主题并不会对子主题做出更改。

如何创建子主题：怎样给WordPress网站创建Child Theme(子主题)。

创建好子主题后直接激活使用，和原主题没什么两样。从左侧菜单中的Appearance->Theme editor进去，会跳出一个确认框，表示你已经知道可能会更改一些主题的东西，可能会造成网站瘫痪，点击understand,，正常的话会看到如下图

但一定要注意右上角选择你需要修改的主题文件，选择刚刚创建的子主题，里面正常来讲只有两个文件，一个就是style.css和functions.php，第一个是有关页面样式的文件，比如你的页面的外观，架构就靠这个里面的东西来实现。添加js就在functions.php完成，这个没有像插件复制粘贴那么简单。

通过functions.php添加自定义js也有多种方式。

通过利用wp_enqueue_script添加自定义js

wordpress官方推荐添加自定义js的方法就是利用 wp_enqueue_script 来插入你需要的代码，大致如下：

function my_custom_scripts() {
  wp_enqueue_script( 'my-js-file', get_stylesheet_directory_uri() . '/js/myscript.js', array( 'jquery' ), false, true); 
}
add_action('wp_enqueue_scripts','my_custom_scripts');

在functions.php中的/*Write here your own functions */后面插入以上代码，其中蓝色部分你可以自定义名字，也就是说你想取个什么名字都行，其他的 wp_enqueue_script后面括号中每一项意思如下：

get_stylesheet_directory_uri()是指获取所需js的路径，假如你是在原主题的functions.php上修改，这个要改成get_template_directory_uri()，后面跟个‘.’；
‘/js/myscript.js’ 是指具体的js所在路径，这里的路径是指网站主题根目录之下路径，比如你自己写了一段代码，或者你从某些工具获得的代码，比如google analytics获得的代码保存为一个js文件，就可以在这里输入这个js文件的路径；
array( ‘jquery’ )，这个是指js所需要的依赖项，最好是加上去
false，这里只你前面js文件的版本，一般是没有版本的，也就是false，或者有的话你写上版本编号
true，是否放在网页的底部即footer位置，true表示是，如果要放头部请用false

通过利用wp_enqueue_script添加第三方javascript库

假如你需要添加一些第三方javascript库，一般来讲第三方库在前端显示都是这样的

<script type="text/javascript" src="https//www.xxx.com/xxx.js"></script>

这种的话你就用以下方式插入

wp_enqueue_script( 'my-script', 'https//www.xxx.com/xxx.js', array( 'jquery' ), false, true);

其实前面的自定义js，如果你知道你的js文件完整的网址，也可以把完整的网址替换到上面蓝色的js网址，效果是一样的。

通过利用wp_head和wp_footer添加javascript

这个方法按照一些前端大佬说的没有以上方法好，但是也不失为一个不错的方法。比如我自己就是用这个方法添加google analytics的js代码，也没什么很大影响：

add_action('wp_head', function() {
  ?>
//以下就是你需要添加的代码
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxx');
</script>

<meta name="yandex-verification" content="4d1f5bb460cf65fe" />

 <?php	
}, );

以上这事在网页头部添加一些相应的代码，你可以直接复制这一段，然后把你需要的js替换里面的蓝色代码，而且你还可以添加一些验证代码，比如添加网站到某个搜索引擎，一般会要你在网站头部添加一条meta信息如上的绿色代码。所有的相关的验证代码都可以添加到此处。

如果是在网页的脚部即底部添加的话是把wp_head改成wp_footer。

还可以给特定页面添加js，这样就不需要在网站所有页面都加载一些无用的js，或者只在登录用户页面加载某些js，以后有机会再另外写文章。

结语

本文今天所说的给wordpress网站添加自定义js是你有现成写好的js，然后通过方法把它放到网站中，从而能够成功调用来达到你想需要的效果。做外贸独立站的朋友真的需要使用js的话，那就直接用插件完成吧，省时省力，至于其他的如果没兴趣的话还是别去研究了，因为这个并不是你们的专业工作，有时候有一点点小问题都可能会不成功。

分享到