在WordPress的header.php中添加多个CSS

Question

在WordPress的header.php中添加多个CSS

phpjqueryhtmlcsswordpress

3

我有几个CSS文件需要链接到主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 有什么区别？我在这里读到说可以在header.php和function.php中都添加。

- mkafiyan

3个回答

1

主要区别在于wp_enqueue_*和相应的wp_register_*函数之间，前者将脚本/样式添加到队列中，而后者准备将脚本/样式添加到队列中。更多信息请参考： https://wordpress.stackexchange.com/questions/124354/why-wp-register-style-is-important-while-im-using-a-complete-wp-enqueue-style

- Jaroslaw Jankowiak

0

这是在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');

如果你想了解更多关于我所问的这两种方式之间的区别，你可以使用Raunak Gupta在他的回答中提到的link。

- mkafiyan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Raunak Gupta · Accepted Answer

您可以通过两种方式添加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">

关于你的第二个问题，你可以参考这个网址。