wordpress给一个页面增加带css 和 js 的html wordpress引入css

zhangxinhe · 发表于 2024-8-8 20:02:52

倡萌之前分享过《正确加载 Javascript 和 CSS 到 WordPress》，今天分享一篇详细解说正确加载 CSS 的文章。

原文：http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way–cms-20402
编译：倡萌@WordPress大学

没有CSS，你只能很有限地风格化你的网页。而如果没有在WordPress包含适当的 CSS，将让你的主题用户很难自定义主题的样式。

在本教程中，我们将看看以正确的方式来排队加载 CSS 到 WordPress。

WordPress 是目前世界上最流行的内容管理系统，它有上千万的用户。这就是为什么，为了制作一个成功的主题，我们需要思考每一个WordPress用户，并尝试通过本教程来正确地加载CSS文件到我们的主题中。

文章目录

在 WordPress 中加载 CSS 的错误方式

多年来，WordPress 已经发展了其代码，以便使它越来越灵活，排队加载 CSS和JavaScript 就是在朝这个方向移动。我们的坏习惯已经保持一段时间了，尽管我们知道 WordPress 介绍了排队加载 CSS 和 JavaScript 的方法，我们还是继续添加这类代码到主题的 header.php 文件：

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

或者我们添加下面的代码到主题的 functions.php ，而且认为这个方法更好些：

<?php
function add_stylesheet_to_head() {
echo "<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>";
}
add_action( 'wp_head', 'add_stylesheet_to_head' );
?>

在上面的情况下，WordPress 不能确定是否在在页面加载了 CSS文件。这可能是一个可怕的错误！

如果另一个插件使用相同的CSS文件，就无法检查CSS文件是否已经被包含在页面中。然后插件第二次加载同一个文件，造成重复的代码。

幸运的是，WordPress有一个非常简单的解决方案：注册和排队样式表。

在 WordPress 中加载 CSS 的正确方式

正如我们前面所说，WordPress已经成长了很多，多年来，我们不得不思考在世界上每一个WordPress用户。

除了这些，我们还必须考虑成千上万的WordPress插件。但是，不要让这些大的数字吓到你：WordPress 有非常有用的函数，来为我们正确地加载CSS样式到WordPress。

让我们一起来看看。

注册 CSS 文件

如果你要加载CSS样式表，你首先应该使用 wp_register_style() 函数进行注册：

<?php
wp_register_style( $handle, $src, $deps, $ver, $media );
?>

$handle（字符串，必需）是你的样式表唯一名称。其他函数将使用这个“handle”来排队并打印样式表。
$src（字符串，必需）指的是样式表的URL。您可以使用函数，如 get_template_directory_uri() 来获取主题目录中的样式文件。永远不要去想硬编码了！
$deps （数组，可选）处理相关样式的名称。如果丢失某些其他样式文件将导致你的样式表将无法正常工作，你可以使用该参数设置“依赖关系”。
$ver （字符串或布尔型，可选）版本号。你可以使用你的主题的版本号或任何一个你想要的。如果您不希望使用一个版本号，将其设置为null。默认为false，这使得WordPress的添加自己的版本号。
$media （字符串，可选）是指CSS的媒体类型，比如“screen”或“handheld”或“print”。如果你不知道是否需要使用这个，那就不使用它。默认为“all”。

以下是 wp_register_style() 函数的一个例子：

<?php
// wp_register_style() 示例
wp_register_style(
'my-bootstrap-extension', // 名称
get_template_directory_uri() . '/css/my-bootstrap-extension.css', // 样式表的路径
array( 'bootstrap-main' ), // 依存的其他样式表
'1.2', // 版本号
'screen', // CSS 媒体类型
);
?>

在WordPress中，注册样式是“可选的”。如果你的样式不会被其他插件使用，或者你不打算使用任何代码来再次加载它，你可以自由地排队样式而不需要注册它。继续看看它是如何实现的。

排队 CSS 文件

注册我们的风格文件后，我们需要“排队”它，使其准备好在我们主题的<head>部分加载。

我们使用 wp_enqueue_style() 函数来实现：

<?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
?>

该函数的参数和上面的 wp_register_style() 函数是一样的，就不再重复。

但是，正如我们所说的， wp_register_style() 函数是不强制使用的，我要告诉你，你可以用两种不同的方式使用 wp_enqueue_style()：

<?php
// 如果我们之前已经注册过样式
wp_enqueue_style( 'my-bootstrap-extension' );
// 如果我们之前没有注册，我们不得不设置 $src 参数！
wp_enqueue_style(
'my-bootstrap-extension',
get_template_directory_uri() . '/css/my-bootstrap-extension.css',
array( 'bootstrap-main' ),
null, // 举例不适用版本号
// ...并且没有指定CSS媒体类型
);
?>

请记住，如果一个插件将要用到你的样式表，或者你打算将在你的主题的不同地方进行加载，你绝对应该先注册。

加载样式到我们的网站

我们不能在主题中随便找个地方使用 wp_enqueue_style() 函数 – 我们需要使用“动作”钩子。还有我们可以使用各种用途的三个动作钩子：

