Sélectionner une page


Dans mon article précédent, je vous ai montré comment faire Afficher toutes les mises en page enregistrées dans une bibliothèque Divi en tant que pied de page global simplement en ajoutant une fonction dans le fichier functions.php. Prenons cette méthode un peu plus loin. Dans ce didacticiel, je vais vous montrer comment utiliser les balises conditionnelles WordPress pour afficher différentes mises en page sur différentes pages. Nous pourrons créer une belle zone d’en-tête pour les catégories de blog.

Générateur de thèmes Divi

Elegant Themes a déjà annoncé qu’il travaillait sur le « Theme Builder » que nous pouvons utiliser le Divi Builder pour concevoir chaque pixel de notre site Web. Une fois disponible, vous n’aurez plus besoin de cette technique, mais d’ici là …

Balises conditionnelles WordPress

Les balises conditionnelles sont une excellente fonctionnalité WordPress qui nous permet d’afficher différents types de contenu sur une page donnée en fonction des conditions que cette page remplit. Une balise conditionnelle vérifie simplement si une certaine condition est remplie et renvoie true ou false. Ils fonctionnent généralement avec des instructions conditionnelles PHP if / else. Une liste de toutes les balises disponibles se trouve dans le Codex WordPresset nous allons examiner de plus près certains d’entre eux dans ce didacticiel.

Exemple de base:

<?php
if ( is_front_page() ) {
// do something
}
?>

Exemples utiles de balises conditionnelles:

  • est à la maison() – Renvoie true si la page principale du blog est affichée. Si vous souhaitez afficher une page statique sous Paramètres -> Lecture, cette balise renvoie la valeur «true» pour la page «Posts».
  • is_front_page () – Renvoie vrai si l’avant du site Web est affiché. Cela peut être une page de messagerie ou une page statique.
  • est célibataire () – renvoie vrai pour chaque type de message individuel.
  • is_page () – Renvoie true si une page (page de type post) est affichée.
  • is_page (99) – Renvoie vrai si une page avec l’ID 99 est affichée.
  • is_page (‘page d’exemple’) – Renvoie true si une page avec le slug « page d’exemple » est affichée.
  • is_page (‘page d’exemple’) – Renvoie vrai si une page intitulée « Page d’exemple » est affichée.
  • is_category () – Renvoie vrai si une page d’archive de catégorie est affichée.
  • is_category (99) – Renvoie vrai si une catégorie avec l’ID de page d’archive 99 est affichée.
  • is_category (‘exemple de catégorie’) – Renvoie vrai si une catégorie est affichée avec la page d’archive « Exemple de catégorie ».
  • is_category (‘exemple de catégorie’) – Renvoie true si une catégorie nommée Page d’archive « Sample Category » est affichée.
  • is_tag () – renvoie true si une page d’archive de balises est affichée.
  • is_author () – Renvoie true si une page d’archive d’auteur est affichée.
  • is_search () – Renvoie true si une archive des pages de résultats de recherche est affichée

Parfois, nous devons faire quelque chose sur chaque page sauf une, ou dans chaque catégorie sauf une. Le ! aidera (le point d’exclamation est un Opérateur logique PHP pour ne pas »). Jetez un œil à ce code:

<?php
if ( !is_page(99) ) {
// do something everywhere except for the page with the ID 99
}
?>

Modifier les pages de catégories du blog Divi

Si vous avez un blog Divi avec plusieurs catégories, vous souhaiterez peut-être afficher des en-têtes différents pour chaque catégorie. Habituellement, nous ne pouvons pas modifier cette partie de la page, mais nous pouvons l’utiliser et_before_main_content Crochet de modèle Divi pour afficher notre mise en page juste entre la navigation supérieure et la liste des articles de blog.

Tout ce qui compte, c’est que votre mise en page soit enregistrée dans la bibliothèque Divi.

Ressources gratuites pour les amoureux de Divi

Inscrivez-vous à notre newsletter pour recevoir les bonnes choses!

