网站内容添加(有时候网站如何添加自定义js到wordpress最小白的方法介绍)

　　网站内容添加(有时候网站如何添加自定义js到wordpress最小白的方法介绍)

　　有时候网站需要一些特殊的行为效果，那么就需要Javascript来完成，javascript简称为js，但这些大多是专业前端人员的工作，普通人用cms建站基本很少使用Get this，因为大多数主题已经呈现出想要的效果。

　　虽然如此，但仍有一些任务可能需要您自己添加js。比如你需要每天使用google分析查看网站的流量详情。比如你需要在各大搜索引擎添加网站。这个可能需要对如何添加自定义js有一点了解。

　　快速浏览

　　方法一：通过插件添加js（Javascript）

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

　　因为插件很多，我就举个例子。其他一般用法类似。我想说的是 WPBeginner 的 Insert Headers and Footers。可以直接通过左侧菜单中的插件搜索安装，也可以到网站去下载然后上传安装插件。

　　安装过程我就不多说了。安装完成后，会在左侧的设置中添加一个插入页眉和页脚。点击它在网站的头部或底部添加一些代码。

　　比如使用google分析时，需要在网站的header中添加一串代码。每次网站 有任何流量时，谷歌分析都会对其进行跟踪。以下是google分析的G4账号js代码：

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'G-XXXXXXXXXX');

　　你只需要复制这串代码，保存在上图的Scripts in Header中即可。通常48小时后，google分析会全程跟踪你的网站，然后你就可以查看你的流量来源，甚至每天的交易金额等等。

　　如果你想在底部插入javascript来实现一些功能，你可以把它放在页脚中，复制粘贴并保存。这种方法适合新手和新手。真的没什么好说的，看看就好。当然，如果你懂javascript语言，会自己写js，也可以直接加自己写的。

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

　　方法二：通过修改wordpress主题的functions.php文件添加自定义js（Javascript）

　　通过主题的functions.php添加自定义js。首先，我建议您为您使用的主题创建一个子主题，即子主题。至于如何创建子主题：直接使用插件，创建后删除插件即可。

　　为什么我建议创建一个子主题，因为原来的主题经常升级，不管你是使用免费的还是付费的主题，为什么兼容最新的wordpress版本，你会一直升级，因为wordpress本身经常升级，每次升级主题都会删除你对主题所做的任何更改，functions.php也不例外，但是如果你创建了子主题，升级原主题后，原主题不会对子主题进行更改- 主题。

　　如何创建子主题：如何为 WordPress网站 创建子主题。

　　创建子主题后直接激活使用，与原主题无异。从左侧菜单的外观->主题编辑器进去，会弹出一个确认框，说明你已经知道你可能会更改一些主题的东西，这可能会导致网站瘫痪。点击了解，如果正常，你会看到下图

　　但一定要在右上角选择你需要修改的主题文件，并选择你刚刚创建的子主题。通常里面只有两个文件，一个是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后面的括号各项含义如下：

　　使用 wp_enqueue_script 添加第三方 javascript 库

　　如果需要添加一些第三方javascript库，一般来说第三方库的前端展示是这样的

　　在这种情况下，您可以通过以下方式插入

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

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

　　使用 wp_head 和 wp_footer 添加 javascript

　　在一些前端老板看来，这个方法不如上面的方法好，但也是一个不错的方法。比如我自己用这个方法添加google分析的js代码，没有太大影响：

<p>add_action('wp_head', function() {

?>

//以下就是你需要添加的代码

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'G-xxxxxx');