WordPress主题开发 — 使用CSS和JavaScript

创建主题时，您可能需要创建其他样式表或JavaScript文件。 但是，请记住，WordPress网站不会仅仅使您的主题成为活动，它也将使用许多不同的插件。 所以一切工作和谐，重要的是主题和插件使用标准的WordPress方法加载脚本和样式表。 这将确保网站保持高效，并且没有不兼容的问题。

向WordPress添加脚本和样式是一个相当简单的过程。 本质上，您将创建一个将排列所有脚本和样式的函数。 当插入脚本或样式表时，WordPress会创建一个句柄和路径来查找您的文件及其可能具有的任何依赖关系（如jQuery），然后您将使用一个将插入脚本和样式表的钩子。

启动脚本和样式

为主题添加脚本和样式的正确方法是将它们排入functions.php文件。 所有主题都需要style.css文件，但可能需要添加其他文件来扩展主题的功能。

提示：WordPress包含许多JavaScript文件作为软件包的一部分，包括常用的库，如jQuery。 在添加您自己的JavaScript之前，请检查是否可以使用附带的库。

基本情况是：

使用wp_enqueue_script()或wp_enqueue_style()来排队脚本或样式

样式

您的CSS样式表用于自定义您的主题的演示文稿。 样式表也是存储有关您的主题信息的文件。 因此，每个主题都需要style.css文件。

而是将样式表加载到header.php文件中，您应该使用wp_enqueue_style加载样式表。 为了加载主体样式表，可以在functions.php中排队

排入style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

这将查找名为“style”的样式表并加载它。

排列风格的基本功能是：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

您可以包括以下参数：

• $handle只是样式表的名称。
• $src是它所在的位置。 其余的参数是可选的。
• $deps是指这个样式表是否依赖于另一个样式表。 如果设置了此样式表，则不会加载此样式表，除非首先加载其依赖样式表。
• $ver设置版本号。
• $media可以指定加载此样式表的媒体类型，例如“全部”，“屏幕”，“打印”或“掌上电脑”。

因此，如果要在主题根目录中的名为“CSS”的文件夹中加载名为“slider.css”的样式表，你会使用：

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

脚本

应该使用wp_enqueue_script加载主题所需的任何其他JavaScript文件。 这样可确保适当的加载和缓存，并允许使用条件标签来定位特定的页面。 这些是可选的。

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文档的页脚中，而不是标题中，以免延迟加载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' );
}

如果用户启用了注释，并且我们在一个帖子页面上，则会加载评论回复脚本。 否则，不会。

组合入队函数

最好将所有入队的脚本和样式组合成一个单一的函数，然后使用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本身使用的脚本。 其中一些列在下表中：

从核心移除

名单还远远没有完成。 您可以在wp-includes/script-loader.php中找到包含文件的完整列表。