Pierre

18 avril 2019
w

Des questions ?

Besoin de prendre contact, de présenter votre projet ?

w

Contactez-moi !

Je serai heureux de répondre à toutes vos questions.

Contact

Révéler le contenu d’un module texte Divi au clic

Codage, Divi

Une méthode simple pour permettre à un module texte de Divi avec une légère transparence d'afficher / masquer son contenu au clic de la souris.
Couleurs

Le contexte

Pour les besoins d’un client, j’ai adapté des petits morceaux de code pêchés à droite-à-gauche (dont une partie grâce à Pierre Bichet dans son article « Les effets de transformations et de survol dans Divi » pour la transparence) ceci dans le but d’afficher le début d’un texte avec une légère transparence et affichage de la totalité du contenu au clic d’un bouton (ou d’un lien).

Le fonctionnement

La méthode

Pour faire fonctionner ce code, cela devrait prendre 5 à 10 minutes. J’espère que vous avez déjà pris comme habitude de créer un thème enfant (ce que je vous suggère de faire systématiquement) :). Sinon il vous faudra en créer un…

  • Commencez par définir la classe « degrade close » au module texte sur lequel vous souhaitez appliquer l’effet, Pour cela, rendez vous sur l’onglet « Avancé » de votre module, dans le champ « Classe CSS« 
  • ajouter le shortcode dans le contenu de votre texte. Exemple : [expand]Le texte que vous souhaitez masquer en partie[/expand]

Le code php (à ajouter dans le fichier « functions.php » de votre thème enfant) :

function expand_shortcode($atts, $content = null) {
$default_class = "bouton bg-bleu";
$a = shortcode_atts( array(
	'more'  => 'Plus d\'infos',
	'less'  => 'Moins d\'infos',
	'class' => '',
	'style' => '',
), $atts );
$html='<div class="hide">'.$content.'</div>
	<div class="exp-wrappper">
		<span data-more="'.$a['more'].'" data-less="'.$a['less'].'" class="exp-button '.$default_class.' '.$a['class'].'" style="'.$a['style'].'">'.$a['more'].'</span>
	</div>';
	
	return $html;
}
add_shortCode('expand', 'expand_shortcode');

le code CSS (à ajouter dans le fichier « style.css » de votre thème enfant) :

/* Bouton expand */
.hide {
	display:none;
}
.degrade {
	transition:background-color 1300ms ease 0ms,border 1300ms ease 0ms;
}
.degrade.close > *:after {
	content:"";
	position:absolute;
	top:0;
	display:block;
	width:100%;
	height:calc(100% - 36px);
	background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 92%);
}
/* Personnalisation des classes utilisées, ajouter/modifier les vôtres ici ;) */
.bouton {
	display:block;
	max-width:150px;
	cursor:pointer;
	padding:4px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	text-align:center;
	color:#fff;
	margin-top:20px;
	transition: background-color 300ms ease 0ms,border 300ms ease 0ms;
}
.bouton:hover {
	box-shadow:1px 1px 10px 0px rgba(0,0,0,0.3);
}
/* Ici j'utilise des boutons avec des couleurs de fond orange et bleu ;) */
.bg-orange {
	background:#dd6529;
}
.bg-orange:hover {
	background:#ff5500;
}
.bg-bleu {
	background:#4363c8;
}
.bg-bleu:hover {
	background:#2e5ff9;
}
/* */

Le code Javascript (à ajouter dans le fichier « common.js » du sous répertoire « js » de votre thème enfant) :

jQuery(document).ready(function($){
	$(".exp-button").click(function () {
		var lessName = $(this).attr('data-less');
		var moreName = $(this).attr('data-more');
		var duree = 1000;
			if($(this).text()==moreName) {
			$(this).text(lessName);
			$(this).parent().prev().slideDown(duree);
		}
		else {
			$(this).text(moreName);
			$(this).parent().prev().slideUp(duree);
		}
		var x = setTimeout(() => $(this).closest('.degrade').toggleClass('close'), duree);
	});

});

Pour le code javascript ci-dessus, vous avez 2 solutions :

  1. Soit l’ajouter dans les options Divi > Intégration > Ajouter code au bas de l’article, avant les commentaires,
  2. Soit l’ajouter proprement en l’intégrant dans un fichier séparé (méthode que je préfère personnellement) en commençant par créer un répertoire nommé « js » sous le dossier de votre thème enfant et en plaçant un fichier « common.js » qui va contenir toutes les fonctions javascript que vous utiliserez sur votre site dont celle ci-dessus. Pour cela il faudra rajouter une ligne supplémentaire après le chargement de votre feuille de style dans votre fichier « functions.php« 
function my_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_script( 'common-scripts', get_stylesheet_directory_uri() . '/js/common.js', array(), null, true );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

La personnalisation

Vous pouvez personnaliser l’affichage de votre shortcode en définissant une ou plusieurs classes supplémentaires ainsi que des attributs de style.
Exemple : [expand class=’aligncenter’ style=’color:red;’]Le texte que vous souhaitez masquer en partie[/expand]
Ainsi votre « bouton » sera aligné au centre et son texte sera rouge ;). Je vous laisse le soin d’imaginer toutes les formes de personnalisation possibles.

Conclusion

Bon, je sais que ça peut paraître compliqué, mais ne vous en faites pas c’est simple et une fois que vous aurez goûté à ce type d’implémentation « segmentée », vous ne pourrez plus vous en passer 🙂 !

En effet avec ce type de « procédure », on a plusieurs avantages :

  1. Une meilleure lisibilité du code. Chaque type de code est rangé proprement dans un tiroir :
    • Le php dans functions.php
    • Le CSS dans la feuille de styles
    • Le Javascript dans un fichier Javascript :).
  2. La portabilité. Il est plus simple de venir « repiquer » une portion de code dans chacun des types de fichiers que de se rappeler et chercher où on les avait placer.
  3. L’optimisation en terme de chargement de page (et aussi un peu en SEO). En effet les fichiers CSS et JS se concatènent très bien avec des plugins de cache comme Swift, WP-Rocket ou encore Autoptimize.
    Donc moins de requêtes et donc meilleurs temps de chargement CQFD :)…

Voilà, amusez-vous bien et sans prétention aucune, forcez-vous à vous « éduquer » :). Vous verrez qu’à terme c’est plus gratifiant et un grand bénéfice de bosser « proprement » 😀 !!

Information : Utilisateur convaincu depuis de nombreuses années par ce thème, je suis inscrit en tant qu’affilié sur le site d’elegant themes. Ainsi en cliquant sur le logo ci-dessous, vous bénéficierez d’une remise de 10% sur l’achat du thème et si vous l’achetez, je recevrai une commission :).

0 commentaires