将多个 css 添加到 Wordpress header.php

Question

我有几个 css 文件需要链接到滑块、owl carousel 插件等的主 PHP 文件。

搜索后，我发现了如何在我的主题中添加多个 css：

1) 使用wp_register_style 2）使用wp_enqueue_style

我无法弄清楚它们之间的区别。我也想知道怎么用。

这是我将 HTML 主题转换为 Wordpress 之前的样式链接：

<link rel="stylesheet" type="text/css" 
href="stylecss/bootstrap.min.rtl.css.css">
<link rel="stylesheet" type="text/css" href="stylecss/bootstrap-3.2.rtl.css">
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="stylecss/style.css">
<link rel="stylesheet" type="text/css" href="font/stylesheet.css">

这是我尝试链接我的 css 文件的方式：

<!-- adding bootstrap style sheet -->

<?php wp_register_style('bootstrap-style1',get_template_directory_uri() . '/stylecss/bootstrap.min.rtl.css.css',array(),'null', 'all', );?>

<?php wp_register_style('bootstrap-style2',get_template_directory_uri() . '/stylecss/bootstrap-3.2.rtl.css',array(),'null', 'all', );
?>

<!-- End of bootstrap style links -->
<!-- adding fonts style sheet -->

<?php wp_register_style('font-awesome',get_template_directory_uri() . 'fa/css/font-awesome.min.css',array(),'null', 'all', );
?>
<?php wp_register_style('fonts',get_template_directory_uri() . 'font/stylesheet.css',array(),'null', 'all', );
?>

<!-- End of fonts style links -->

将此代码添加到function.php和header.php有什么区别？我读了here，我们可以在 header.php 和 function.php 中添加。

Answer 1

您可以通过两种方式添加 css，首先您必须上传活动主题 css 目录中的所有文件，然后您可以wp_enqueue_style 或将以下代码复制粘贴到活动主题 header.php 文件中。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap.min.rtl.css.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/bootstrap-3.2.rtl.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/fa/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/owl-carousel/owl.theme.css">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<link rel="stylesheet" type="text/css" href="font/stylesheet.css">

对于您的第二个问题，您可以参考此url。

Answer 2

wp_enqueue_* 和各自的 wp_register_* 函数之间的主要区别在于，第一个将脚本/样式添加到队列中，第二个准备要添加的脚本/样式。 更多的： https://wordpress.stackexchange.com/questions/124354/why-wp-register-style-is-important-while-im-using-a-complete-wp-enqueue-style

Answer 3

这是在 wordpress 中包含 css 文件的标准形式之一。

我把主题放在function.php中 虽然我找不到function.php和header.php添加主题有什么区别，但差别不大，只是在header.php中添加主题不是更灵活，可以缓存更快。

我同时使用方式一和方式二

wp_register_style('bootstrap-style1',get_template_directory_uri() . '/stylecss/bootstrap.min.rtl.css.css',array(),'null', 'all' );

wp_enqueue_style('bootstrap-style1');

如果您想了解更多关于这两种方式之间差异的信息，可以使用 link，正如 Raunak Gupta 在他的回答中所说的那样。