[Résolu] Ajouter une class CSS personnalisée à html ou body (Créer un compte)

  • WordPress :5.8
  • Statut : résolu
  • Ce sujet contient 15 réponses, 4 participants et a été mis à jour pour la dernière fois par Flobogo, le il y a 20 secondes.
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #2384832
    JL BA
    Participant
    Initié WordPress
    13 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : Astra – Thème enfant
    • Extensions en place :
    • Nom de l’hébergeur :
    • Adresse du site :

    Problème(s) rencontré(s) :

    Bonsoir,

    Comment ajouter une class ou un id personnalisé au niveau de la balise html ou body de certaines pages de mon site (pages, pas posts). Pour pouvoir ensuite personnaliser certains sélecteur. Ex : #page-rouge a {color: #red} ?

    D’avance merci.

    • Ce sujet a été modifié le il y a 5 jours et 4 heures par PhiLyon.
    • Ce sujet a été modifié le il y a 5 jours et 4 heures par Flobogo. Raison: correction du titre
    #2384835
    PhiLyon
    Modérateur
    Maître WordPress
    27946 contributions

    Bonjour.

    Il existe des extensions pour ajouter une colonne avec l’ID dans l’admin, mais plus simple, dans Pages/Toutes les pages, survoles celle qui t’intéresse et tu verras en bas à gauche de ton écran son ID.

    🙂

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2384858
    JL BA
    Participant
    Initié WordPress
    13 contributions

    J’ai vu qu’il y a l’ID de la page dans la balise body. Je voulais juste faire l’inverse.

    Quel plug-in par exemple ?

    Merci.

    #2384859
    PhiLyon
    Modérateur
    Maître WordPress
    27946 contributions

    Je ne comprends pas bien, un exemple

    .page-id-662 #header-image { display: none; }

    🙂

    #2384860
    JL BA
    Participant
    Initié WordPress
    13 contributions

    J’ai bien compris la réponse. Mais il y a plusieurs pages concernées.

    Je préférerai donc ajouter une classe spécifique à la balise body ou html de ces classes là. Ça simplifierai le code css et la maintenance.

    #2384861
    PhiLyon
    Modérateur
    Maître WordPress
    27946 contributions

    A ce moment là crées un modèle/template de page dans lequel tu rajoutes ta classe.

    🙂

    #2384862
    JL BA
    Participant
    Initié WordPress
    13 contributions

    J’ai tenté en dupliquant le modèle page.php mais il n’y a que des appels php : je ne sais pas où ajouter ma classe.

    Ceci étant, j’ai juste besoin de pouvoir modifier la couleur de fond du footer et quelques détails du genre. C’est donc plus simple en ajoutant une classe body spécifique.

    J’ai installé Custom Body Class qui semble faire le job.

    #2384868
    Flobogo
    Modérateur
    Maître WordPress
    17606 contributions

    Bonjour,

    J’ai bien compris la réponse. Mais il y a plusieurs pages concernées.

    Si c’est pour quelques pages, il suffit de répéter l’instruction CSS pour chacune. Il est même possible de grouper sous cette forme (exemple pour 3 pages) :

    .page-id-662 #header-image, .page-id-xxx #header-image, .page-id-xyz #header-image { display: none; }

     

    #2384880
    JL BA
    Participant
    Initié WordPress
    13 contributions

    Oui mais quand il y a une dizaine de pages et autant d’instructions css, ça devient lourd. D’où l’intérêt d’ajouter une classe personnalisée à la balise body de ces pages.

    #2384892
    ferman
    Participant
    Maître WordPress
    4408 contributions

    Vous semblez être satisfait du  plugin Custom Body Class donc c’est bon?. Autrement, il est possible d’ajouter une classe aux pages désirées avec un peu de PHP/javascript (et bien sûr d’appliquer ensuite les CSS que l’on veut). Si vous considérez que le problème est réglé, pourriez vous s’il vous plaît passer le sujet en résolu? Merci 🙂 .

    • Cette réponse a été modifiée le il y a 4 jours et 13 heures par ferman.
    #2384898
    JL BA
    Participant
    Initié WordPress
    13 contributions

    C’est fait. Merci.

    #2384992
    Flobogo
    Modérateur
    Maître WordPress
    17606 contributions

    quand il y a une dizaine de pages et autant d’instructions css, ça devient lourd. D’où l’intérêt d’ajouter une classe personnalisée à la balise body de ces pages

    Dans ce cas, la solution proposée par @philyon était la plus logique et la plus propre du point de vue WP : créer un template de page spécifique, et l’appliquer aux pages voulues. ASTRA est sûrement un thème complexe avec des fichiers et sous-fichiers, il faut rechercher le “sous-template” (généralement dans un sous-dossier template-parts) qui appelle le body, et c’est celui qu’il faut modifier, ou dupliquer sous un autre nom.

    Pour ceux / celles que ça intéressent, je suis tombée sur cet article où la création de templates de pages est bien expliquée.

    #2385061
    JL BA
    Participant
    Initié WordPress
    13 contributions

    Dans mon cas, il s’agit essentiellement de changer la couleur de fond du bloc titre principal et du footer sur certaines pages : bleu pour les unes, rouge pour les autre, gris pour toutes les autres. Il aurait donc fallu que je crée un modèle pour les pages bleues et un pour les pages rouges ? De toutes façons, j’ai bien essayé mais je n’ai pas trouvé où mettre la balise. Je vais lire l’article que tu m’indiques.

    Au final, pouvoir ajouter une classe au niveau du body me parait plus simple et efficace comme je fais avec d’autres CMS.  Mais je ne suis pas encore familiarisé avec la logique WP…

    • Cette réponse a été modifiée le il y a 3 jours et 4 heures par JL BA.
    #2385134
    Flobogo
    Modérateur
    Maître WordPress
    17606 contributions

    En fait, si l’extension Custom Body Class fait bien son job, pourquoi s’embêter ?

    Au final, il y a plusieurs solutions :

    • ajouter du CSS personnalisé, en rajoutant manuellement les nouvelles pages autant de fois que nécessaire
    • utiliser l’extension Custom Body Class
    • créer les templates de pages

    A chacun de voir selon son besoin et ses capacités ce qui est le plus simple / le plus souple / le plus adapté.  🙂

    #2385149
    JL BA
    Participant
    Initié WordPress
    13 contributions

    Je ne cherche pas à m’embêter mais à comprendre. 😉

    J’ai utilisé WP à l’époque  en v1 mais n’était qu’un moteur de blog. Il fallait bidouiller pour avoir des pages fixes (ou utiliser un plug-in). J’ai utilisé ensuite des CMS comme Joomla et j’ai fini par adopter Contao (contao.org, peu connu ici) qui propose le champs class au niveau des pages donc du body. Je m’étonnais que WP ne le fasse pas. Et d’ailleurs, je n’ai trouvé que 2 plugin qui le proposent ce qui laisse penser que ça n’est pas une grosse demande.

15 sujets de 1 à 15 (sur un total de 16)
  • Vous devez être connecté pour répondre à ce sujet.