WordPress主题开发教程 — 包含 CSS 和 JavaScript 文件
2024/11/06 07:10:31 懒猫导航网 已浏览4次创建主题时，我们可能需要创建其他样式表或JavaScript文件。但是，请记住，在WordPress站点中，同时激活的不只有你的主题，还会有许多其他插件。想要他们和谐地一起工作，主题和插件都需要使用标准的WordPress方法加载脚本和样式表，这可以确保网站保持高效运行且不存在兼容问题。
向WordPress添加脚本和样式是一个相当简单的过程。从本质上讲，我们将创建一个将所有脚本和样式排入队列的函数。在排队脚本或样式表时，WordPress会创建一个句柄和路径来查找文件及其可能具有的任何依赖项（如jQuery），然后我们使用一个将插入脚本和样式表插入队列的钩子来添加自定义CSS和JS文件。
插入脚本和样式
为主题添加脚本和样式的正确方法是将它们添加到functions.php文件中。style.css是所有主题都需要的文件，除此之外，我们还可能需要添加其他文件以扩展主题的功能。
WordPress包含许多JavaScript文件作为软件包的一部分，其中包括一些常用的库，如jQuery。在添加自己的JavaScript之前，请检查您是否可以使用包含的库。
插入脚本和样式的基础是：
使用wp_enqueue_script()将JS文件插入队列
使用wp_enqueue_style()将CSS文件插入队列。
CSS样式表
我们的CSS样式表用于自定义主题的外观，样式表也是存储主题元信息的文件。因此，每个主题都需要style.css文件。
我们应该wp_enqueue_style加载样式表，而不是直接把他们添加到header.php文件中。加载主样式表时，我们可以在functions.php中将其插入队列。
插入style.css文件
wp_enqueue_style('style',get_stylesheet_uri());
上面的代码将查找名为“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');
JavaScript脚本
加载JavaScript脚本时，我们应该使用wp_enqueue_script函数。这样做可以确保脚本能够按照正确的加载，并在浏览器中缓存合适的版本，除此之外，我们还可以使用条件函数在WordPress中按需就在脚本。
wp_enqueue_script使用类似的语法wp_enqueue_style。该函数的基本使用方法如下：
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);
评论回复脚本
WordPress评论默认有很多功能，包括嵌套评论和增强的评论表单。为了使评论正常工作，我们需要加载一些JavaScript。但是，由于需要在这个JavaScript脚本中定义一些选项，因此我们应将此脚本添加到使用评论的每个主题中。
包含评论回复脚本的正确方法是使用条件标签来检查是否存在某些条件，以便不会不必要地加载脚本。例如，我们需要is_singular让该脚本只在单页面中加载，并且只在用户“启用嵌套注释”时加载。所以，实际上加载评论脚本的代码看起来像下面这样：
if(is_singular()&&comments_open()&&get_option('thread_comments')){
wp_enqueue_script('comment-reply');
}
如果用户启用了评论，并且我们在文章页面上，WordPress将加载评论回复脚本，否则就不会加载。
合并排队函数
为了便于维护，最好将所有排队脚本和样式的操作合并到一个函数中，然后使用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);
if(is_singular()&&comments_open()&&get_option('thread_comments')){
wp_enqueue_script('comment-reply');
}
}
add_action('wp_enqueue_scripts','add_theme_scripts');
WordPress包含的默认脚本
默认情况下，WordPress包含了Web开发人员常用的许多流行脚本，以及WordPress本身使用的脚本。
为了能保证内容更新的及时性，这部分不再翻译，有需要的朋友可以到官方主题开发手册的相关章节中了解。
更多技术教程，请关注懒猫导航网