web-dev-qa-db-fra.com

Comment charger différents fichiers CSS pour différentes pages

J'ai plusieurs pages différentes. Chacun d'entre eux a des liens css différents. Plutôt que les liens css, tous les éléments sont identiques dans l'élément head de ces pages. Je dois décaler ces éléments de tête vers header.php afin de pouvoir inclure head à l'aide de get_header().

Alors, comment puis-je charger différents fichiers CSS pour différentes pages? J'ai environ 20 pages différentes, alors charger un fichier après la vérification de l'état est un peu compliqué pour moi.
Existe-t-il une meilleure approche que ceci ?
Si possible, suggérez-moi de résoudre ce problème en utilisant un plugin personnalisé?

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>
pluginsplugin-developmentwp-enqueue-stylewp-head
1
unreleased

Vous pouvez y parvenir en utilisant conditionals dans la fonction mettant en file d'attente vos styles.

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' );

Si vous souhaitez davantage de contrôle sur le balisage de votre page et sur les fichiers CSS que vous chargez, vous pouvez utiliser la hiérarchie des modèles de WordPress et créer un modèle de page ou quelque chose de plus spécifique, tel que page-5.php. L'appel de wp_enqueue_scripts à partir de ces fichiers de modèle charge uniquement les actifs de ces pages.

3
Andrew

Si vous souhaitez le faire dans votre modèle, vous pouvez procéder comme suit.

Vous pouvez en savoir plus sur la fonction is_page ici: 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>
1
Liam Stewart
<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>
0
Dharmishtha Patel