Thème Divi : intégrer un shortcode à un modèle

Thème Divi : intégrer un shortcode à un modèle

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.

 

 

 

Que faire si un modèle (ou un module) Divi ne se charge pas ?

Que faire si un modèle (ou un module) Divi ne se charge pas ?

Il arrive que le modèle ou qu’un module Divi ne se charge pas. On est alors bloqué sur une page avec un symbole indiquant qu’elle se charge. Dans ce cas :

Aller dans le menu « tableau de bord » de WordPress puis cliquer tout en haut sur le menu « supprimer le cache »

WordPress : supprimer le cache

WordPress : supprimer le cache

Si même ça ne fonctionne pas, aller dans Apparence >> Thèmes, activer le thème parent (Divi), vérifier que le modèle se charge puis retourner dans Apparence >> Thèmes, activer le thème enfant de nouveau.

Et maintenant, les modèles ou modules se chargent de nouveau.

Si ça ne suffit pas, suivre les instructions de l’article « How to fix Divi Builder modules not opening/loading or Timeout Issue« .

Thème Divi : ajouter un fil d’Ariane (breadcrumbs)

Thème Divi : ajouter un fil d’Ariane (breadcrumbs)

Le thème Divi, objet des articles de cette série , ne permet pas d’ajouter un « fil d’Ariane » (breadcrumbs en anglais) pour permettre à tous les internautes de savoir où ils se situent dans un site web. J’explique ici comment utiliser une fonctionnalité de l’extension Yoast SEO pour afficher un fil d’Ariane sur les pages (toutes ou une partie) d’un site.

Sloopng / Pixabay

Pourquoi mettre un « fil d’Ariane » ?

Imaginez que vous visitez un nouveau site. Au gré des liens que vous suivez, vous pouvez vite être complètement perdu. Dans ce cas, vous pouvez parfois être sauvés par les menus de navigation, s’ils vous paraissent cohérents.

Dans d’autres cas, vous remarquerez le fil d’Ariane (ou breadcrumbs) qui vous permettra de comprendre la position de la page actuelle dans la hiérarchie du site. Evidemment, cela ne vous aidera que si la structuration du site vous paraît également cohérente.

En l’absence d’un fil d’Ariane, il est fort probable que vous quitterez ce site en pensant que son auteur est vraiment très désorganisé !

En plus, le fil d’Ariane peut aussi permettre aux robots des moteurs de recherche de mieux comprendre la structure d’un site, et donc de mieux l’indexer.

Comment intégrer un fil d’Ariane lorsque le thème ne le prévoit pas ?

Ma solution utilise l’extension Yoast SEO, mais vous pouvez aussi utiliser Breadcrumb NavXT, selon cet article (en anglais) qui m’a servi de référence.

Régler l’extension Yoast SEO

Dans le tableau de bord WordPress, menu SEO, menu Avancé, onglet « Fils d’Ariane : activer le fil d’Ariane. De nombreux paramètres peuvent alors être réglés :

Yoast SEO : réglage du fil d'Ariane

Sur cette partie des réglages, la seule chose que j’ai modifié, c’est le texte d’ancrage pour la page d’accueil. A la place de « Accueil », j’ai placé : <span class= »dashicons dashicons-admin-home »> </span>. Maintenant mon fil d’Ariane démarre par une sympathique icone de maison et ça me semble beaucoup plus facile de comprendre à quoi sert cette ligne.

Cocher « Afficher la page de blog » est une astuce de Yoast SEO pour bien montrer la position du blog dans la structure générale du site. Je l’ai laissé comme c’est proposé par défaut.

Dans la deuxième partie des réglages de Yoast SEO, on trouve deux éléments :

  • Taxonomie à afficher dans le fil d’Ariane pour les types de contenu : pour les articles, j’ai indiqué « catégorie ». Mon fil d’Ariane devient très long (ici j’ai tronqué le titre de l’article) :

Fil d'Ariane avec catégorie

  • Type de contenu d’archive à afficher dans le fil d’Ariane pour les taxonomies : je n’ai pas essayé de régler autrement (pas sur « aucun ») car je n’utilise pas les taxonomies indiquées.

Une fois ces réglages effectués le thème Divi n’affiche pas les fils d’Ariane ! Il faut maintenant aller modifier le thème enfant.

