web-dev-qa-db-fra.com

Comment gérer les CSS pour plusieurs fichiers header.php?

Donc, je construis un nouveau thème basé sur Underscores. Jusqu’à présent, j’ai réussi à amener ACF Pro à appeler différents fichiers d’en-tête à partir d’une sélection dropdwon dans la page Options, mais je suis maintenant confronté à la tâche de déterminer comment gérer au mieux les fichiers CSS pour chacun des fichiers d’en-tête personnalisés et comment. pour charger des zones de widget en fonction du fichier d’en-tête chargé.

Tout d’abord le bit css: comme le thème Underscores contient des règles de style très minimales, je pensais que ce n’était pas une mauvaise idée d’inclure des fichiers css spécifiques à l’en-tête en fonction du fichier d’en-tête appelé par ACF Pro dans les Options. page. Par exemple, je créerais un fichier d'en-tête appelé header-slim.php et dans mon fichier de fonctions, je ferais une sorte de 'si' header = en-tête-slim.php, puis je chargerais header-slim.css. De cette façon, je ne chargerais qu'un petit fichier css pour l'en-tête choisi, un fichier normal style.css, puis un fichier footer.css (par exemple, footer-full-width.css).

Si c’est une façon acceptable d’aborder le concept de disposition d’en-têtes multiples, qu’est-ce que je mettrais exactement dans mon fichier de fonctions? Un autre détail est que si aucune option de disposition d’en-tête n’est choisie, le thème exécutera la fonction get_header () normale en tant que fonction par défaut.

Passons maintenant aux widgets d’en-tête: Corrigez si je me trompe (ce qui est souvent le cas), mais si je charge le fichier header1.php et qu’il contient 3 zones de widgets, ces trois widgets apparaîtront automatiquement dans les widgets disponibles sur la page des widgets dans WP Admin, c'est ça? Bien sûr, après avoir chargé un en-tête, je devrais actualiser la page des widgets et, tant que ces zones de widgets ont été enregistrées dans mon fichier de fonctions, elles se chargeront à condition qu'un fichier d'en-tête appelle lesdits widgets, n'est-ce pas?

J'ai beaucoup fouillé ici et sur le Web en général et je n'ai encore rien trouvé qui réponde précisément à mes questions. S'il y a quelque chose ici et que je l'ai manqué, pardonnez-moi s'il vous plaît.

J'aimerais une aide spécifique pour ce que j'essaie de réaliser si cela ne vous dérange pas.

Merci beaucoup! Rayon

UPDATE: Voici quelques bits de code que vous pourrez examiner.

Voici ce que j'ai en haut de mon fichier index.php afin d’imprimer l’en-tête sélectionné dans la page des options d’ACF Pro:

<?php
$selectHeader = get_field( 'select_header_layout','option'); 
if($selectHeader == "black"){get_header('black');}
elseif($selectHeader == "gray"){get_header('gray');}
elseif($selectHeader == "red"){get_header('red');}
else {get_header();} 
?>

Et voici ce que j'ai ajouté à mon fichier functions.php - j'ai modifié le paramètre 'selected_header' en 'select_header_layout' afin qu'il corresponde à ce que j'ai dans le fichier index.php. Voici le désordre ...

function my_header_css_scripts () {
switch (get_field ('select_header_layout', 'option')) {
    case 'header-black.php':
        $appropriateHeader = 'header-black.css';
        break;
    case 'header-gray.php':
        $appropriateHeader = 'header-gray.css';
        break;
    case 'header-red.php':
        $appropriateHeader = 'header-red.css';
        break;
    default:
        $appropriateHeader = 'header-default.css';
        break;
}
wp_enqueue_style ('my_header_css_scripts', get_theme_file_uri('/wp-content/themes/rm-acf1/hdr-styles/' . $appropriateHeader)); 
}
add_action ('wp_enqueue_scripts', 'my_header_css_scripts');

Voici le code que j'ai dans mon fichier functions.php en ce moment (4 janvier 2016 à 16h30): 

function my_header_css_scripts () {
switch (get_field ( 'chosen_header', 'option' )) {
    case 'header-black.php':
        $appropriateHeader = 'header-black.css';
        break;
    case 'header-gray.php':
        $appropriateHeader = 'header-gray.css';
        break;
    case 'header-red.php':
        $appropriateHeader = 'header-red.css';
        break;
    default:
        $appropriateHeader = 'header-default.css';
        break;
}
wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );
}
add_action ('wp_enqueue_scripts', 'my_header_css_scripts');
theme-developmentcsstemplatestemplate-hierarchycustom-header
1
AlonsoF1

