Balises HTML et Classes CSS

Du concret et encore du concret pour repousser un peu les limites de WordPress.

Il est indispensable d’avoir compris les deux premiers chapitre de L’introduction aux langages du Web : relisez-les, ils ne sont pas longs !

L’Editeur de code

Vous connaissez déjà l’éditeur de code :

• Dans la barre d’icones droite cliquez sur l’icone Options (3 points verticaux en haut à droite de l’écran) /cliquez sur Editeur de code pour le cocher
• Pour revenir à l’affichage habituel : dans la barre d’icones droite recliquez sur l’icone Options/cliquez sur Editeur visuel pour le cocher.

Vous connaissez aussi ce qu’on fait de mieux : l’icone Options /Modifier en HTML de la barre d’icones gauche (également présente au bout du bloc sélectionné dans la Vue en liste).

Du lard dans les lentilles

Si je passe en gras le résumé d’un bloc Détails :

• Tout le résumé est en gras
• Tous le détail est en gras

Par ailleurs, le seul moyen de le faire est d’imposer une typographie grasse à tout le bloc : sélectionner le bloc Détails / Styles /Typographie /Apparence /Gras.

Comment faire pour que seul le résumé soit en gras ?

• Rédigez le détail du bloc détail
• Rédigez le résumé du bloc Détails
• Repérez un mot clé de ce résumé (souvent, j’ajoute xxx qui est unique et plus facile à rechercher et je supprime xxx une fois l’opération terminée)
• Passez en Editeur de code
• Recherchez le mot clé (Ctrl F)
• Encadrez le texte du résumé avec les balises <b> et </b> (en gras ci-dessous pour mieux voir mais pas en gras dans le code !) :

<!-- wp:details -->
<details class="wp-block-details"><summary><b>Le résumé de mon bloc Détails</b></summary><!-- wp:paragraph {"placeholder":"Saisissez / pour ajouter un bloc masqué"} -->
<p>Le détail de mon bloc Détails </p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

Et le tour est joué ! Seul le résumé est en gras :

Le résumé de mon bloc Détails

Le détail de mon bloc Détails

Vous pouvez même encadrer de la sorte un seul mot du résumé :

<summary>Le <b>résumé</b> de mon bloc xxx Détails</summary>

Remarques :

• Je vous ai affiché le code HTML en utilisant le bloc Code
• J’emballe le bloc Détails avec un bloc Groupe auquel j’attribue un arrière plan pour que ce soit plus clair lorsque le bloc Détail est ouvert
• En réalité, pour mettre en page le résumé d’un bloc Détails, il suffit de :
  • Créer un paragraphe en dehors du bloc Détails
  • Dans ce paragraphe, saisir et mettre en forme le texte souhaité
  • Copier le texte mis en forme du paragraphe et le copier dans le résumé du bloc Détails
  • Supprimer le paragraphe.

Court-circuiter l’auto-correction des guillemets

WP transforme les guillemets doubles quotes en guillemets ouvrantes et fermantes. Sauf que ça marche mal et que parfois, vous voulez conserver les doubles quotes.

Par exemple ce n’est pas ça que je voulais :
type= »checkbox »

Mais ça :
type="checkbox"

Pour obtenir ce résultat, je suis allé dans l’éditeur visuel et j’ai protégé mes doubles quotes par des balises <code> :

type=<code>"</code>checkbox<code>"</code>

C’est fastidieux mais je n’ai rien trouvé de mieux, à moins d’écrire le texte entier dans un bloc Code.

Le bloc HTML personnalisé

La boite à cocher

Si WP ne propose pas de bloc « Boîte à cocher », c’est probablement parce qu’il s’agit d’une saisie (input) destinée normalement à un traitement ; or, dans un blog, on ne saisit pas grand-chose à part des commentaires.

Le commentaire de WP est un formulaire particulier qui ne propose pas de saisie sous la forme de boîte à cocher. Pour les formulaires, WP s’en remet aux créateurs d’extensions (wpform est sans doute l’extension la plus célèbres en la matière). Les formulaires sont surtout utiles sur les sites marchands. La mise en place n’est a priori pas triviale car il faut récupérer et traiter les données côté serveur.

Sans vouloir construire un formulaire, ni traiter des données côté serveur, j’ai eu besoin de boîtes à cocher pour proposer des quiz sur mon site (j’adore les quiz).