Modifier le thème enfant pour intégrer le fil d’Ariane

Mon site WordPress utilise un thème enfant de Divi, thème enfant que j’ai créé (j’explique ici comment). Evidemment, il ne faut en aucun cas faire les modifications qui suivent directement dans un thème parent !

Comme je veux que le fil d’Ariane figure sur l’ensemble des pages du site, j’ai copié le fichier header.php  de  /wp-content/themes/Divi  (thème parent) et je le place dans /wp-content/themes/clea-divi-child  (mon thème enfant).

Tout en bas de header.php  du thème enfant, en dessous de la ligne <div id= »et-main-area »> , j’ai ajouté le code suivant, comme indiqué dans  cet article (en anglais).

<!-- #main-header -->
<?php if(function_exists('yoast_breadcrumb') && !is_front_page()) {
	echo '<div class="container">';
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
	echo '</div>';
} ?>

Maintenant le fil d’Ariane apparaît sur toutes les pages. Je fais quelques ajustements de style en ajoutant dans le fichier style.css  du thème enfant les éléments suivants :

/* --- Yoast breadcrumbs inserted in header.php --- */
 #breadcrumbs{ 
	width: 100%; 
	margin-top: 1rem ;
	font-size: 0.9rem;
}

Et voilà, j’ai terminé.

A vous maintenant !

Pages catégorie du thème Divi : ajouter titre et description

Pages catégorie du thème Divi : ajouter titre et description

Par défaut, les pages de catégorie du thème Divi n’affichent ni le nom de la catégorie, ni le descriptif que l’on a défini lorsqu’on a créé la catégorie. Dans cet article de la série , nous allons voir comment générer automatiquement ce texte avant l’affichage de la liste des articles de la catégorie.

Créer un thème enfant avant de démarrer

Voir les instructions dans l’article « Créer un thème enfant pour Divi (WordPress)« .

Créer un modèle (template) pour les pages de catégorie

Pour faire ça, je suis partie des idées de ces deux articles :

Créer un fichier category.php

Télécharger le fichier index.php  de /wp-content/themes/Divi et le placer dans le répertoire du thème enfant (pour moi /wp-content/themes/clea-divi-child), puis le renommer category.php .

Pour vérifier qu’il fonctionne, on peut ajouter la ligne

<h2>NOUVEAU template pour les catégories</h2>

en dessous de la ligne

<div id="content-area" class="clearfix">

Lorsqu’on affiche une page de catégorie, on voit effectivement ce titre. Je suis donc certaine que mon fichier category.php est utilisé lors de l’affichage d’une page de catégorie.

Ajouter le titre et la description de la catégorie

J’ai ajouté les éléments des lignes 10 à 19, au début du fichier category.php :

<?php get_header(); ?>

<div id="main-content">
	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">
		
		<?php 
			if ( have_posts() ) : ?>
			
				<!-- Display category title and description -->
				<header class="archive-header">
					<h1 class="archive-title"><?php single_cat_title( '', true ); ?></h1>

					<!-- Display optional category description -->
					<?php if ( category_description() ) : ?>
					<div class="archive-meta"><?php echo category_description(); ?></div>
					<?php endif; ?>
				</header>
			
		<?php
				while ( have_posts() ) : the_post();

single_cat_title(  », true );  indique qu’il faut afficher le titre de catégorie (true) et ne pas lui ajouter de texte avant ( »).

echo category_description() ;  va afficher la description de la catégorie telle qu’elle a été saisie en définissant la catégorie (menu articles >> catégories).

Maintenant, lorsque j’affiche une page de catégorie, j’ai bien son titre et sa description avant la liste des articles de cette catégorie.

Changer le style de la description

Dans le fichier style.css, j’ajoute :

.archive-meta {
	margin-bottom: 2%;
	font-style: italic;
}

Et maintenant la description est correctement séparée de la liste des articles, et le texte de la description est en italique :

Divi : insertion titre et description de catégorie

Insérer automatiquement le titre et la description de la catégorie dans une page catégorie avec Divi pour WordPress

Rendre visible les liens vers les catégories