wp_enqueue_scripts 用来在网站前台加载脚本和CSS
admin_enqueue_scripts 用来在后台加载脚本和CSS
login_enqueue_scripts 用来在WP登录页面加载脚本和CSS

以下是这些钩子的示例：

<?php
// 在网站前台加载css
function mytheme_enqueue_style() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );
// 在后台加载css
function mytheme_enqueue_options_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/admin.css' );
}
add_action( 'admin_enqueue_scripts', 'mytheme_enqueue_options_style' );
// 在登录页面加载css
function mytheme_enqueue_login_style() {
wp_enqueue_style( 'mytheme-options-style', get_template_directory_uri() . '/css/login.css' );
}
add_action( 'login_enqueue_scripts', 'mytheme_enqueue_login_style' );
?>

WordPress 有一个重要的公告：“使用 wp_enqueue_scripts() ，不要用 wp_print_styles() ”，它会告诉你一个与 WordPress3.3版本可能的不兼容错误。

一些额外的函数

WordPress 有一些关于 CSS 非常有用的函数：他们允许我们打印内嵌样式，查看样式文件的排队状态，添加元数据以及注销样式。

让我们一起来看看。

添加动态内联样式：wp_add_inline_style()

如果你的主题有选项可自定义主题的样式，你可以使用 wp_add_inline_style() 函数来打印内置的样式：

<?php
function mytheme_custom_styles() {
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom-style.css' );
$bold_headlines = get_theme_mod( 'headline-font-weight' ); // 比方说，它的值是粗体“bold”
$custom_inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';
wp_add_inline_style( 'custom-style', $custom_inline_style );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_styles' );
?>

方便快捷。但请记住：你必须使用与后面要添加的内联样式样式表相同的hadle名称。

检查样式表的排队状态：wp_style_is()

在某些情况下，我们可能需要一个风格的状态信息：是否注册，是否入列，它是打印或等待打印？您可以使用 wp_style_is() 函数来确定它：

<?php
/*
* wp_style_is( $handle, $state );
* $handle - name of the stylesheet
* $state - state of the stylesheet: 'registered', 'enqueued', 'done' or 'to_do'. default: 'enqueued'
*/
// wp_style_is() 示例
function bootstrap_styles() {
if( wp_style_is( 'bootstrap-main' ) {
// 排队 my-custom-bootstrap-theme 如果 bootstrap-main 已经排队
wp_enqueue_style( 'my-custom-bootstrap-theme', 'http://url.of/the/custom-theme.css' );
}
}
add_action( 'wp_enqueue_scripts', 'bootstrap_styles' );
?>

添加元数据到样式表：wp_style_add_data()

wp_style_add_data() 是一个非常棒的函数，它可以让你添加元数据到你的样式中，包括条件注释、RTL的支持和更多！

来看看吧：

<?php
/*
* wp_style_add_data( $handle, $key, $value );
* Possible values for $key and $value:
* 'conditional' string Comments for IE 6, lte IE 7 etc.
* 'rtl' bool|string To declare an RTL stylesheet.
* 'suffix' string Optional suffix, used in combination with RTL.
* 'alt' bool For rel="alternate stylesheet".
* 'title' string For preferred/alternate stylesheets.
*/
// wp_style_add_data() 示例
function mytheme_extra_styles() {
wp_enqueue_style( 'mytheme-ie', get_template_directory_uri() . '/css/ie.css' );
wp_style_add_data( 'mytheme-ie', 'conditional', 'lt IE 9' );
/*
* alternate usage:
* $GLOBALS['wp_styles']->add_data( 'mytheme-ie', 'conditional', 'lte IE 9' );
* wp_style_add_data() is cleaner, though.
*/
}
add_action( 'wp_enqueue_scripts', 'mytheme_ie_style' );
?>

真棒，不是吗？

注销样式文件：wp_deregister_style()

如果你需要“注销”样式表（为了使用修改后的版本，例如重新注册），你可以用 wp_deregister_style() 实现。

让我们看一个例子：

<?php
function mytheme_load_modified_bootstrap() {
// 如果 bootstrap-main 之前已注册...
if( wp_script_is( 'bootstrap-main', 'registered' ) ) {
// ...取消注册...
wp_deregister_style( 'bootstrap-main' );
// ...取而代之，注册我们自定义的 modified bootstrap-main.css...
wp_register_style( 'bootstrap-main', get_template_directory_uri() . '/css/bootstrap-main-modified.css' );
// ...然后排队它
wp_enqueue_style( 'bootstrap-main' );
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_load_modified_bootstrap' );
?>

虽然它不是必须的，但是通常你注销了一个样式，就应该重新注册一个样式，否则可能会打乱其他的一些东西。

还有一个类似的函数叫做 wp_dequeue_style() ，正如它的名字所暗示的一样，用来取消已经排队的样式表。

结语

恭喜你，现在你知道一切关于在 WordPress 正确加载 CSS 的方法！希望你喜欢本教程。

你有你想分享任何方法或经验？请在下面评论，并与我们分享您的知识！如果你喜欢这篇文章，不要忘记与你的朋友分享！

		自动登录	找回密码
密码			立即注册