La mise en place n’est pas compliquée, il faut utiliser autant de blocs HTML personnalisé qu’il y a de cases, et y entrer le code HTML suivant :

<input type="checkbox">

Résultat :

Le bouton radio

Pour les mêmes raisons, vous pouvez avoir besoin de boutons radio. Le principe est le même que pour les cases à cocher, sauf que si je coche un bouton, il doit automatiquement rester le seul coché, dans le cas où un autre bouton de la question aurait déjà été coché.

Il faut utiliser autant de blocs HTML personnalisé qu’il y a de boutons radio, et y entrer le code HTML suivant :

<input type="radio" name="question-1">

Résultat :

Remarques :

• En HTML, il y a plusieurs types d’inputs : checkbox, radio, select, etc.
• Si des boutons radio appartiennent à la même question, pour que le choix d’un bouton efface un bouton déjà coché, il faut ajouter l’attribut name dans les inputs en lui donnant la même valeur dans chacun des inputs (dans l’exemple ci-dessus, on a choisi question-1)
• Attention aux copier-coller : si dans la même page, vous créez une 2^e question avec des boutons radio, il faudra choisir une autre valeur pour l’attribut name des boutons appartenant à cette 2^e question (par exemple question-2).

La liste déroulante

A la place de boutons radio, vous pouvez préférez proposer vos réponses dans une liste déroulante, en particulier si les réponses sont nombreuses.

Un seul bloc HTML personnalisé est nécessaire, par contre, toutes les réponses sont intégrées au code HTML (avec style= »width: 50%; » pour que ça ne déborde pas sur les smartphones) :

<select style="width: 50%;">
  <option></option>
  <option>1 - Une application qui répond aux internautes</option>
  <option>2 - Un site internet</option>
  <option>3 - Un système qui fournit les adresses IP</option>
  <option>4 - Un système qui permet aux internautes de communiquer entre eux</option>
  <option>5 - Un gros ordinateur qui héberge une ou plusieurs applications qui répondent à des internautes</option>
  <option>6 - Un système qui permet aux internautes d'envoyer des requêtes</option>
</select>

Résultat :

Remarques :

• La 1ère option est vide (<option></option>) : la première option étant celle qui est affichée par défaut à l’internaute, dans la zone de choix, cela permet de n’y rien afficher au départ
• Comme les boutons radio, la liste déroulante ne permet qu’un seul choix
• J’ai ajouté des numéros pour faciliter l’échange
• Le rendu sur les smartphones est plus sexy : une fenêtre s’affiche avec tous les choix sous forme de boutons radio (essayez).

En prévision de nouveaux quiz, j’ai créé une composition pour chacun des ces trois éléments de quiz. Compositions désynchronisées pour pouvoir modifier les blocs en fonction des questions.

Nous poursuivrons la mise en place du quiz dans Scripts en JavaScript.

Le CSS dans les balises HTML (attribut style)

Je vous renvoie aux exemples que nous avons étudié dans Introduction aux langages du Web.

Ce CSS localisé dans du HTML convient pour des mise en forme ponctuelles embarquées mais elles ne répondent pas au besoin d’homogénéisation d’un site.

Explorons les techniques CSS plus globales, compatibles avec WP.

Le CSS additionnel de WP

Le menu WP-admin /Apparence /Personnaliser /CSS additionnel permet d’ajouter au kilomètre des instructions en CSS.

Le menu WP-admin /Apparence /Personnaliser n’apparaît pas avec tous les thèmes. En particulier, les 3 derniers Thèmes WP (2022, 2023, 2024) ne le proposent pas. La volonté de WP semble de faire en sorte de s’en passer en offrant toujours plus de réglages sur ses blocs.

Quoi qu’il en soit, le menu est disponible avec d’autres thèmes et surtout, quel que soit le thème si vous installez et activez l’extension Yoast SEO :

• L’installation de Yoast SEO (qu’il faut faire de toutes façons) semble ne pas être toujours suffisante (ou ne l’est plus) ; en effet, au fil des versions successives du thème, de WordPress et de Yosa SEO, le sous-menu Personnalisé a fini par disparaître des menus d’administration de mon site
• Pour y avoir toujours accès depuis la barre d’outils horizontale en haut de l’écran, j’ai utilisé une solution de contournement consistant à ajouter le code ci-dessous dans le fichier mesfonctions.php de l’extension ecrire-fun-2022 (voir le chapitre Créer une extension) :

