Traduire “Continue reading” grâce aux CSS

Les CMS c’est chouette, malgré tout ça devient vite des “usines à gaz”: pour la moindre petite fonctionnalité il faut soit installer un plugin (une extension), soit développer soit même… et les mises à jours deviennent rapidement un sujet à part entière assez désagréable.

Aujourd’hui, j’avais un sujet d’une simplicité extrême: traduire dans WordPress le fameux “Continue reading” par “Lire la suite”. C’est tout.

Et pour ça qu’est-ce qui est proposé sur le Net ? La méthode hard avec le logiciel PoEdit ou encore l’installation de plugins de traduction du type “loco translate” … Deux manières “propres” de faire mais du type “je déploie l’artillerie lourde pour tuer un moustique…”En plus, est-ce si propre ? Sachant que comme tout un chacun (Webmaster) tu crains la mise à jour du thème, du plugin ou du systhème lui-même qui va finalement écraser tes jolies petites modifications… ?

Bref, j’ai réfléchi et j’ai trouvé autre chose. Un contournement pas “propre” mais satisfaisant à mon sens vu le défi. J’ai simplement utilisé la feuille de style “custom” et ça donne ça:

1/ Le texte à traduire:

more01b

2/ Ajout de la “traduction”:

.more-link::after {
 content: "Lire la suite →";
 color: #404040;
 font-size: 16px;
 border-bottom: 1px solid #404040;
}

more02b

3/ “Effaçage” du texte en anglais:

.more-link {
 color: transparent;
}

more03b

4/ “Calage” du texte en Français à gauche

.more-link {
 font-size: 0;
}

more04b

5/ On ne le voit pas puisque c’est une image, mais le lien fonctionne ; évidemment .

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Merci de renseigner le captcha ! * Time limit is exhausted. Please reload CAPTCHA.