Nous vous tiendrons au courant des nouveaux didacticiels, des ressources de conception Web et des offres spéciales. Obtenez des goodies Divi de haute qualité directement dans votre boîte de réception! Lisez notre Politique de confidentialité pour savoir comment nous gérons et protégeons vos informations soumises.

Inscrivez-vous pour télécharger

Accédez à cette mise en page et à toutes les ressources gratuites créées exclusivement pour nos abonnés!

Déjà inscrit?

Remplissez le formulaire d’inscription et si vous êtes sur la liste, vous serez directement redirigé vers la page de téléchargement!

Configuration des mises en page

Nous devons créer des conceptions d’en-tête distinctes et enregistrer chacune d’elles sous une mise en page distincte dans la bibliothèque Divi. Dans mon exemple, une mise en page supplémentaire est utilisée pour la page principale du blog. C’est la page que vous choisiriez comme « Page de publication » dans votre tableau de bord WordPress sous « Paramètres -> Lecture ». J’ai 5 catégories sur mon exemple de blog et 6 mises en page à enregistrer dans la bibliothèque Divi.

Afficher les mises en page Divi avec une coche de modèle

Divi est livré avec des modèles de hooks (filtres et actions) qui nous permettent d’ajouter du code personnalisé à différentes parties du site sans avoir à modifier les fichiers de modèle. Vous voudrez peut-être lire ces instructions par SJ James de Divi.Space explique le fonctionnement des hooks. Vous pouvez vérifier tous les hooks de modèle disponibles dans le Page de documentation Divi.

Dans cet exemple, nous utilisons le et_before_main_content Crochet d’action qui est déclenché après l’en-tête avant la sortie du contenu principal. C’est le moment idéal pour placer un design Aheader personnalisé.

Ajouter une fonction à functions.php

Nous devons ajouter une fonction au fichier functions.php de notre rubrique enfant. Voici le code que j’ai utilisé:

function dl_blog_headers() {
	if ( is_category('travel')) {
		echo do_shortcode('[et_pb_section global_module="13318"][/et_pb_section]');
	}
	elseif ( is_category('beauty')) {
		echo do_shortcode('[et_pb_section global_module="13355"][/et_pb_section]');
	}
	elseif ( is_category('health')) {
		echo do_shortcode('[et_pb_section global_module="13358"][/et_pb_section]');
	}
	elseif ( is_category('food')) {
		echo do_shortcode('[et_pb_section global_module="13359"][/et_pb_section]');
	}
	elseif ( is_category('fashion')) {
		echo do_shortcode('[et_pb_section global_module="13356"][/et_pb_section]');
	}
	elseif ( is_home()) {
		echo do_shortcode('[et_pb_section global_module="13359"][/et_pb_section]');
	}
}
add_action('et_before_main_content', 'dl_blog_headers');

C’est ça!

Cette fonctionnalité montre simplement différentes mises en page sur différentes pages de catégorie. Assurez-vous de remplacer vos ID de mise en page et vos slugs de catégorie (vous pouvez utiliser des slugs, des noms de catégorie ou des ID de catégorie).
Vous pouvez vérifier la mise en page, la catégorie ou l’identifiant de la page dans la barre d’adresse du navigateur lors de la modification de cet élément (c’est dans cette partie de l’url:… / wp-admin / post.php? Post =999…).

Si vous êtes notre abonné, n’hésitez pas à le faire Télécharger les dispositions d’en-tête de catégories que j’utilise sur la mienne Exemple de page de démonstration.

D’autres idées?

Veuillez partager toute autre modification de vos sites Web Divi que vous avez pu apporter en utilisant cette méthode. J’aimerais tout savoir sur les différentes manières d’utiliser Divi Hooks et la logique conditionnelle. Et si vous avez des questions ou souhaitez que je crée des tutoriels similaires avec différents cas d’utilisation, faites-le moi savoir dans les commentaires!





Source link

Recent Posts