WordPress中文开发手册

  1. Home
  2. Docs
  3. WordPress中文开发手册
  4. WordPress主题开发
  5. WordPress主题基础
  6. 使用CSS和JavaScript

使用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