使用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本身使用的脚本。 其中一些列在下表中：

脚本名称	处理	需要依赖*
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中找到包含文件的完整列表。

Tags WordPress主题开发