创建主题时，您可能需要创建其他样式表或JavaScript文件。 但是，请记住，WordPress网站不会仅仅使您的主题成为活动，它也将使用许多不同的插件。 所以一切工作和谐，重要的是主题和插件使用标准的WordPress方法加载脚本和样式表。 这将确保网站保持高效，并且没有不兼容的问题。
向WordPress添加脚本和样式是一个相当简单的过程。 本质上，您将创建一个将排列所有脚本和样式的函数。 当插入脚本或样式表时，WordPress会创建一个句柄和路径来查找您的文件及其可能具有的任何依赖关系（如jQuery），然后您将使用一个将插入脚本和样式表的钩子。
## 启动脚本和样式
为主题添加脚本和样式的正确方法是将它们排入functions.php文件。 所有主题都需要style.css文件，但可能需要添加其他文件来扩展主题的功能。
>[warning] 提示：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本身使用的脚本。 其中一些列在下表中：
|脚本名称|处理|需要依赖*|
|---|---|---|
|Image Cropper| Image cropper (not used in core, see jcrop)||
|Jcrop |jcrop||
|SWFObject| swfobject||
|SWFUpload| swfupload||
|SWFUpload Degrade |swfupload-degrade||
|SWFUpload Queue |swfupload-queue||
|SWFUpload Handlers |swfupload-handlers||
|jQuery |jquery |json2 (for AJAX calls)|
|jQuery Form| jquery-form |jquery|
|jQuery Color |jquery-color |jquery|
|jQuery Masonry| jquery-masonry |jquery|
|jQuery UI Core |jquery-ui-core |jquery|
|jQuery UI Widget |jquery-ui-widget |jquery|
|jQuery UI Mouse |jquery-ui-mouse| jquery|
|jQuery UI Accordion |jquery-ui-accordion |jquery|
|jQuery UI Autocomplete |jquery-ui-autocomplete |jquery|
|jQuery UI Slider |jquery-ui-slider |jquery|
|jQuery UI Progressbar| jquery-ui-progressbar |jquery|
|jQuery UI Tabs |jquery-ui-tabs |jquery|
|jQuery UI Sortable |jquery-ui-sortable |jquery|
|jQuery UI Draggable |jquery-ui-draggable| jquery|
|jQuery UI Droppable |jquery-ui-droppable| jquery|
|jQuery UI Selectable |jquery-ui-selectable |jquery|
|jQuery UI Position |jquery-ui-position |jquery|
|jQuery UI Datepicker |jquery-ui-datepicker| jquery|
|jQuery UI Tooltips| jquery-ui-tooltip |jquery|
|jQuery UI Resizable |jquery-ui-resizable |jquery|
|jQuery UI Dialog |jquery-ui-dialog |jquery|
|jQuery UI Button |jquery-ui-button |jquery|
|jQuery UI Effects |jquery-effects-core| jquery|
|jQuery UI Effects – Blind |jquery-effects-blind| jquery-effects-core|
|jQuery UI Effects – Bounce |jquery-effects-bounce |jquery-effects-core|
|jQuery UI Effects – Clip |jquery-effects-clip |jquery-effects-core|
|jQuery UI Effects – Drop |jquery-effects-drop |jquery-effects-core|
|jQuery UI Effects – Explode |jquery-effects-explode |jquery-effects-core|
|jQuery UI Effects – Fade |jquery-effects-fade| jquery-effects-core|
|jQuery UI Effects – Fold |jquery-effects-fold |jquery-effects-core|
|jQuery UI Effects – Highlight |jquery-effects-highlight |jquery-effects-core|
|jQuery UI Effects – Pulsate |jquery-effects-pulsate |jquery-effects-core|
|jQuery UI Effects – Scale |jquery-effects-scale |jquery-effects-core|
|jQuery UI Effects – Shake |jquery-effects-shake |jquery-effects-core|
|jQuery UI Effects – Slide |jquery-effects-slide |jquery-effects-core|
|jQuery UI Effects – Transfer |jquery-effects-transfer| jquery-effects-core|
|MediaElement.js (WP 3.6+) |wp-mediaelement |jquery|
|jQuery Schedule |schedule |jquery|
|jQuery Suggest |suggest|jquery|
|ThickBox |thickbox||
|jQuery HoverIntent |hoverIntent| jquery|
|jQuery Hotkeys| jquery-hotkeys |jquery|
|Simple AJAX Code-Kit |sack||
|QuickTags| quicktags||
|Iris (Colour picker) |iris |jquery|
|Farbtastic (deprecated) |farbtastic| jquery|
|ColorPicker (deprecated) |colorpicker |jquery|
|Tiny MCE| tiny_mce||
|Autosave |autosave||
|WordPress AJAX Response |wp-ajax-response||
|List Manipulation |wp-lists||
|WP Common |common||
|WP Editor |editorremov||
|WP Editor Functions |editor-functions||
|AJAX Cat |ajaxcat||
|Admin Categories |admin-categories||
|Admin Tags |admin-tags||
|Admin custom fields |admin-custom-fields||
|Password Strength Meter |password-strength-meter||
|Admin Comments |admin-comments||
|Admin Users |admin-users||
|Admin Forms |admin-forms||
|XFN |xfn||
|Upload |upload||
|PostBox |postbox||
|Slug |slug||
|Post |post||
|Page |page||
|Link |link||
|Comment |comment||
|Threaded Comments |comment-reply||
|Admin Gallery |admin-gallery||
|Media Upload |media-upload||
|Admin widgets |admin-widgets||
|Word Count |word-count||
|Theme Preview |theme-preview||
|JSON for JS |json2||
|Plupload Core |plupload||
|Plupload All Runtimes |plupload-all||
|Plupload HTML4 |plupload-html4||
|Plupload HTML5| plupload-html5||
|Plupload Flash |plupload-flash||
|Plupload Silverlight |plupload-silverlight||
|Underscore js |underscore||
|Backbone js |backbone||
### 从核心移除
|脚本名称|句柄|已删除版本|替换为|
|---|---|---|---|
|Scriptaculous Root| scriptaculous-root| WP 3.5| Google Version|
|Scriptaculous Builder| scriptaculous-builder| WP 3.5| Google Version|
|Scriptaculous Drag & Drop| scriptaculous-dragdrop| WP 3.5| Google Version|
|Scriptaculous Effects| scriptaculous-effects| WP 3.5| Google Version|
|Scriptaculous Slider| scriptaculous-slider| WP 3.5| Google Version|
|Scriptaculous Sound |scriptaculous-sound| WP 3.5| Google Version|
|Scriptaculous Controls |scriptaculous-controls |WP 3.5 |Google Version|
|Scriptaculous |scriptaculous| WP 3.5| Google Version|
|Prototype Framework |prototype| WP 3.5 |Google Version|
名单还远远没有完成。 您可以在wp-includes/script-loader.php中找到包含文件的完整列表。
- 简介
- 主题开发
- WordPress许可证
- 什么是主题
- 开发环境
- 主题开发示例
- 主题基础
- 模板文件
- 主样式表(style.css)
- 文章类型
- 规划主题文件
- 模板层级
- 模板标签
- 循环
- 主题函数
- 连接主题文件和目录
- 使用CSS和JavaScript
- 条件标签
- 类别，标签和自定义分类
- 模板文件
- 内容模板文件
- 页面模板文件
- 附件模板文件
- 自定义内容类型
- 部分和其他模板文件
- 评论模板
- 分类模板
- 404页面
- 主题功能
- 核心支持的功能
- 管理菜单
- 自定义Headers
- 自定义Logo
- 文章格式
- 置顶文章
- Sidebars
- Widgets
- 导航菜单
- 分页
- 媒体
- Audio
- Images
- Galleries
- Video
- 精选图片和缩略图
- 国际化
- 本地化
- 辅助功能
- 主题选项 – 自定义API
- 定制对象
- 改进用户体验的工具
- 定制JavaScript API
- JavaScript / Underscore.js渲染的自定义控件
- 高级用法
- 主题安全
- 数据消毒/逃避
- 数据验证
- 使用随机数
- 常见漏洞
- 高级主题
- 子主题
- UI最佳实践
- JavaScript最佳做法
- 主题单元测试
- 验证你的主题
- Plugin API Hooks
- 发布你的主题
- 所需的主题文件
- 测试
- 主题评论指南
- 写文档
- 提交你的主题到WordPress.org
- 参考文献
- 模板标签列表
- 条件标签列表
- 编码标准
- HTML编码标准
- CSS编码标准
- JavaScript编码标准
- PHP编码标准
- 插件开发
- 插件开发简介
- 什么是插件
- 插件基础
- 头部要求
- 包括软件许可证
- 启用 / 停用 Hooks
- 卸载方法
- 最佳做法
- 插件安全
- 检查用户功能
- 数据验证
- 保护输入
- 保护输出
- 随机数
- Hooks
- Actions
- Filters
- 自定义Hooks
- 高级主题
- 管理菜单
- 顶级菜单
- 子菜单
- 短代码
- 基本短码
- 封闭短码
- 带参数的短代码
- TinyMCE增强型短码
- 设置
- 设置API
- 使用设置API
- 选项API
- 自定义设置页面
- 元数据
- 管理帖子元数据
- 自定义元数据
- 渲染元数据
- 自定义文章类型
- 注册自定义文章类型
- 使用自定义文章类型
- 分类
- 使用自定义分类
- 在WP 4.2+中使用“split术语”
- 用户
- 创建和管理用户
- 使用用户元数据
- 角色和功能
- HTTP API
- JavaScript
- jQuery
- Ajax
- 服务器端PHP和入队
- Heartbeat API
- 概要
- 计划任务
- 了解WP-Cron计划
- 安排WP-Cron 事件
- 将WP-Cron挂接到系统任务计划程序中
- WP-Cron简单测试
- 国际化
- 本地化
- 如何国际化您的插件
- 国际化安全
- WordPress.org
- 详细插件指南
- 规划您的插件
- 如何使用Subversion
- 插件开发者常见问题
- 开发工具
- Debug Bar 和附加组件
- 辅助插件
- REST API手册
- 资源
- 文章
- 文章修订
- 文章类型
- 文章状态
- 类别
- 标签
- 页面
- 评论
- 分类
- 媒体
- 用户
- 设置
- 使用REST API
- 全局参数
- 分页
- 链接和嵌入
- 发现
- 认证
- 经常问的问题
- 骨干JavaScript客户端
- 客户端库
- 扩展REST API
- 添加自定义端点
- 自定义内容类型
- 修改回应
- 模式
- 词汇表
- 路由和端点
- 控制器类