wordpress制作网站时如何加载引入js和css文件

更新时间:2022-06-24 12:33:15 来源:青锋建站 作者:青锋建站
  在制作wordpress网站时,我们可能需要加载引入css样式表或 JavaScript 文件。但是,请记住,在 WordPress 站点中,同时激活的不只有你的主题,还会有许多其他插件。想要他们和谐地一起工作,主题和插件都需要使用标准的WordPress方法加载js脚本和css样式表,这可以确保网站保持高效运行且不存在兼容问题。以下是青锋建站给大家分享的wordpress制作网站时如何加载引入js和css文件。 

wp加载样式文件原理过程

  向 WordPress 添加脚本和样式是一个相当简单的过程。青锋建站采取的方法是首先创建一个将所有脚本和样式排入队列的函数,并加入到插入队列的钩子。在排队脚本或样式表时,WordPress 会创建一个句柄和路径来查找文件及其可能具有的任何依赖项(如 jQuery),然后调用相应的钩子来添加自定义 CSS 和 JS 文件。

wordpress加载CSS样式表

  我们的 CSS 样式表用于自定义主题的外观,样式表也是存储主题元信息的文件。因此, 每个主题都需要 style.css  文件 。我们应该 wp_enqueue_style 加载样式表,而不是直接把他们添加到 header.php文件中。加载主样式表时,我们可以在 functions.php 中将其插入队列。
插入 style.css 文件
  wp_enqueue_style( 'style', get_stylesheet_uri() );wordpress将查找名为 “style.css” 的样式表并加载它。
样式排队函数
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
我们可以包含以下参数:
$handle 样式表名称。
$src 样式文件所在的位置,其余参数是可选的。
$deps 指的是此样式表是否依赖于另一个样式表。如果设置了此项,则除非首先加载其依赖的样式表,否则不会加载此样式表。
$ver:版本号。
$media:可以指定要加载此样式表的媒体类型,例如 ‘all’, ‘screen’, ‘print’ 或 ‘handheld’。
因此,如果我们需要加载主题根目录中名为“CSS”的文件夹中的名为“slider.css”的样式表,可以使用如下代码:
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

wordpress加载JavaScript 脚本

  加载 JavaScript 脚本时,我们应该使用 wp_enqueue_script 函数。这样做可以确保脚本能够按照正确的加载,并在浏览器中缓存合适的版本,除此之外,我们还可以使用条件函数在 WordPress 中按需就在脚本。
wp_enqueue_script函数的基本使用方法如下:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
$handle:脚本的名称。
$src:脚本文件所在的位置。
$deps:依赖的脚本数组,例如 jQuery。
$ver:脚本的版本号。
$in_footer:是一个布尔数(true / false),它允许我们将脚本放在 HTML 文档的页脚中,而不是放在 <head> 中,这样它就不会延迟加载 DOM 树。
该脚本的真是工作代码如下:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
合并加载
  为了便于维护,最好将所有排队脚本和样式的操作合并到一个函数中,然后使用wp_enqueue_scripts函数来调用它们 ,如下所示:
function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
  以上就是青锋建站给大家分享的wordpress制作网站时如何加载引入js和css文件。青锋建站承接网站建设服务,包括织梦建站,phpcms建站,wordpress建站,CMS系统开发,SEO网站优化,网络营销推广,企业邮箱,400电话。  

转载请注明来源网址:青锋建站-http://www.sjzphp.com/cmsxitong/wordpressxt/wp_enqueue_script_1396.html

地方分站

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有