wp_register_style()
云策文档标注
概述
wp_register_style() 函数用于在 WordPress 中注册一个 CSS 样式表，以便后续通过 wp_enqueue_style() 进行加载。该函数是管理样式依赖和版本控制的核心工具，确保样式资源正确集成到网站中。
关键要点
- 函数签名：wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' )
- 参数说明：$handle（唯一标识符，必需）、$src（样式表 URL 或路径，必需）、$deps（依赖的样式表句柄数组，可选）、$ver（版本号，用于缓存控制，可选）、$media（媒体类型或查询，可选）
- 返回值：布尔值，表示注册是否成功
- 内部调用 wp_styles()->add() 实现注册功能
- 常见用途：在插件或主题中注册样式，结合 wp_enqueue_scripts 钩子加载
代码示例
// 在插件中注册样式表（PHP 类外部）
function wpdocs_register_plugin_styles() {
wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
wp_enqueue_style( 'my-plugin' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_register_plugin_styles' );
// 在插件中注册样式表（PHP 类内部）
class WPDocs_My_Plugin_Stylesheet {
function __construct() {
add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) );
}
public function register_plugin_styles() {
wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
wp_enqueue_style( 'my-plugin' );
}
}
new WPDocs_My_Plugin_Stylesheet();注意事项
- 使用 Google Fonts 时，若嵌入多个字体族，建议将 $ver 参数设为 null，以避免 URL 解析问题导致字体丢失（参考 Trac 工单 #49742）
- 注册后需调用 wp_enqueue_style() 或通过依赖关系自动加载样式
- 确保 $handle 唯一，避免冲突
原文内容
Registers a CSS stylesheet.
Description
See also
Parameters
$handlestringrequired-
Name of the stylesheet. Should be unique.
$srcstring|falserequired-
Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
If source is set to false, stylesheet is an alias of other stylesheets it depends on. $depsstring[]optional-
An array of registered stylesheet handles this stylesheet depends on.
Default:
array() $verstring|bool|nulloptional-
String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version.
If set to null, no version is added.Default:
false $mediastringoptional-
The media for which this stylesheet has been defined.
Default'all'. Accepts media types like'all','print'and'screen', or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.
Source
function wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' ) {
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );
return wp_styles()->add( $handle, $src, $deps, $ver, $media );
}
Skip to note 4 content
Ivan Shulev
Examples
In a Plugin (outside a PHP class)
Assumes the Plugin directory is named ‘my-plugin’.
Assumes the Plugin style sheet is named ‘plugin.css’.
/** * Registers a stylesheet. */ function wpdocs_register_plugin_styles() { wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) ); wp_enqueue_style( 'my-plugin' ); } // Register style sheet. add_action( 'wp_enqueue_scripts', 'wpdocs_register_plugin_styles' );Skip to note 5 content
Ivan Shulev
Example
In a plugin (inside a PHP class)
Assumes the Plugin class name is ‘my_plugin’.
Assumes the Plugin directory is named ‘my-plugin’.
Assumes the Plugin style sheet is named ‘plugin.css’.
class WPDocs_My_Plugin_Stylesheet { /** * Constructor. */ function __construct() { // Register stylesheet. add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles' ) ); } /** * Registers and enqueues stylesheet. */ public function register_plugin_styles() { wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) ); wp_enqueue_style( 'my-plugin' ); } } new WPDocs_My_Plugin_Stylesheet();Skip to note 6 content
crstauf
Note that Google Fonts has changed their URLs, so when embedding multiple font families only one will be loaded. The change is “fundamentally incompatible with how the rest of the world uses query variables and thus PHP itself”.
The fix is to set
nullon the$versionparameter, which prevents the URL from being parsed and the additional font families lost.Trac ticket: https://core.trac.wordpress.org/ticket/49742