Créer des « Call to Action » ou des « boutons CSS » dans l’éditeur WYSIWYG TinyMCE

Cette petite astuce toute simple permettra à vos clients⁽¹⁾ de styler certains liens différemment des autres (Call to action, bouton, etc.) depuis TinyMCE, l’éditeur WYSIWYG de WordPress. Il suffit de créer un lien et de le mettre en «gras» avec l’icône B. Cette combinaison toute simple vous donnera le composé HTML suivant :

<strong>
    <a href="https://4design.xyz/articles/wordpress-webdesign/basics-theme-wordpress-minimaliste-base-sur-html5-boilerplate-et-le-codex/">
        lien de téléchargement
    </a>
</strong>

Pour les styles CSS :

strong a {
    font-weight: normal;
    padding: 0.25em 0.5em;
    background: #F29F05;
    color: #000;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

On peut aller plus loin en isolant ce marquage HTML dans son propre paragraphe pour augmenter les possibilités. Comme dit le proverbe bien connu : «Plus il y a  de marquage HTML et plus il y a de marrage sous les bretelles», comme le centrage, des backgrounds différents, etc.

Dans le même esprit, on peut également envisager de combiner un  lien avec  «l’italique» (I) pour styler ensuite le sélecteur `em a`.

D’un point de vue sémantique, l’importance des textes véhiculée par `strong` ou `em` devrait s’accorder avec une mise en évidence plus ou moins forte des contenus associés.

⁽¹⁾ Si c’est pour pour vos clients, ça devrait être bon pour vous aussi !