对于一些使用WordPress进行外贸建站的商家来说，大部分人会通过在WordPress中添加JS代码和CSS样式表，以增强网站的交互性和观赏性，但对于一些不了解代码知识的商家可谓是天方夜谭，所以本文接下来将为大家讲解WordPress添加JS和CSS样式表的具体教程。
一、WordPress添加JS和CSS样式表的常见错误
许多WordPress插件和主题开发人员都犯了直接将脚本或内联CSS添加到插件和主题中的错误，有些人错误地使用wp_head函数来加载脚本和样式表。
| <?php add_action(‘wp_head’, ‘wpb_bad_script’); function wpb_bad_script() { echo ‘jQuery goes here’; } ?> |
虽然上面的代码看起来更容易，但这是在WordPress中添加脚本的错误方式，并且会导致未来更多的冲突。例如如果手动加载jQuery，而另一个插件通过正确的方法加载jQuery，那么jQuery被加载了两次，如果它被加载到每个页面上，那么这将对WordPress的速度和性能产生负面影响。如果这两个版本也可能不同，也可能导致冲突，接下一起来看看添加脚本和样式表的正确方法。
二、为什么在WordPress中启用JS和CSS样式表
WordPress拥有强大的开发者社区，来自世界各地的数千人为WordPress开发主题和插件。为了确保一切正常，WordPress有一个查询系统，该系统提供了一种可编程的方式来加载Javascript和CSS样式表。通过使用wp_enqueue_script和wp_enqueues_style函数，可以告诉WordPress何时加载文件、在哪里加载文件以及它的依赖关系是什么，该系统还允许开发人员利用WordPress附带的内置JavaScript库，而不是多次加载相同的第三方脚本，这减少了页面加载时间，并有助于避免与其他主题和插件的冲突。
三、如何取消WordPress JS队列
在WordPress中正确加载脚本非常容易，下面是一个示例代码，可以将其粘贴到插件文件、主题的functions.php文件或代码片段插件中，以便在WordPress中正确加载脚本。
| ?php function wpb_adding_scripts() {wp_register_script(‘my_amazing_script’, plugins_url(‘amazing_script.js’, __FILE__), array(‘jquery’),’1.1′, true);wp_enqueue_script(‘my_amazing_script’); }add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); ?> |
首先通过wp_register_script（）函数注册脚本，此函数接受以下5个参数：
1、$handle–handle是脚本的唯一名称，脚本名为“my_amazing_script”。
2、$src–src是脚本的位置，大家通?；崾褂胮lugins_url函数来获取插件文件夹的正确url，一旦WordPress找到，它就会在该文件夹中查找文件名amazing_script.js。
3、$deps–deps表示依赖关系，由于脚本使用jQuery，在依赖区域添加了jQuery，如果jQuery尚未加载到网站上，WordPress将自动加载jQuery。
4、$ver–这是脚本的版本号，此参数不是必需的。
5、$in_footer–希望在页脚中加载脚本，因此将值设置为true，如果想在标题中加载脚本，那么可以将其设置为false。
在wp_register_script中提供所有参数后，只需在wp_enqueue_script（）中调用脚本，即可完成所有操作，最后一步是使用wp_enqueue_scripts操作钩子来实际加载脚本，由于这是一个示例代码，可以将其添加到其他内容的正下方。如果把它添加到主题或插件中，那么可以把这个动作钩子放在实际需要脚本的地方，这允许减少插件的内存占用，现在有些人可能会想，为什么要先注册脚本，然后再查询它？这样做的好处在于允许其他网站所有者在不修改插件核心代码的情况下注销脚本。
四、在WordPress中启用CSS
就像脚本一样，也可以将样式表排队，看看下面的例子：
| <?php function wpb_adding_styles() { wp_register_style(‘my_stylesheet’, plugins_url(‘my-stylesheet.css’, __FILE__)); wp_enqueue_style(‘my_stylesheet’); } add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_styles’ ); ?> |
现在使用wp_enqueue_style添加样式表，而不是使用wp_enquenue_script。
请注意：由于对样式和脚本都使用了wp_enqueue_scripts动作钩子，尽管有这个名字，但这个函数对两者都有效。
在上面的示例中，使用plugins_url函数指向想要排队的脚本或样式的位置，但是如果在主题中使用了enqueue-scripts函数，那么只需使用get_template_directory_uri（）即可；如果正在使用子主题，请使用get_stylesheet_directory_uri（）。
下面是一个示例代码：
| <?php
function wpb_adding_scripts() { add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ ); |
推荐阅读：
相关文章
-
WooCommerce多语言设置教程
WooCommerce作为一款WordPress外贸建站不可或缺的商城构建插件，其自身也拥用一系列强大的WooCommerce附加组件，例如构建WooCommerce多语言商城会使用到的Webis Multilingual插件，而下文将围绕此插件为大家展示WooCommerce多语言的设置过程，希望可以为各位提供一个多语言网站的设计思路。 一、安装插件 从WooCommerce帐户下载.zip文件，转到WordPress Admin-插件-添加新插件和上传插件，使用下载的文件，选择 Choose…
-
WordPress短代码怎么用？
WordPress短代码怎么用？随着WordPress Shortcode API功能的发布，越来越多的商家会借助WordPress短代码来实现WordPress特定功能的开发与添加。常见的WordPress短代码主要有视频、音频，图库等，但是对于一些不熟悉WordPress短代码的商家来说，借助WordPress短代码实现WordPress外贸建站可能会有一点困难，所以下文将基于此为大家介绍WordPress短代码怎么用及是什么的有关内容。 一、WordPress短代码是什么 WordPres…
-
WordPress侧边栏怎么设置添加
在进行WordPress外贸建站的过程中，站长会通过添加设置侧边栏来丰富网站的结构，以优化用户体验。通常来说，站长可以借助定制器和Widgets页面实现WordPress侧边栏的设置和添加，为了和大家具体分享WordPress侧边栏的相关知识，下文将以此为大家呈现为什么要添加WordPress侧边栏、怎么设置、删除WordPress侧边栏的内容。 一、为什么要设置添加WordPress侧边栏 1、侧边栏提供了对WordPress独立站重要部分的快速访问，使即时探索变得直观。 2、WordPres…
-
WordPress RSS订阅如何做？
商家在不使用WordPress插件的情况下，可以借助WordPress网站编辑器和小部件来实现WordPress RSS订阅。借助WordPress RSS订阅，商家可以在外贸建站运营推广的过程中，进一步优化网站SEO，增加用户粘性，帮助访客/搜索引擎可以及时了解和抓取网站内容。 一、WordPress RSS是什么 WordPress RSS是一个基于 XML 的文件，全称为“Really Simple Syndication”，允许用户自动访问网站的内容，该订阅包括最近文章、自定义文章类型、…
-
WordPress安全防护教程
WordPress作为一款开源免费软件，在使用WordPress进行外贸建站的工作时，不免会遇到安全隐患的问题，那么为了独立站的安全，用户该如何保证网站的安全呢？下文将为大家介绍具体的操作内容。 1、进行WordPress备份 备份网站是最常见的?；ordPress独立站的方法，备份可以保障网站即使发生故障和恶意攻击，也能在短时间内恢复正常运行，如何对WordPress独立站进行备份，可以访问此文章《WordPress怎么备份文件和数据？》，了解具体操作。 2、启用 Web 应用程序防火墙 (…
-
WordPress更换域名详细教程
当商家遇到WordPress独立站改版或者域名到期等问题时，不免会涉及到WordPress域名的更改，那么这一步骤该如何操作呢，对于大部分外贸建站的新手来说，可谓是一个令人头疼的问题，所以本文接下来讲为大家讲解WordPress更换域名详细教程。 一、WordPress后台更换域名 登录WordPress后台，在仪表盘—设置—常规中，点击然换域名，将里面的WordPress 地址（URL）和站点地址（URL）都修改为新的域名，然后点击保存更改。 二、phpMyAdmin更换WordPress域名…