/* Auteur : CM ****** LIEN PERSONNALISER ***************
 * j'ai constaté que le menu 'wp-admin /Apparence / Personnaliser' n'est plus affiché.
 * En attendant qu'il réapparaisse, j'ai ajouté son lien dans la barre d'outils, notamment pour pouvoir modifier mon CSS.
 * J'ai pu récupérer le lien (customize.php) sur un site de test où le menu n'avait pas disparu.
 * A toute fin utile, les 2 autres sous-menus du menu Apparence sont : themes.php et site-editor.php
*******************************************************/
add_action('admin_bar_menu', 'wpcma_barre_outils_liens', 999); 
function wpcma_barre_outils_liens($wp_admin_bar) {
    //global $wp_admin_bar;
    $args = array(
	'id' => 'cma_personnaliser',
	'title' => 'Personnaliser',
	'href' => 'https://xn--crire-9ra.fun/wp-admin/customize.php'
    );
    $wp_admin_bar->add_node($args);
}

Maintenant que nous sommes rassurés, le problème suivant se pose : comment faire le lien entre les instructions collées dans l’espace réservé au CSS additionnel, et les balises HTML qui structurent les pages du site ?

Une ou plusieurs instructions CSS peuvent cibler en cascade :

Soit, une balise donnée (donc un type de bloc WP), quel que soit la page où elle se trouve

• Exemple : p{text-align: justify;} justifie le texte de tous les paragraphes (p pour balise <p>)
• Remarque : je préfère que mon texte soit justifié systématiquement, ça m’évite, à chaque fois que je crée un paragraphe, d’aller dans… Dans quoi au fait ? Je n’ai pas trouvé
• Au pire, si je veux exceptionnellement qu’un paragraphe ne soit pas justifié, j’utilise la solution suivante :

Soit, une classe précise qu’il suffit d’associer à une balise (donc au bloc WP concerné)

• Si par exemple, je veux qu’exceptionnellement un paragraphe ne soit pas justifié par l’instruction p{text-align: justify;} alors j’attribue à ce paragraphe la classe que j’ai définie, qui impose un alignement à gauche, en l’occurrence :
  .text-align-start{text-align: start;}
• Je peux donner à la classe le nom que je veux (ici text-align-start)
• Remarquez le point qui précède le nom de la classe dans Apparence /Personnaliser /CSS additionnel
• Pour attribuer la classe au paragraphe de son choix, sélectionner le bloc Paragraphe /Réglages /Avancé /CLASSE(S) CSS ADDITIONNELLE(S) : inscrire le nom de la classe sans mettre de point devant (on peut inscrire plusieurs classe en les séparant par un espace)

Résultat :

Ceci est un paragraphe non justifié (je reprends un paragraphe écrit plus haut) : Maintenant que nous sommes rassurés, le problème suivant se pose : comment faire le lien entre les instructions collées dans l’espace réservé au CSS additionnel, et les balises HTML qui structurent les pages du site ?

Vous connaissez maintenant la réponse.

Ci-dessous un extrait de Apparence /Personnaliser /CSS additionnel ( /* mes commentaires */ ) :

/* 1) Remplacer les puces sphériques d'une liste non ordonnée, par des tirets, comme pour un dialogue (quand il y a plusieurs instructions CSS, il faut les séparer par un point-virgule) : */  
.dialogue{list-style-type: '–  '; text-align: justify; padding-left : 1.1em;}

/* 2) Justifier tous les éléments d'une liste non ordonnées : */
.puce-justifiee {text-align: justify; padding-left : 1.1em;}

/* 3) Justifier tous les paragraphes et accessoirement des blocs de son choix au moyen de la classe justifier (on peut définir différentes cibles en les séparant par une virgule) : */  
.justifier, p{text-align: justify;}

/* 4) Cadrer à gauche le bloc de son choix : */
.text-align-start{text-align: start;}

/* 5) Oter les puces d'une liste : */ 
.liste-sans-puce{list-style-type: none;} 

Ci-dessous, un exemple de mise en forme de bouton : la classe clavier-glossaire a été attribuée au bloc Boutons et l’on a ciblé chaque bouton qui le composent grâce au sélecteur universel * (toutes les balises contenues dans les balises portant la classe clavier-glossaire)

