Avec Divi, il est possible d’utiliser le module « Code » pour insérer des shortcodes dans un modèle. Ici, j’ai créé un shortcode pour pouvoir afficher automatiquement le titre et la description d’une catégorie.

Créer un thème enfant

On ne fait évidemment aucune modification du thème Divi puisqu’elle serait effacée en cas de mise à jour. On crée donc un thème enfant, comme indiqué dans « Créer un thème enfant pour Divi (WordPress) ».

Ce que je veux obtenir

Je veux pouvoir afficher automatiquement le titre d’une catégorie et sa description dans des modèles de catégorie.

Je veux que [[cat_display title= »yes » centrer= »yes » description= »yes »]] définisse que :

  • oui, il faut aller chercher le nom de la catégorie et l’afficher ;
  • oui, il faut centrer le titre sur la page
  • oui, il faut aller chercher la description de la catégorie et l’afficher.

Le code

Dans functions.php du thème enfant, j’ai ajouté le code suivant :

/***** My shortcode with parameters for category title and description ***********/
// 	[cat_display title="yes" centrer="yes" description="yes"] will display both category and description
// source https://developer.wordpress.org/plugins/shortcodes/shortcodes-with-parameters/

function cdc_cat_title_desc_shortcode( $atts = [], $content = null ) {
    // normalize attribute keys, lowercase
    $atts = array_change_key_case((array)$atts, CASE_LOWER);
 
    // override default attributes with user attributes
    $wporg_atts = shortcode_atts( [
        'title' 		=> 'yes',
	'centrer'		=> 'yes',
	'description' 	=> 'yes',
    ], $atts );
 
	// start output
    $o = '';
 
    // start box
    $o .= '<header class="archive-header">';
 
    // title
	if ( "yes" == $wporg_atts['title'] ) {
			
			if ( "yes" == $wporg_atts['centrer'] ) {
				$o .= '<h1 class="entry-title main_title" style="text-align:center;">' . single_cat_title( '', false ) . "</h1>";
			} else {
				$o .= '<h1 class="entry-title main_title">' . single_cat_title( '', false ) . "</h1>";
			}
	} else {
		$o .="";
	}

	if ( "yes" == $wporg_atts['description'] ) {
		    $o .= '<div class="archive-meta">' . category_description() . "</div>";
	} else {
		$o .="";
	}
 
    // end box
    $o .= '</header>';
 
    // return output
    return $o;
	

}
 
add_shortcode('cat_display', 'cdc_cat_title_desc_shortcode');

La dernière ligne,add_shortcode(‘cat_display’, ‘cdc_cat_title_desc_shortcode’); , définit que lorsque le shortcode [[cat_display]] est repéré, il faut exécuter la fonction cdc_cat_title_desc_shortcode.

Dans cette fonction,

  • Je précise que je me suis inspirée de cette page pour créer la fonction : Shortcodes with Parameters ;
  • $atts = array_change_key_case((array)$atts, CASE_LOWER);  évite les anomalies liées à des « yes » contenant des majuscules ;
  • Les lignes $wporg_atts = shortcode_atts( [   … ], $atts );  indiquent les différents paramètres applicables et leurs valeurs par défaut (yes) ;
  • $o contient le html qui devra être inséré dans le modèle. Ici il prendra une valeur différente selon la valeur des paramètres.

Maintenant, je peux utiliser ce shortcode comme je le souhaite, et en particulier dans un module « code » de Divi.

L’utilisation de ce shortcode

J’explique comment l’utiliser dans l’article sur les modèles Divi pour l’affichage de pages de catégorie : Thème Divi : créer des modèles (layouts) spécifiques pour des catégories.

 

 

 

Print Friendly, PDF & Email
4 1 vote
Évaluation de l'article
0
Nous aimerions avoir votre avis, veuillez laisser un commentaire.x