对于一些使用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’ ); |
推荐阅读：
相关文章
-
如何进行CSS的网站设计与开发？
各位站长在外贸建站时，可以通过变换生成、掌握Calc（）函数、Box-Sizing等方式设计出更丰富的网站页面。CSS作为与HTML相辅相成的网站开发工具，可以极大程度上，减少前端技术人员代码编写的负担，帮助网站形成一个良好的网站布局。所以，本文接下来将和大家分享在CSS设计中存在的一些巧思，让各位站长更好的进行Web开发工作。 一、图像必须匹配站点的颜色方案 颜色方案使得管理工作流程变得复杂。站长可能会使用高分辨率，如灰度PNG，并使用CSS滤镜添加色调。该方式可以将肖像匹配到事件方案，并且可…
-
搭建独立站要做什么准备：避坑指南
大多数第一次外贸建站的商家，经?；嵋苫蟠罱ǘ懒⒄疽鍪裁醋急?，首先商家需要确定建站目标，其次要选择合适的建站方式，进行网站结构的规划，然后要确定目标关键词，最后则需要对网站进行运营维护的设置。所以本文为了让大家更好的搭建独立站，接下来将围绕以上提到的几个方面，为大家详细介绍独立站搭建的准备指南，帮助大家成功避坑。 搭建独立站要做什么准备一：建站目标的确定 在搭建外贸独立站之前，确定网站是旨在销售商品、分享个人见解、展示产品组合、提供服务或用于其他独特目的，这将有助于塑造整体结构和内容策略。 如果…
-
WooCommerce运费设置
WooCommerce作为WordPress外贸建站生态的一部分，WooCommerce运费设置是商家在建站过程中不可忽视的一部分，那么商家到底该如何在WooCommerce中添加运费并配置高级运费选项呢？下文将为大家展示具体步骤，通过WooCommerce运费的合理设置，商家可以有效地管理运输成本，提供有竞争力的运费，并增强在线商店的整体客户体验。 一、了解WooCommerce不同类型的运费 在深入了解添加运费的具体方法之前，可以先花点时间了解WooCommerce中可用的不同类型的运费： …
-
如何在WooCommerce中设置折扣码？
如何在WooCommerce中设置折扣码？商家可以通过WooCommerce-常规-折扣码这一途径进行WooCommerce折扣码的设置。在进行WooCommerce和WordPress跨境电商独立站搭建的工作中，不少商家会通过使用WooCommerce折扣码来提高用户的忠诚度和网站户转化率，所以接下来将为大家具体介绍WooCommerce折扣码的设置过程，以最大程度上满足顾客需求，提高网站的竞争力。 一、WooCommerce折扣码类型 WooCommerce提供多种折扣码类型以满足不同的销售…
-
WordPress主题框架是什么 WordPress主题框架推荐
WordPress主题框架其实与WordPress父主题类似，借助WordPress主题框架用户可以为主题的创建提供代码库，帮助用户加快网站开发过程，此外借助WordPress主题框架还可以设置无头WordPress网站，为用户提供多样的外贸建站计划。 一、WordPress主题框架是什么 1、WordPress主题框架优点 （1）大量的内置功能：从广泛的代码库和自定义挂钩到预制的小部件和拖放功能，可以简化和加快开发速度。 （2）更高效：WordPress主题框架使用最佳开发实践构建，按照严格的…
-
Shopify跨境电商开店流程及费用
Shopify跨境电商独立站凭借易用性和可扩展性，允许商家在没有高技术专业知识的情况下创建专业的跨境电商商店，无论是开展副业还是扩展已建立的业务，Shopify独立站都会提供强大的工具来支持商家的旅程。在本文中将讨论如何通过九个简单的步骤进行Shopify跨境电商的开店及Shopify开店费用的介绍。 一、Shopify跨境电商开店流程 1、注册Shopify 创建Shopify商店的第一步是Shopify注册，为此需要访问 Shopify 并单击“开始免费试用”按钮。Shopify 提供为期三…
