方法1:通过插件添加js(Javascript)
添加自定义js到wordpress最小白的方法当然是通过插件来完成的,其实还有一些wordpress主题本身就提供添加自定义js,但这种主题比较少,所以还是插件更通用。
因为插件挺多,我就拿一个举例,其他大致用法都差不多的,我要说的是Insert Headers and Footers by WPBeginner这款插件,你可以直接通过左边菜单的plugins搜索安装,也可以到wordpress.org网站去下载再上传安装插件。
安装过程就不多说了,安装完成后在左侧的setting中会增加一项Insert Headers and Footers,点击就能在网站的头部<head>或者底部<footer>添加一些代码了。
比如你使用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网址,效果是一样的。
这个方法按照一些前端大佬说的没有以上方法好,但是也不失为一个不错的方法。比如我自己就是用这个方法添加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的话,那就直接用插件完成吧,省时省力,至于其他的如果没兴趣的话还是别去研究了,因为这个并不是你们的专业工作,有时候有一点点小问题都可能会不成功。