Ce n'est pas comme ça que vous utilisez get_theme_file_uri();

Vous devez spécifier le répertoire RELATIVE au répertoire de votre thème actif.

Ainsi, par exemple, si votre thème actuellement activé est rm-acf1, et que tous vos fichiers CSS d'en-tête personnalisés sont situés dans le sous-dossier hdr-styles.

  • Ceci est votre répertoire de thème: ./wp-content/rm-acf1/
  • Ceci est votre répertoire de styles d'en-tête: ./wp-content/rm-acf1/hdr-styles/

Ainsi, lorsque vous utilisez get_theme_file_uri(); sans paramètres, vous devez utiliser par défaut ./wp-content/rm-acf1/.

Désormais, dans votre situation, vous souhaitez cibler les fichiers d'un sous-répertoire de votre répertoire de thèmes actuellement activé afin de spécifier le chemin relatif.

Vous l'utiliseriez comme ceci: get_theme_file_uri( 'hdr-styles/' . $appropriateHeader );

EDIT concernant votre erreur: Fatal error: Call to undefined function get_theme_file_uri()

Essayez plutôt ce qui suit:

wp_enqueue_style( 'my_header_css_scripts', get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

et en réalité, la poignée de style devrait probablement refléter la feuille de style en cours de chargement. Donc, au lieu d’utiliser de manière générique "my_header_css_scripts" pour la feuille de style chargée, par exemple, basename($appropriateHeader)

Exemple:

wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader );

2
Michael Ecklund

Oui, votre approche de chargement de CSS spécifiques à l'en-tête semble bien. Vous pouvez faire quelque chose comme ceci dans functions.php:

function my_header_css_scripts () {
    switch (get_field ('chosen_header', 'option')) {
        case 'header-slim.php':
            $appropriateHeader = 'header-slim.css';
            break;
        case 'header-whatever.php':
            $appropriateHeader = 'whatever.css';
            break;
        default:
            $appropriateHeader = 'header.css';
            break;
    }
    wp_enqueue_style ('my_header_css', get_theme_file_uri ('/themepath/to/css/' . $appropriateHeader));
}
add_action ('wp_enqueue_scripts', 'my_header_css_scripts');

Pour les widgets ... ce que vous demandez n'est pas tout à fait clair, mais récapitulons: vous pouvez placer des widgets spécifiques à l'aide de the_widget ou de ceux spécifiés dans le champ zone d'administration en utilisant dynamic_sidebar . Le fichier php de votre en-tête sélectionné ne peut pas modifier les sélections de widgets dans la zone d'administration, car il ne sert qu'à la sortie d'un en-tête de page. Au lieu de cela, vous pouvez définir plusieurs nouvelles zones de widget, comme indiqué dans cette publication de buckleupstudios.com , une pour chaque type d'en-tête, puis les widgets de chaque en-tête seraient affichés. être personnalisable dans la zone d'administration. Si, dans la zone d'administration, vous souhaitez uniquement afficher la zone du widget correspondant à l'en-tête sélectionné, vous devez vous connecter à la page des widgets d'administration et masquer les autres zones du widget.

0
iguanarama

Donc, après m'être gratté la tête et avoir essayé plusieurs choses, je suis heureux de signaler que, grâce à @iguanarama et @ Michael Ecklund, les multiples en-têtes appelant des feuilles de style sous condition sont maintenant opérationnels! :) Je tiens à vous remercier tous les deux pour toute votre aide ... sérieusement! J'ai collé le code qui fonctionne maintenant dans mon fichier functions.php ci-dessous pour que vous puissiez l'examiner. Maintenant, je dois comprendre comment afficher les widgets correspondants dans la page d'administration des widgets dans WP-Admin. Ce que je veux dire par là, c'est quand je charge l'entête, en-tête-1, les seuls widgets d'en-tête disponibles dans la page d'administration des widgets sont des widgets qui s'afficheront dans l'en-tête-1 du serveur frontal.

Voici le code qui fonctionne: 

function my_header_css_scripts () {
switch (get_field ( 'select_header_layout', 'option' )) {
    case 'black':
        $appropriateHeader = 'header-black.css';
        break;
    case 'gray':
        $appropriateHeader = 'header-gray.css';
        break;
    case 'red':
        $appropriateHeader = 'header-red.css';
        break;
    default:
        $appropriateHeader = 'header-default.css';
        break;
}
wp_enqueue_style( basename( $appropriateHeader ), get_template_directory_uri() . '/hdr-styles/' . $appropriateHeader ); }
add_action ('wp_enqueue_scripts', 'my_header_css_scripts');
0
AlonsoF1