以正确的方式将Javascript添加到WordPress主题

有一种将Javascript添加到WordPress主题中的特定方法,以防止与插件或父WordPress主题发生任何冲突。问题是许多“开发人员”直接在header.php或footer.php文件中调用其javascript文件,这是错误的做法.


在本指南中,我将向您展示如何使用functions.php文件正确调用javascript文件,以便它们直接加载到您网站的head或footer标签中。这样,如果您正在开发要分发的主题,而最终用户希望通过子主题修改脚本,或者如果他们使用缩小/缓存或其他优化插件,则它们将正常工作。如果您使用的是子主题,则会以正确的方式添加脚本,而无需将header.php或footer.php文件复制到子主题中(使用正确编码的主题时,这是不必要的)

将Javascript添加到WordPress主题的错误方法

调用如下所示的header.php文件或footer.php文件中的javascript并不是正确的方法,我强烈建议您反对它,通常,这会导致与其他插件发生冲突,并且在使用CMS时手动执行操作永远不会一个好主意.

将Javascript添加到WordPress主题的正确方法

将javascript添加到WordPress主题的更好方法是通过使用 wp_enqueue_script. 使用wp_enqueue_scripts操作加载您的JavaScript可以帮助您避免主题混乱.

wp_enqueue_script('my-script',get_template_directory_uri()。'/js/my-script.js',array(),true);

上面的代码将在您的网站上加载my-script.js文件。如您所见,我仅包含$ handle,但是您还可以为脚本,版本号以及是否将其加载到页眉或页脚中添加依赖项(默认为页眉).

从技术上讲,wp_enqueue_script()函数可以在任何主题或插件模板文件中使用,但如果要加载全局脚本,则需要将其放置在主题的function.php文件中,或放置在专门用于在脚本上加载脚本的单独文件中。现场。但是,如果您只想将脚本加载到特定的模板文件上(例如在画廊帖子上),则可以将函数直接放在模板文件中,但是,我个人建议将所有脚本都放在一个位置,并使用条件加载根据需要编写脚本.

WordPress托管脚本

关于WordPress的一件很酷的事情是,已经有许多托管和注册的脚本可以在主题开发中使用。例如,几乎总是在WordPress中加载几乎所有项目中都使用的jQuery,并且永远不要托管在Google等第三方网站上。因此,在将自定义脚本添加到项目之前,请检查 注册脚本 确保它尚未包含在WordPress中;如果是,则应加载该文件而不是注册自己的文件.

使用WordPress入队挂钩

之前我们提到了在您的站点上加载脚本所需的功能,但是,当使用非模板文件(例如您的functions.php文件)时,您应该将此函数添加到另一个钩在正确的WordPress钩子中的函数中,这样您的脚本就可以在使用子主题时,已通过WordPress注册的所有其他脚本,第三方插件和您的父主题进行了注册.

WordPress有两个不同的动作挂钩,可用于调用脚本.

  1. wp_enqueue_scripts – 用于在前端加载脚本的动作
  2. admin_enqueue_scripts –用于在WP管理员中加载脚本的操作

这是一个如何创建函数,然后使用WordPress钩子调用脚本的示例(将添加到functions.php文件中).

/ **
*排队脚本
* /
函数myprefix_enqueue_scripts(){
wp_enqueue_script('my-script',get_template_directory_uri()。'/js/my-script.js',array(),true);
}
add_action('wp_enqueue_scripts','myprefix_enqueue_scripts');

注意:了解在定义脚本位置时我们如何使用“ get_template_directory_uri”功能?此功能创建指向主题文件夹的URL。如果您正在使用子主题,则应改用“ get_stylesheet_directory_uri”,以便它指向您的子主题而不是父主题。.

添加内联Javascript代码

尽管您可以通过script标签轻松地将内联javascript粘贴到任何模板文件中,但最好还是使用WordPress钩子添加内联代码,尤其是当它是核心插件或主题代码时,这是个好主意。下面是向网站添加内联脚本的示例:

函数myprefix_add_inline_script(){
wp_add_inline_script('my-script','alert(“ hello world”);','after');
}
add_action('wp_enqueue_scripts','myprefix_add_inline_script');

这样做是在先前注册的“ my-script”脚本之后添加内联javascript。使用wp_add_inline_script时,您只能在已注册的脚本之前或之后添加内联代码,因此,如果您尝试修改特定脚本的代码,请确保已在其后加载该脚本,或者如果您只需要添加一些自定义代码,则可以进行挂钩它到大多数WordPress主题通常加载的jquery脚本中,如果没有,则可以使用wp_enqueue_script加载WordPress的jQuery托管版本.

通过使用此方法,人们可以通过子主题或插件附件轻松删除您的内联脚本,它可以使您所有的自定义javascript井井有条,并由WordPress解析,这样可以更安全。如果您使用的是子主题,则可以通过functions.php文件加载脚本,而不必将header.php或footer.php文件复制到子主题中.

也就是说,如果您使用的是子主题,则无需执行此操作,您可以使用wp_head或wp_footer钩子将代码直接转储到标头中,如下例所示:

add_action('wp_footer',function(){?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map