Divi prévoit que toutes les méta descriptions des articles restent dans la couleur choisie pour le texte (ici un noir). Mais je veux que les liens vers les catégories soient plus visibles, comme dans la copie d’écran ci-dessus, où la catégorie « Vivre ses rêves » est en orange et pas en noir.

Dans la feuille de style, j’ajoute un style pour les liens vers des catégories (a[rel= »category tag »] ) :

#left-area .post-meta a[rel="category tag"] {
	color: #ed693b;
}

Et maintenant ?

Mon thème enfant fonctionne et modifie le thème parent Divi comme je le souhaitais.

Dans un autre article de cette série, j’explique comment créer des modèles de pages de catégories avec le générateur DIVI, en ayant un modèle générique et des modèles spécifiques à certaines catégories.

Créer un thème enfant pour Divi (WordPress)

Créer un thème enfant pour Divi (WordPress)

J’ai besoin de modifier des fichiers (php et css) du thème Divi. Je crée donc un thème enfant qui me permettra de faire ces modifications sans toucher au thème Divi et en maintenant sa capacité à se mettre à jour. Dans cette article de la série , j’explique comment s’organiser et créer ce thème enfant.

La situation initiale

Je suis sur un site de test, avec le thème Divi que j’ai déjà largement réglé. Bon nombres d’éléments de la personnalisation et des options du thème ont été modifiés. J’ai aussi réglé des barres latérales avec des widgets.

Il va donc falloir que je conserve tous ces ajustements.

Créer un thème enfant

Normalement, pour créer un thème enfant, il suffit de créer un répertoire dans wp-config/themes/ et d’y placer un fichier style.css contenant au moins un nom (theme name) et indiquant que c’est un thème enfant de Divi (Template: Divi) :

/*---------------------------------------------------------------------------------

 Theme Name:   LE NOM DU THEME
 Theme URI:    
 Description:  A child theme for Divi
 Author:       Anne-Laure
 Author URI:   https://knowledge.parcours-performance.com/
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

*/

/* On peut mettre du CSS additionnel à partir d'ici */

Mais je ne connais pas encore bien Divi, et j’ai vu qu’il existait un site « constructeur de thème enfant pour Divi ». Alors j’ai essayé.

Je suis donc allée sur la page du « Divi child theme builder » du site divi.space.

J’ai rempli les lignes du formulaire puis téléchargé le fichier zip.

En regardant le contenu des fichiers, j’ai constaté que login-editor.php  contient des éléments qui modifient la personnalisation de la page de login du site. J’ai décidé de laisser ce fichier, et l’instruction qui le requiert dans functions.php. Mais on peut certainement les supprimer.

Ensuite, j’ai installé le fichier zip sur le site mais je ne l’ai pas activé tout de suite.

Sauvegarder les réglages du thème parent

Avant d’activer le thème enfant, sauvegarder les fichiers de réglage de divi, comme indiqué dans l’article Importer et exporter des paramètres et modèles du thème Divi pour WordPress, (uniquement ce qui concerne la personnalisation et les options du thème).

Pour les widgets placés dans des barres latérales (les « sidebars » qui peuvent aussi être en dessous ou au dessus !), je ne sais pas comment les récupérer automatiquement. Il faut donc faire des copies d’écran et de contenus…

MAJ du 28/09/2017 pour exporter les réglages de widgets :

pour les widget, utiliser l’extension Widget Settings Importer/Exporter. Attention, toutes les extensions utilisées pour générer des éléments des widgets doivent avoir été activées au préalable et réglées si nécessaire.

Ensuite dans le tableau de bord WordPress, menu outils, on a Widget Settings Import et export.

On peut choisir ce que l’on exporte. On obtient un fichier widget_data.json  que l’on sauvegarde. Ensuite on pourra importer ce fichier. Ca marche parfaitement pour moi.

Activer le thème enfant puis le régler

J’active le thème enfant puis j’mporte la personnalisation et les options du thème Divi que j’ai sauvegardé.

Je recrée les barres latérales à la main ou par importation avec  l’extension Widget Settings Importer/Exporter.

Et ça y est, on a un thème enfant fonctionnel !

Et maintenant ?

Dans le prochain article de cette série , je modifie Divi grâce à mon thème enfant : je crée un nouveau modèle (template) pour les pages de catégories et j’ajoute un style spécifique.