Mettre en avant un texte dans une box personnalisée

Dans ce tuto, nous allons voir comment mettre en avant un texte ou une phrase avec la création d’une box personnalisable.

Pourquoi créer une box personnalisée ?

Il y a de multiples raisons qui peuvent engendrer le besoin d’une box personnalisée, la plupart du temps nous désirons mettre en avant une citation, un passage important d’un texte ou simplement demander aux visiteurs ce qu’ils pensent de l’article afin de les inciter à commenter.

Les différences entre blockquote et une box personnalisée

La balise blockquote est souvent utilisée à tort pour créer une box mais c’est une erreur ! Blockquote doit être utilisée comme son nom l’indique (bloc de citation) uniquement pour afficher une citation. Une box personnalisée reprends l’aspect de blockquote mais étant dépourvus de ces fameuses balises, elle ne sera pas considérée comme entourant une citation par les moteurs.

Le code de la box personnalisée

Le code de la box est relativement simple puisqu’il ne fait que quelques lignes que vous devez insérer à la fin du fichier functions.php de votre thème soit via l’éditeur de thèmes (apparence=>éditeur de thème=/fichier functions.php) soit en modifiant manuellement le fichier functions.php de votre thème en passant par le serveur ftp.

  function make_mabox($atts, $content = null) {

  return '<p style="background: none repeat scroll 0 0 #e7e7e7; clear:  both; margin-bottom: 18px; overflow: hidden; border: 1px solid #ff0000;  padding: 13px;">' . do_shortcode($content) . '</p>';

}

add_shortcode('mabox', 'make_mabox');  

La partie la plus intéressante se trouve après le « return » car vous allez pouvoir personnaliser l’ensemble de l’affichage de la box en modifiant ou ajoutant les css de votre choix.

Lire aussi :  Optimiser les images de votre site

Modification du code de la box

Dans cette exemple, la box affichera un fond de couleur grise (code e7e7e7), un marge inférieure (margin-bottom:18px), une bordure de 1 px de forme « solid » et de couleur rouge (ff0000) et une marge interne (padding:13 pixels). Tous ces éléments css sont modifiables et vous pouvez, bien entendu, en ajouter d’autres.

Finalisation du code de la box

Maintenant que vous avez personnalisé complètement votre box, il ne vous reste plus qu’a la tester ! Dans un article ou une page, entourez simplement un texte ou une phrase avec le shortcode mabox comme ceci

[!mabox]Placez votre texte ici …[!/mabox] (enlevez les ! du code)

Validez l’article ou la page et allez voir sur votre site pour constater que la box personnalisée s’affiche correctement.

[mabox] Important : n’oubliez pas que les modifications sur le fichier functions.php doivent être fait sur un thème enfant sous peine de voir votre modification disparaître lors de la mise à jour de votre thème [/mabox]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *