Thème Divi : créer des modèles (layouts) spécifiques pour des catégories

par Anne-Laure DELPECH | 5 Oct 2017 | développement web

Avec le thème Divi, objet des articles de cette série Utiliser le thème DIVI d’Elegant Themes, les pages de catégorie n’intègrent pas automatiquement les titres et descriptions de catégorie. J’ai exposé précédemment comment les intégrer automatiquement avec un modèle ‘category.php’. Mais il y a une autre solution, nettement plus pratique puisqu’elle intègre le générateur DIVI.

Cette solution vient de l’article « Personnaliser facilement votre page « Catégorie »« . Je l’ai appliquée comme telle. La seule différence de mon fichier category.php » est qu’il intègre aussi les modifications vues dans l’article Pages catégorie du thème Divi : ajouter titre et description.

<?php get_header(); ?>

<?php
// source https://www.tips02.fr/backstage/personnaliser-facilement-votre-page-categorie-customize-easily-you-category-page/

$cat = get_category( get_query_var( 'cat' ) );
$cat_slug = $cat->slug;
$the_cat_id = $cat->cat_ID;

$locale =  substr( get_locale(), 0, 2 );

switch ($locale) {
	case 'en':
		$my_cat = 'category';
		break;
	case 'it': case 'es':
		$my_cat = 'categoria';
		break;
	case 'de':
		$my_cat = 'kategorie';
		break;
	default:
		$my_cat = 'categorie';
}

$html = '';

	$args=array(
		'post_type' 		=> 'et_pb_layout',
		'post_name__in' 	=> array($my_cat . '-' . $cat_slug, $my_cat),
		'posts_per_page' 	=> 1,
		'orderby'			=> 'name',
		'order'				=> 'DESC',
	);
	$query = new WP_Query($args);
	if ($query->have_posts()) :
		//As I want to be sure that no category have been set (to avoid errors), I assure myself to "remove" it :).
		$html = str_replace('include_categories', 'unknown', $query->posts[0]->post_content);
		// Then I define it easily with the current category id :)...
		$html = str_replace('

				
				
				
				
				

					
			


				
														

													Gérer les redirections d’un site WordPress
											
				
					
par Anne-Laure DELPECH | Oct 12, 2017 | développement web
Nous allons voir ici comment utiliser l’extension Redirection dans un site WordPress pour faire des redirections 301 (permanentes) voire 302 (temporaires). 
			
			
				
			


				
														

													Une extension pour ajouter des fonctionnalités au thème Divi (WordPress)
											
				
					
par Anne-Laure DELPECH | Oct 8, 2017 | développement web, Plugin (extension) WordPress
Réalisation d’une extension pour Divi (WordPress) qui détecte automatiquement la palette de couleur du site et l’applique à l’éditeur de texte. 
			
			
				
			


				
														

													Thème Divi : créer des modèles (layouts) spécifiques pour des catégories
											
				
					
par Anne-Laure DELPECH | Oct 5, 2017 | développement web
Thème Divi : créer des modèles de page pour des catégories spécifiques ou un groupe de catégories. 
			
			
				
			


				
														

													Thème Divi : intégrer un shortcode à un modèle
											
				
					
par Anne-Laure DELPECH | Oct 5, 2017 | développement web
Création d’un shortcode dans un thème enfant de Divi. Ce shortcode peut ensuite être utilisé dans le module « Code » du générateur Divi. 
			
			
				
			


				
														

													Que faire si un modèle (ou un module) Divi ne se charge pas ?
											
				
					
par Anne-Laure DELPECH | Oct 5, 2017 | astuces rapides
Que faire lorsqu’un modèle ou module Divi ne se charge pas (on est bloqué sur une page avec un symbole indiquant qu’elle se charge) ?
			
			
				
			


				
														

													Un éclairage LED mixte
											
				
					
par Anne-Laure DELPECH | Oct 2, 2017 | DIY autres
 je présente le montage de la version définitive d’un coffret d’éclairage mêlant un ruban LED pour diffuser un éclairage doux et deux spots « liseuses ». 
			
			
				
			


				
														

													Menus WordPress : comment faire un lien vers un site externe correctement ?
											
				
					
par Anne-Laure DELPECH | Sep 29, 2017 | astuces rapides, développement web
On peut définir des liens personnalisés dans les menus WordPress. Mais comment faire pour qu’il s’ouvre dans un autre onglet et que l’utilisateur en soit averti (attributs de titre) ? 
			
			
				
			


				
														

													Thème Divi : ajouter un fil d’Ariane (breadcrumbs)
											
				
					
par Anne-Laure DELPECH | Sep 28, 2017 | développement web, Thèmes
Comment ajouter un « fil d’Ariane » (breadcrumbs en anglais) avec l’extension Yoast SEO pour permettre à tous les internautes et aux moteurs de recherche) de savoir où ils se situent dans un site web. 
			
			
				
			


				
														

													Pages catégorie du thème Divi : ajouter titre et description
											
				
					
