对于一些使用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是脚本的位置,大家通常会使用plugins_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() {
wp_register_script(‘my_amazing_script’, get_template_directory_uri() . ‘/js/amazing_script.js’, array(‘jquery’),’1.1′, true);
wp_enqueue_script(‘my_amazing_script’);
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
?>

推荐阅读

如何进行CSS的网站设计与开发?

HTML、PHP、CSS和JS之间的关系

相关文章

  • WooCommerce购物车添加按钮示例

    WooCommerce购物车添加按钮如何设置?

    WooCommerce购物车添加按钮如何设置?对于使用WooCommerce进行跨境电商独立站搭建的商家来说,可以通过在想要添加WooCommerce购物车添加按钮的页面,插入一段代码即可达到相关功能实现的目的。为了帮助大家更好的了解如何插入代码才能实现WooCommerce购物车按钮的添加,接下来将具体介绍有关内容,以更好的简化客户购买流程,优化用户体验。 一、为什么要设置WooCommerce购物车添加按钮 1、改进的美学:它允许商家将按钮的设计与品牌的风格和配色方案相匹配,从而帮助改善网站…

    开发教程 2025年 3月 13日
  • 进入 My Elementor 仪表板

    Elementor编辑器怎么用 WordPress Elementor编辑器教程

    Elementor编辑器怎么用?使用WordPress Elementor编辑器可以帮助商家实现构建页面和超级菜单等目标,此外借助编辑器Pro版本,用户还可以通过使用其内置的AI功能实现文本和代码的自定义创建。为了让各位使用Elementor编辑器进行外贸建站的站长,更加熟练地使用该编辑器,下文将围绕以上所说的Elementor编辑器怎么用的三个方面,为大家介绍具体的图文操作教程。 Elementor编辑器怎么用一:创建页面 如何创建新页面取决您是使用 Elementor Hosting 还是带…

    开发教程 2025年 1月 29日
  • WordPress更换域名详细教程

    WordPress更换域名详细教程

    当商家遇到WordPress独立站改版或者域名到期等问题时,不免会涉及到WordPress域名的更改,那么这一步骤该如何操作呢,对于大部分外贸建站的新手来说,可谓是一个令人头疼的问题,所以本文接下来讲为大家讲解WordPress更换域名详细教程。 一、WordPress后台更换域名 登录WordPress后台,在仪表盘—设置—常规中,点击然换域名,将里面的WordPress 地址(URL)和站点地址(URL)都修改为新的域名,然后点击保存更改。 二、phpMyAdmin更换WordPress域名…

    开发教程 2024年 9月 24日
  • 填写名称、在用的邮箱地址、设置密码

    Shopify企业邮箱Zoho注册登录教程

    在使用Shopify搭建跨境电商独立站的过程中,商家使用企业邮箱进行邮件营销,可以给予用户更高程度的专业感和信任度。目前Zoho邮箱因为免费的价格和较高的送达率在跨境商家中比较受欢迎,所以下文将为大家具体介绍Shopify企业邮箱Zoho注册登录教程,讲解如何注册Shopify企业邮箱Zoho并绑定网站域名。 一、注册Shopify企业邮箱Zoho免费账号 Zoho 也有中文网站,不过不提供免费版注册。所以先访问英文版网站注册账号,注册后将语言改为中文即可。填写名称、在用的邮箱地址(用于接收注册…

    开发教程 2025年 5月 12日
  • htaccess文件

    .htaccess在哪里 .htaccess文件主要用于哪些目的?

    .htaccess在哪里? WordPress .htaccess文件通常位于WordPress public_html或www文件夹中,即根目录中,可以主要应用于管理永久链接结构、提高网站性能、设置重定向等目的,所以下文将基于.htaccess文件及其相关设置展开有关内容的叙述,为大家在WordPress外贸建站开发中提供一定操作指导。 一、什么是.htaccess文件 .htaccess文件是“超文本访问”的缩写,是Apache Web服务器使用的强大服务器配置文件。在WordPress上下…

    开发教程 2024年 11月 15日
  • 关闭WordPress主题或插件自动更新功能

    如何关闭WordPress主题或插件自动更新功能?

    通常情况下WordPress主题或插件应该保持自动更新功能,以实现维护WordPress网站安全和网站正常运行的作用,但有时这一功能可能会带来网站代码覆盖,甚至会网站崩溃的问题,所以这时候用户可以通过插入代码或者是安装Easy Updates Manager插件实现WordPress主题或插件自动更新功能的关闭,下文将为大家具体展示这一过程,希望可以助力大家外贸建站工作的顺利开展。 一、插入代码关闭WordPress主题或插件自动更新 1、通过wp-config.php文件禁用WordPress…

    开发教程 2024年 10月 31日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部