.clavier-glossaire *{
  width: 2.4em;
  margin: auto;
  margin-top: 0.2em;

  color: white;
  background-color: #6495ED;
  text-shadow: 1px 1px black;

  text-decoration: none;
  text-align: center;
  padding: 2px;
  border: 3px outset #c0c0c0;
}

Résultat impressionnant :

Soit, l’identifiant d’une balise (donc l’ancre d’un bloc WP)

• Pour cibler un identifiant (une ancre) il suffit :
  • De sélectionner le bloc et de renseigner un identifiant dans Réglages /Avancé /ANCRE HTML
  • Et, dans Apparence /Personnaliser /CSS additionnel, de cibler l’instruction (ou le groupe d’instructions) CSS avec l’identifiant en faisant précéder celui-ci de #
  • Exemple : #mon-ancre{ mon instruction CSS;}
• Vous allez me dire qu’il suffit d’introduire un style CSS dans la balise de tête HTML en passant sur l’Editeur de code
  • C’est très dangereux car on oublie rapidement où le code a été introduit et il est très difficile de le retrouver
  • Il vaut mieux regarder dans Apparence /Personnaliser /CSS additionnel où tout est regroupé et où l’on peut ajouter des commentaires
• Vous allez me dire aussi, pourquoi s’embêter avec des identifiants puisqu’on peut créer des classes qui peuvent, si nécessaire, être utilisées sur d’autre bloc ?
  • Vous n’avez pas tort ; mais les identifiants sont des cibles ultra prioritaires qui permettent de se tirer d’affaire quand les classes se multiplient et qu’on ne sait plus trop où on en est.

Liste des sélecteurs CSS : https://www.pierre-giraud.com/liste-selecteurs-css-utilisation/

La touche F12

Cette touche permet de visualiser le code HTML de la fenêtre affichée par le navigateur.

• Vous pouvez utiliser cette touche sur n’importe quel site
• Vous ne pouvez pas modifier le code, seulement l’examiner
• Pour refermer la fenêtre, retaper F12.

Ce peut être utile quand vous coder, par exemples :

• Pour récupérer l’identifiant (id) ou le nom (name) d’un bloc (balise)
• Pour voir comment sont organisées les balises avant d’écrire un script JavaScript qui devra les manipuler.

Vous pouvez aussi en avoir besoin lorsque vous installez certaines extensions pour identifier le bloc sur lequel vous devez positionner une classe.

• Par exemple, l’extension myStickymenu vous demande d’attribuer une classe de votre choix (qui sera réservée au fonctionnement de l’extension) au bloc de votre modèle que vous voulez voir affiché en haut de votre écran lorsque vous scrollez (le bloc se rétracte quand vous descendez et réapparaît lorsque vous remontez en direction du haut de la page).
• Vous pouvez attribuer la même classe à un bloc de différents modèles (inutile si ce bloc est partagé entre ces différents modèles).
• Dans Réglages du bloc WP, ne pas mettre de point devant la classe
• Dans Réglages de myStickymenu, mettre un point devant la classe (et un # si vous préférer travailler avec un identifiant (une ancre dans le réglage du bloc WP)
• Si ça ne marche pas, F12 vous permet de vous assurer que vous avez mis la classe sur le bon bloc : vous devez la voir dans le code HTML, a priori dans une balise <div> puisqu’on a posée la classe sur un Groupe WP, sous la forme : <div class= »cmaepingler« > (cmaepingler est le nom que j’ai donné à ma classe).
• Attention, il peut y avoir plusieurs classes différentes dans une même balise : <div class= »classe-1 classe-2 cmaepingler classe-3 classe-etc« >
• Par exemple sur mon site :

Réglage du bloc dans WP :

Réglage dans myStickymenu :

Résultat dans le code visualisé avec F12 quand l’internaute va sur la page :

Chemin trouvé (quand vous promenez la souris sur le code, la zone concernée est floutée sur la page affichée à gauche) : <body /1^ère <div /<header /1^ère <div /<header /1^ère div : id= »mystick-wrap » (on ne doit pas être loin, cet identifiant a été posé par l’exrension) /la <div : class = « nombreuses classes dont la mienne : cmaepingler etc. »

Nous pouvons maintenant étudier le JavaScript, un vrai langage qui va nous permettre de faire des prouesses.