par Anne-Laure DELPECH | Sep 23, 2017 | développement web
Tutoriel sur l’insertion automatique du titre et de la description de la catégorie dans un modèle de catégorie avec le thème Divi (WordPress). 
			
			
				
			


				
														

													Créer un thème enfant pour Divi (WordPress)
											
				
					
par Anne-Laure DELPECH | Sep 23, 2017 | développement web, Thèmes
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. 
			
			
				

	
« Entrées précédentes
	
Entrées suivantes »

				
				 ;

						et_divi_post_format_content();

						if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) {
							if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) :
								printf(
									'<div class="et_main_video_container">
										%1$s
									</div>',
									$first_video
								);
							elseif ( ! in_array( $post_format, array( 'gallery' ) ) && 'on' === et_get_option( 'divi_thumbnails_index', 'on' ) && '' !== $thumb ) : ?>
								<a href="<?php the_permalink(); ?>">
									<?php print_thumbnail( $thumb, $thumbnail["use_timthumb"], $titletext, $width, $height ); ?>
								</a>
						<?php
							elseif ( 'gallery' === $post_format ) :
								et_pb_gallery_images();
							endif;
						} ?>

					<?php if ( ! in_array( $post_format, array( 'link', 'audio', 'quote' ) ) ) : ?>
						<?php if ( ! in_array( $post_format, array( 'link', 'audio' ) ) ) : ?>
							<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
						<?php endif; ?>

						<?php
							et_divi_post_meta();

							if ( 'on' !== et_get_option( 'divi_blog_style', 'false' ) || ( is_search() && ( 'on' === get_post_meta( get_the_ID(), '_et_pb_use_builder', true ) ) ) ) {
								truncate_post( 270 );
							} else {
								the_content();
							}
						?>
					<?php endif; ?>

						</article> <!-- .et_pb_post -->
					<?php
						endwhile;

						if ( function_exists( 'wp_pagenavi' ) )
							wp_pagenavi();
						else
							get_template_part( 'includes/navigation', 'index' );
				else :
					get_template_part( 'includes/no-results', 'index' );
				endif;
			endif; /* Categorie */
			?>

<?php if ( $html == '' ) : ?>
			</div> <!-- #left-area -->
			<?php get_sidebar(); ?>
		</div> <!-- #content-area -->
	</div> <!-- .container -->
<?php endif; ?>

</div> <!-- #main-content -->

<?php get_footer(); ?>

Le principe de fonctionnement

Maintenant je dispose de trois possibilités pour l’affichage et le contenu des pages de catégorie :

1. option 1 : définir une esthétique et un contenu spécifique, pour un groupe de catégories ;
2.  option 2 : définir une esthétique et un contenu spécifique à une catégorie donnée ;
3. option 3 : affichage par défaut de WordPress, (avec ajout du titre de la catégorie et sa description si l’on a fait comme dans l’ article Pages catégorie du thème Divi : ajouter titre et description) .

Affichage défini pour un groupe de catégories

Cet affichage se fera si j’ai créé un modèle Divi intitulé « catégorie » (voir plus bas le chapitre « création de modèles de catégorie), et que la catégorie est cochée dans le paramètre « Inclure les catégories: » du module de blog inséré dans le modèle.

On n’a pas d’obligation de créer un tel modèle, on peut décider de définir des modèles spécifiques pour chaque catégorie ou décider de créer des modèles spécifiques pour certaines catégories et laisser l’affichage par défaut pour les autres.

Affichage spécifique à une catégorie donnée

Cet affichage se fera si j’ai créé un modèle Divi intitulé « catégorie identifiant de la catégorie » et que la catégorie a un identifiant « identifiant-de-la-categorie » (voir plus bas le chapitre « création de modèles de catégorie).

Affichage par défaut

