Ajouter des zones de contenu colorées sur votre site

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]