J'ai deux fichiers différents pour l'en-tête dans mon thème. Ce sont header.php
et header-full.php
.
Comment puis-je charger différents CSS dans différents en-têtes?
Je mets en file d'attente mes fichiers CSS dans function.php
comme ceci:
Style de file d'attente en fonction d'un nom de fichier de modèle:
if('header.php' == basename( get_page_template() ) { // check the template file name
// enqueue header.php style here
}
if('header-full.php' == basename( get_page_template() ) { // check the template file name
// enqueue header-full.php style here
}
wp_enqueue_style
enregistre déjà un style, vous n'avez donc pas besoin de l'enregistrer avant de le mettre en file d'attente, sauf dans des cas très particuliers. Voir wp_enqueue_style .
Un moyen simple de le faire est d'utiliser une fonction php appelée "basename".
Si vous avez 2 en-têtes headerone.php, headertwo.php vous pouvez charger différentes ressources en fonction du nom de la page que vous consultez.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<?php if(basename($_SERVER['PHP_SELF']) == 'headerone.php'){ ?>
<link href="/includes/headerone.css" rel="stylesheet" media="all"/>
<?php }
elseif(basename($_SERVER['PHP_SELF']) == 'headertwo.php'){
?>
<link href="/includes/headertwo.css" rel="stylesheet" media="all"/>
<?php } ?>
</head>
<body>
Si vous souhaitez conserver vos fichiers en file d'attente (probablement une bonne idée comme indiqué ici ), alors - oui - vous pouvez ajouter des conditions dans votre functions.php telles que:
if(some conditional) {
// enqueue header.php style here
}
if(some other conditional) {
// enqueue header-full.php style here
}
Ou, vous n'avez pas du tout les mettre en file d'attente. Vous pouvez simplement les référencer dans vos deux fichiers d'en-tête. Eg.in header.php put:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/bootstrap/css/custom.css" type="text/css" media="screen" />
et dans header-full.php put:
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/bootstrap/css/full-header.css" type="text/css" media="screen" />