Ce sera l’affichage défini par category.php et style.css du thème enfant. Il s’appliquera à toute catégorie qui ne dispose par d’un modèle spécifique (option 2) ou qui n’est pas explicitement définie dans le paramètre « Inclure les catégories: » du modèle générique (option 1). Par exemple, la page de catégorie suivante n’est définie ni par le modèle générique, ni par un modèle spécifique, elle s’affiche ainsi pour un internaute :

Affichage standard d’une page de catégorie

Création de modèles de catégorie

Création d’un modèle pour un groupe de catégories (l’option 1)

Il n’est pas obligatoire de créer ce modèle pour que l’option 2 puisse fonctionner.

Dans la bibliothèque Divi, je crée un modèle intitulé « catégorie » et j’y place au moins un module de blog. Dans les paramètres du module de blog, l’option « Inclure les catégories: » doit cocher les catégories pour lesquelles je veux que cette disposition s’applique.

Par exemple, mon modèle « catégorie » contient les modules suivants (j’explique le fonctionnement (optionnel) du module « code » plus bas dans ce long article) :

Contenu du modèle Divi pour un groupe de catégories

Dans le module Blog, j’ai défini le style en mode « grille » et les catégories suivantes sont cochées :

Si un internaute affiche la page de catégorie « réussir le changement » , il verra :

Affichage selon le modèle d’un groupe de catégories

Création d’un modèle pour une catégorie spécifique (l’option 2)

Dans ce cas, un modèle de la bibliothèque Divi a pour nom « catégorie X Y Z », dans lequel X Y Z correspond à l’identifiant de la catégorie. Par exemple si j’ai une catégorie dont l’identifiant est premier-deuxieme-troisieme, le modèle a pour titre « catégorie premier deuxième troisième ». J’ai placé « catégorie » au début du titre puis j’ai écrit l’identifiant en remplaçant les – par des espaces et en mettant des accents (si je veux, pour plus de lisibilité).

Dans le modèle spécifique « catégorie manager équipe » qui s’appliquera à l’affichage d’une catégorie dont l’identifiant est « manager-equipe », j’ai défini le modèle, avec une barre latérale :

Contenu du modèle Divi de catégorie spécifique « catégorie manager équipe « 

Dans le paramétrage du module de blog, je n’ai coché aucune catégorie car ça ne sert à rien. Dans le style, j’ai défini le mode « plein écran » (liste).

La page de la catégorie « Manager son équipe » s’affiche selon le modèle « catégorie manager équipe » :

Affichage selon le modèle de catégorie spécifique « catégorie manager équipe « 

Insérer automatiquement un titre et une description dans un modèle Divi

Je tiens absolument à ce que le titre de la catégorie s’affiche en haut de la page de catégorie, même lorsqu’un modèle est utilisé. Et dans certains cas, je souhaite que la description soit également présente.

J’ai créé un shortcode pour ça (cf article Thème Divi : intégrer un shortcode à un modèle). Voici son fonctionnement dans les modèles de page de catégorie que j’ai créé :

Si je place [[cat_display title= »yes » centrer= »no » description= »yes »]] dans le module « code » du modèle « catégorie » défini plus haut, j’obtiens une nouvelle mise en page. Maintenant la page de la catégorie « PME : adopter une stratégie durable » contient un titre et une description puis applique les règles du modèle d’un groupe de catégories :

Affichage selon le modèle d’un groupe de catégories, avec titre et description automatique

Sur un autre site, il y a un modèle de catégorie qui contient un « Blurb ».

Un modèle avec le module « Code » juste avant le module ‘Blurb »

Ce modèle s’applique à la catégorie dont l’identifiant est « devenir-une-star-de-son-business-categorie ».

Le titre défini dans le module « Code » juste avant le module « Blurb » s’intègre automatiquement dans le « Blurb » (je ne sais pas pourquoi…, mais c’est bien !). Comme les Blurb sont le plus souvent centrés, j’ai défini l’option centrer dans le shortcode. Ainsi pour cette catégorie spécifique, le titre (« devenir une star de son business »)   va automatiquement s’afficher dans le « Blurb » et sera centré comme le contenu du Blurb :

Affichage selon un modèle spécifique, avec titre intégré à un « blurb »

Et maintenant

Je pense que j’en ai terminé avec les ajustements liés aux pages de catégorie dans cette série Utiliser le thème DIVI d’Elegant Themes !

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

par Anne-Laure DELPECH | 23 Sep 2017 | développement web

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 Utiliser le thème DIVI d’Elegant Themes, 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 :

• Personnaliser facilement votre page « Catégorie »
• Add a Category Title and Description to your Divi Category Archive Pages

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 :

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.