Ce tutoriel décrit les étapes à suivre pour créer des zones de contenu colorées à utiliser sur notre site. Vous pouvez l’utiliser sur n’importe quel thème WordPress ou modèle HTML, car nous allons utiliser la méthode simple HTML et CSS.
Voici le résultat final :
Ajouter des zones de contenu simple en couleur sur votre site
Ajoutez le CSS suivant dans style.css de votre thème enfant.
/* Content Boxes ------------------------------------------------------------ */ .content-box-blue, .content-box-gray, .content-box-green, .content-box-purple, .content-box-red, .content-box-yellow { margin: 0 0 25px; overflow: hidden; padding: 20px; } .content-box-blue { background-color: #d8ecf7; border: 1px solid #afcde3; } .content-box-gray { background-color: #e2e2e2; border: 1px solid #bdbdbd; } .content-box-green { background-color: #d9edc2; border: 1px solid #b2ce96; } .content-box-purple { background-color: #e2e2f9; border: 1px solid #bebde9; } .content-box-red { background-color: #f9dbdb; border: 1px solid #e9b3b3; } .content-box-yellow { background-color: #fef5c4; border: 1px solid #fadf98; }
Usage:
<div class="content-box-COLOR">votre texte ici</div>
Nous pouvons utiliser le CSS basé sur la classe de couleur suivante mentionné ci-dessus.
bleu gris vert violet rouge jaune
Exemple:
<div class="content-box-blue">Il s'agit d'un exemple de zone de contenu, facile à mettre en œuvre et pouvant être utilisée pour mettre l'accent sur une pensée ou un sentiment particulier.</div>
Changez ici la classe content-box-blue à la vôtre.
Petit code:
La plupart du temps, nous ne souhaitons pas passer du mode éditeur à HTML .Pour éviter ce passage en mode HTML on va simplement créer un shortcode et l’utiliser .
Ajoutez ce qui suit dans functions.php de votre thème enfant (pour les utilisateur du thème Genesis).
// Add content box Shortcode add_shortcode( 'content-box', 'content_box_shortcode' ); function content_box_shortcode( $atts = [], $content = null ) { // Attributes $atts = shortcode_atts( array( 'color' => 'blue', ), $atts ); //return return ' <div class="content-box-' . $atts['color'] . '">' . $content . '</div> '; }
Usage:
Ajouter simplement le code ci-dessous pour entourer votre texte, ensuite changer « COLOR » par la couleur de votre choix :
red pour le rouge
yellow pour le jaune
purple pour le violet
green pour le vert
gray pour le gris
blue pour le blue
[content-box color="COLOR"]Text Content[/content-box]
Laisser un commentaire