Galère de spécification de bloc texte HTML

Signaler
Messages postés
8
Date d'inscription
dimanche 16 août 2020
Statut
Membre
Dernière intervention
1 juin 2021
-
 R0b0x -
Bonjour à tous,

J'ai un besoin urgent d'ajout de code en rapport avec un plugin (Translatepress). J'ai posé ma question sur le forum WP concerné mais je n'ai eu que la première partie de la réponse, ce qui ne m'aide pas du tout. Débutante, je me débrouille sur Wordpress mais je ne comprends toujours pas comment utiliser les codes HTML, contrairement aux spécifications CSS que je sais comment placer.
Voici une des pages à traduire :
https://hs-artworks.com/fr_fr/post-calla/

On me dit de placer ce code dans mon bloc de texte HTML :

<div class="translation-block">
<div class="masc">Partner</div>
</div>
<div class="translation-block">
<div class="fem">Partner</div>
</div>

<div class="translation-block">
Translate <em>everything</em> <div>inside</div>
</div>

Mes essais se soldent par des échecs. Je ne sais pas comment customiser ce code (mots à remplacer ?) ni où le coller.


Les choses sont beaucoup plus faciles pour moi avec les spécifications CSS. Par exemple, un bloc de texte (que je dois également traduire) a déjà cette classe:

.textpara p {
taille de la police: 16px;
hauteur de ligne: 20px;
couleur: # 2E2E2E;
}
Je l'écris dans le champ de spécification CSS de ma page, et j'ajoute:
.textpara
dans le champ de spécification css de mon bloc HTML.

Est-il possible de faire de même pour le code du plugin Translatepress ? Pouvez-vous me montrer comment écrire le code?

Merci d'avance.

1 réponse

Bonjour,
Le bloc de texte HTML c'est soit un widget ou dans Editeur Gutenberg ou 2diteur classique, onglet Texte.

<div class="translation-block">
<div class="masc">Partenaire</div>
</div>
<div class="translation-block">
<div class="fem">Partenaire</div>
</div>

<div class="translation-block">
Traduire <em>tout ce qui est</em> <div>à l'intérieur</div>
</div>
Salut, euh non la balise DIV ne correspond absolument pas à du texte. Elle est même à éviter dans la plupart des cas puisqu'elle n'indique aucune information sur le contenu.

"je ne comprends toujours pas comment utiliser les codes HTML"
Dans ce cas il serait temps d'apprendre surtout que c'est très simple HTML et heureusement car fait pour écrire toutes les pages du web(ce qui fait pas mal de pages) rapidement et simplement. Maîtriser ses subtilités demande un peu de pratique mais ce n'est pas insurmontable. Je parle de la sémantique qui sert à indiquer les contenus et les types de ceux ci.

Et ceci:
.textpara p {
taille de la police: 16px;
hauteur de ligne: 20px;
couleur: # 2E2E2E;
} 

N'est évidemment pas du CSS, il n'en respecte pas la syntaxe et comme la plupart des langages informatiques utilise des mots anglais quand des mots(ou abréviations de mots anglais) sont utilisés.

"Les choses sont beaucoup plus faciles pour moi avec les spécifications CSS."

On parle plutôt de règles CSS(donc règles de style, CSS signifiant feuilles de styles en cascade de l'anglais Cascading Style Sheet) et le principe est d'utiliser les propriétés définies dans le langage pour indiquer des valeurs associées à ces propriétés à une balise ou un ensemble de balises HTML.
CSS est donc indissociable de HTML.

Exemple:
.textepara p{
font-size:16px;
}

Crée une classe CSS appliquée à une ou plusieurs balise(s) HTML de type "p"(pour paragraph) qui "possède(nt)" la classe "textepara" qui sera à utiliser(appliquer/indiquer à une ou plusieurs balises HTML "p") comme ceci:

<p class="textepara">
mon paragraphe de texte en taille de police 16px car indiqué ayant la classe CSS textepara = va prendre les propriétés indiquées par les règles/propriétés de style indiquées dans le CSS entre les accolades qui suivent le "sélecteur" CSS(.textepara p).
</p>
<!-- il y a toutefois de meilleures unités pour les tailles de police pour les pages web que le pixel. En effet le pixel est une valeur fixe, utiliser un valeur scalaire comme le point-symbole : pt) ou le quadratin d'imprimerie(em) permet des valeurs scalaires, c'est à dire qui s'adapteront à la taille d'affichage de l'utilisateur -->


Donc pas grand rapport avec le thème puisque vous pouvez l'intégrer en modifiant le contenu CSS de la page(HTML et CSS de celle ci) via l'éditeur de wordpress.

https://duckduckgo.com/?q=wordpress+modifer+le+HTML+CSS+de+la+page