WordPress : Style CSS d’une page spécifique

Publié par Jean-Michel le

Je suis familier avec le style de pages spécifiques sur WordPress en ajoutant une classe

.page-id-123

devant l’élément de style. Cependant, cela ne semble pas s’appliquer aux « sous-pages » (désolé, je ne sais pas comment elles s’appellent), lorsqu’après la page, une balise spécifique (?) est ajoutée.

Exemple:

URL : wordpressweb.com/mon-compte

CSS :.page-id-123 .header { background-color: yellow; }

URL : wordpressweb.com/my-account/?add-new-business=true CSS

 :??? .header { background-color: yellow; }

Existe-t-il un moyen de cibler ce type de pages avec CSS ?

Solution n°1 trouvée

C’est une chaîne de requête d’URL. C’est toujours la même page, pas une sous-page. Vous pouvez y accéder en PHP via $_GETet vous pouvez utiliser le body_classcrochet pour rechercher cette chaîne de requête et ajouter une classe en conséquence. WordPress n’ajoutera pas de classes pour les chaînes de requête, ce n’est pas une chose normale à faire.

Voici un exemple d’utilisation du body_classcrochet pour ajouter une classe supplémentaire basée sur la chaîne de requête :

/**
 * Look for query string and add an additional class to the body
 *
 * @param Array $classes
 *
 * @return Array $classes
 */
function wpse352069_body_class_mods( $classes ) {

    if( isset( $_GET, $_GET['add-new-business'] ) && true == $_GET['add-new-business'] ) {
        $classes[] = 'add-new-business';
    }

    return $classes;

}
add_filter( 'body_class', 'wpse352069_body_class_mods' );

Si cette chaîne de requête existe et est vraie, elle ajoutera la add-new-businessclasse à la balise body. Vous pouvez utiliser le CSS ci-dessous pour le styliser :

body.add-new-business .header { background-color: yellow; }
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *