对于一些使用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之间的关系

相关文章

  • WordPress教程菜鸟教程

    WordPress教程菜鸟教程

    WordPress作为市场上最受欢迎的建站平台,越来越多的商家选择基于WordPress进行外贸独立站的搭建工作,但是又因为其建站技术的门槛,许多人想选择WordPress进行外贸建站又不知道如何下手,所以下文价格基于此为大家具体介绍WordPress外贸建站如何从零开始,快速搭建一个独立站。 一、域名注册 域名是网站在网络上的“住址”,相当于一间房子的门牌号,用户只有知道网站的住址,才能通过域名访问到网站。域名注册是外贸独立站建站的第一步,任何一个网站都不能例外。域名注册其实非常简单,只需要确…

    开发教程 2024年 10月 16日
  • WordPress怎么多语言?

    WordPress怎么多语言?

    随着外贸建站行业的不断深入发展,WordPress的多语言功能也显得越来越重要,一个具有多语言的独立站不仅可以有利于客户的访问,而且在一定程度上也有利于网站的SEO优化。那么WordPress多语言网站到底该怎么设置呢?其实设置方法多种多样,用户可以通过用两种不同的语言文章撰写文章来实现,也可以通过创建两个具有不同语言的站点来达到WordPress多语言的设置。下文将为大家具体介绍多语言网站的设置方法。 一、一个站点,一篇文章 用户可以创建一个站点,并让每篇文章或每个页面都包含用两种语言显示的相…

    开发教程 2024年 10月 2日
  • WooCommerce多语言设置教程

    WooCommerce多语言设置教程

    WooCommerce作为一款WordPress外贸建站不可或缺的商城构建插件,其自身也拥用一系列强大的WooCommerce附加组件,例如构建WooCommerce多语言商城会使用到的Webis Multilingual插件,而下文将围绕此插件为大家展示WooCommerce多语言的设置过程,希望可以为各位提供一个多语言网站的设计思路。 一、安装插件 从WooCommerce帐户下载.zip文件,转到WordPress Admin-插件-添加新插件和上传插件,使用下载的文件,选择 Choose…

    开发教程 2024年 10月 24日
  • Web开发

    网站开发初学者指南:网页开发基础知识

    Web 开发不仅仅是标记和编码。它是一种艺术形式,是将想法变为现实的一种方式。虽然 Web 开发通常是指 Web 标记和编码,但网站开发包括所有相关的开发任务,例如客户端脚本、服务器端脚本、服务器和网络安全配置、电子商务开发和内容管理系统 (CMS) 开发。 一、为什么Web开发很重要 我们所在的世界有超过53 亿人通过互联网连接吗,这占全球人口的一半以上,通过这个令人难以置信的数字宇宙积极参与研究、联系、教育和娱乐。 鉴于互联网用户数量的快速增长,网络开发成为一个快速发展的行业也就不足为奇了。…

    开发教程 2024年 5月 22日
  • 两个用于导出网站文件的选项

    如何将网站从WordPress.com移至WordPress.org?

    随着WordPress独立站的发展,一些商家会选择将WordPress网站从WordPress.com迁移至WordPress.org,以获得更多的外贸建站资源,进行独立站的自定义设计。那么如何将网站从WordPress.com移至WordPress.org?商家需要经过导出WordPress.com站点内容、建立新的WordPress.org站点等步骤实现WordPress.com站点迁移至WordPress.org的目标,所以下文将基于此为大家介绍WordPress独立站的迁移过程,感兴趣的…

    开发教程 2024年 11月 7日
  • 选择统一费率

    WooCommerce运费设置

    WooCommerce作为WordPress外贸建站生态的一部分,WooCommerce运费设置是商家在建站过程中不可忽视的一部分,那么商家到底该如何在WooCommerce中添加运费并配置高级运费选项呢?下文将为大家展示具体步骤,通过WooCommerce运费的合理设置,商家可以有效地管理运输成本,提供有竞争力的运费,并增强在线商店的整体客户体验。 一、了解WooCommerce不同类型的运费 在深入了解添加运费的具体方法之前,可以先花点时间了解WooCommerce中可用的不同类型的运费: …

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

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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