如何为不同页面加载不同的css文件

时间:2018-01-08 作者:unreleased

我有几个不同的页面。它们中的每一个都有不同的css链接。这些页面的head元素中的所有项目都是相同的,而不是css链接。我需要把这些头元素header.php 这样我就可以包括头部使用get_header().

那么,如何为不同的页面加载不同的css文件呢?我有大约20个不同的页面,所以在条件检查后加载文件对我来说有点混乱<有什么比this?
如果可能,建议我使用自定义插件解决此问题?

page 1:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/one.css" />
     .......
 </head>
page 2:

<html lang="en">
<head>
     <link rel="stylesheet" href="css/two.css" />
     .......
 </head>

3 个回复
SO网友:Andrew

您可以使用conditionals 在函数内部,将样式排队。

function wpdocs_theme_name_scripts() {
    wp_enqueue_style( \'global\', get_stylesheet_uri() );

    if ( is_page(5) ) {
      wp_enqueue_style( \'page-five\', get_stylesheet_uri() . \'/page-five-styles.css\' );
    }
}
add_action( \'wp_enqueue_scripts\', \'wpdocs_theme_name_scripts\' );
如果您想对页面的标记和加载的CSS文件进行更多控制,可以使用WordPress的模板层次结构,创建页面模板或其他更具体的模板,如page-5.php. 使命感wp_enqueue_scripts 从这些模板文件中,仅加载这些页面的资产。

SO网友:Liam Stewart

如果希望在模板中执行此操作,可以执行以下操作。

您可以在此处了解有关is\\U页面功能的更多信息:https://developer.wordpress.org/reference/functions/is_page/

<html lang="en">
<head>
     <?php if ( is_page(1) ): //Change this number to id of page ?> 
     <link rel="stylesheet" href="css/one.css" />
     <?php endif; if ( is_page(2) ): //Change this number to id of page ?>
     <link rel="stylesheet" href="css/two.css" />
     <?php endif; ?>
 .......
</head>

SO网友:Dharmishtha Patel
<html lang="en">
    <head>
<?php global $post;
if( $post->ID == 346) { ?>
       <link rel="stylesheet" href="css/one.css" />
<?php } ?>
    elseif ( $post->ID == 342){ ?> 
         <link rel="stylesheet" href="css/two.css" />
         <?php } else{ //Change this number to id of page ?>
         <link rel="stylesheet" href="css/three.css" />
         <?php } ?>
     .......
    </head>
结束

相关推荐

Virtual Pages plugins

我很难让插件正常工作Virtual Pages (WordPress插件可简化虚拟页面的创建)我确实进行了编辑,根据查询创建了一个循环。add_action( \'gm_virtual_pages\', function( $controller ) { /* Creating virtuals pages for companies */ $args = array( \'post_type\' => array(\'companies\',), \'post_status\'