web-dev-qa-db-fra.com

Ajout de styles de personnalisation avec wp_add_inline_style

Comme je dans une question précédente a un thème avec des centaines de mods, que je rassemble dans un mod afin de ne pas avoir à parcourir tous les mods à chaque chargement de page.

Maintenant, le le codex vous permet de transférer les styles de personnalisation directement dans la tête, ce qui n’est pas très élégant. Il est wp_add_inline_style d'ajouter des CSS de manière ordonnée à une feuille de style existante. Cela ressemble à ceci et cela fonctionne bien:

$style = get_theme_mod ('all-mods');
wp_add_inline_style ('my-main-style',$style);

Il y a cependant un problème. Si je crée un thème enfant, les styles en ligne sont toujours ajoutés directement après les styles parent. Cela entraîne leur annulation par le css du thème enfant, qui est chargé après le parent afin de s’assurer qu’il remplace ces styles. Ce n'est pas ce que l'utilisateur attend.

Les styles de personnalisation doivent avoir la priorité la plus élevée. Je dois donc d’une certaine manière veiller à ce qu’ils soient les derniers à être chargés dans la tête. Je peux détecter s'il y a un thème enfant actif , mais je ne peux pas connaître le descripteur du style enfant pour y ajouter les styles en ligne.

A ce moment, j'ai simplement défini un fichier css vide, que j'ai mis en file d'attente à la fin de la tête, puis ajouté les styles en ligne. Mais c'est loin d'être élégant, c'est pourquoi j'ai pris ce chemin en premier lieu. Est-ce que quelqu'un connaît une approche plus intelligente?

theme-developmenttheme-customizerwp-enqueue-style
4
cjbj

Vous pouvez essayer de détecter si le thème actuellement utilisé est un enfant et, le cas échéant, de pointer le code CSS en ligne vers le bon style. Je n'ai pas testé cette solution, mais cela pourrait être un bon point de départ.

function mytheme_enqueue_style()
{
    wp_enqueue_style( 'parent-theme-style',get_template_directory_uri() . '/style.css', false );

    if(is_child_theme())
    {
        wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array('parent-theme-style')  );
    }

    $style = get_theme_mod ('all-mods');
    $where = is_child_theme() ? 'child-theme-style' : 'parent-theme-style';
    wp_add_inline_style( $where, $style );
}

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

REMARQUE

Il y a une différence entre get_template_directory_uri() et get_stylesheet_directory_uri() en fait sur codex nous avons

Si un thème enfant est utilisé, cette fonction renvoie l'URI du répertoire de thèmes de l'enfant. Utilisez get_template_directory_uri() pour éviter d'être remplacé par un thème enfant.

1
koMah