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 du code :
<div class="content-box-COLOR">votre contenu texte ici</div>
Nous pouvons utiliser le CSS basé sur la classe de couleur suivante mentionné ci-dessus. : bleu, gris, vert, violet rouge et 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>
Ici, remplacez la classe content-box-blue par la vôtre.
Petit code:
La plupart du temps, nous ne voulons pas basculer le mode éditeur vers HTML, nous pouvons donc simplement créer un shortcode et l’utiliser. Ajoutez ce qui suit dans functions.php de votre thème enfant.
// 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]