Sélectionner une page


Bonjour,

Voici un tutoriel sur Utilisation de «hooks» WordPress pour insérer des mises en page de constructeur dans l’en-tête Divi. Car depuis Divi 3.1 (Special Developper Edition), Elegant Themes a ajouté quelques hooks utiles dans le code source de Divi.

Ces crochets sont très puissants car ils vous permettent de le faire dynamique Remplacez ou ajoutez du code PHP à certains endroits sans avoir à modifier les fichiers de modèle comme header.phpet sans avoir à vous soucier des futures mises à jour de Divi.

Crochets d’en-tête Divi

Puisque c’est un en-tête, regardons ça header.php Fichier dans le répertoire racine de Divi. Vous y trouverez trois crochets très intéressants …

1. Crochet de filtre de tige supérieure

/**
 * Filters the HTML output for the top header.
 *
 * @since ??
 *
 * @param string $top_header
 */
echo apply_filters( 'et_html_top_header', $top_header );

UNE « Filtre » Avec hook, nous pouvons filtrer une chaîne. Dans ce cas, la chaîne contient le code HTML généré pour la barre supérieure de Divi (celui affichant le numéro de téléphone, l’adresse e-mail et le menu secondaire).

Pour être honnête, je n’aime vraiment pas cette barre supérieure, donc je la redessine généralement en utilisant CSS. Maintenant, nous pouvons faire mieux: nous le remplacerons par un mise en page de constructeur personnalisée que nous avons précédemment enregistré dans la bibliothèque Divi.

Notez que ce crochet de filtre s’applique uniquement aux menus standard, aux menus centrés ou aux menus centrés en ligne.

2. Crochet de filtre sur la barre de navigation (y compris le logo)

/**
 * Filters the HTML output for the main header.
 *
 * @since ??
 *
 * @param string $main_header
 */
echo apply_filters( 'et_html_main_header', $main_header );

Même type d’hameçon, mais celui-ci s’applique à ça Code HTML généré du menu d’en-tête, y compris le conteneur de logo, qu’il soit centré au-dessus du menu ou non.

Je n’utiliserai pas ce filtre aujourd’hui car je veux laisser le menu principal inchangé, mais le principe est le même que le crochet précédent.

Là encore, ce crochet de filtre s’applique uniquement aux menus standard, aux menus centrés ou aux menus centrés en ligne.

3. Avant le hook d’action de contenu

/**
 * Fires after the header, before the main content is output.
 *
 * @since ??
 */
do_action( 'et_before_main_content' );

UNE « Action » Le hook agit comme un filtre, mais au lieu de remplacer une chaîne, il ajoute du code exécutable à l’emplacement spécifié. Ici c’est juste avant le contenu principal, sous le menu principal.

Modification d’en-tête avec des crochets

Cette adaptation d’en-tête se compose de deux parties:

  • disposition L’injection remplace la tige supérieure,
  • disposition Injection sous la barre de menu principale devant le contenu de la page.

Je ne vais pas remplacer la barre de menus elle-même, mais je cache le logo à l’aide de l’option de personnalisation. Le logo est ajouté à la mise en page de l’en-tête supérieur.

Remplacement de la tige supérieure

Exigence : Le filtre ne peut être utilisé que lorsque la barre supérieure est activée. Le moyen le plus simple de le faire est d’afficher les icônes de réseau social dans le personnalisateur de thème (en-tête). Ne vous inquiétez pas, toute la barre supérieure sera remplacée par votre en-tête supérieur.

Nous devons d’abord concevoir notre en-tête supérieur avec le constructeur et l’enregistrer dans la bibliothèque Divi. Par example:

Divi Header Builder ci-dessus

De retour à la page de la bibliothèque, nous pouvons vérifier les informations de la mise en page (« édition rapide »):

Informations principales sur Divi Header Builder

Le filtre peut maintenant être ajouté au crochet avec le bouton add_filter () Fonction API WordPress. Il remplace le code généré de toute la barre supérieure par le code de notre mise en page de constructeur en utilisant le do_shortcode () Une fonction.

Remarque pour les développeurs: En général, un filtre peut effectuer n’importe quel type de changement avec différentes substitutions pour la chaîne passée en paramètre de une fonction add_filter (), mais nous remplaçons simplement tout ici! Nous n’avons même pas besoin du paramètre.

Ajoutez ce code à votre sujet enfant functions.php Déposer:

/* Top bar replacement */
add_filter( 'et_html_top_header', 'top_header_layout' );
function top_header_layout() {
  $query = new WP_Query( array(
    'post_type' => 'et_pb_layout',
    'post_name__in' => array('top-header')
  ));
  return do_shortcode('
->ID . '"]
'); }

Ce code effectue une recherche dans la base de données avec le slug de mise en page pour obtenir l’ID de publication WordPress de la mise en page afin que nous n’ayons pas à le rechercher manuellement sur chaque site (voir capture d’écran ci-dessus).

Injection de mise en page sous la barre de menu principale

En ce qui concerne la barre supérieure, créons d’abord la mise en page. Il y aura une zone plein écran avec un menu personnalisé ici:

Générateur d'en-tête ci-dessous

Le lien « Modification rapide » sur la page de la bibliothèque affiche:

Informations inférieures du générateur d'en-tête

Cette fois, nous allons l’utiliser add_action () Fonction pour insérer le code sous le menu.

Ajoutez ce code à votre sujet enfant functions.php Déposer:

/* Below menu injection */
add_action( 'et_before_main_content', 'before_content_layout' );
function before_content_layout() {
  $query = new WP_Query( array(
    'post_type' => 'et_pb_layout',
    'post_name__in' => array('after-menu')
  ));
  echo do_shortcode('
->ID . '"]
'); }

Remarque pour les développeurs: Comme vous pouvez le voir, la fonction action ne renvoie pas une chaîne comme la précédente. Nous en utilisons un code exécutable ici et le écho function écrit le résultat de la fonction shortcode directement dans le fichier HTML généré.

Version du plugin

Si vous devez utiliser un plugin au lieu d’un thème enfant, ajoutez simplement un en-tête dédié aux codes précédents et enregistrez le fichier sous divi-builder-header.php::

<?php
/**
 * Plugin Name: Divi Builder Header
 * Plugin URI: https://pavenum.com/blog/
 * Description: Divi page header customisation.
 * Version: 1.0
 * Author: Yan Thiaudière
 * Author URI: https://pavenum.com
 * License: Free
 */

/* Top bar replacement */
add_filter( 'et_html_top_header', 'top_header_layout' );
function top_header_layout() {
  $query = new WP_Query( array(
    'post_type' => 'et_pb_layout',
    'post_name__in' => array('top-header')
  ));
  return do_shortcode('
->ID . '"]
'); } /* Below menu injection */ add_action( 'et_before_main_content', 'before_content_layout' ); function before_content_layout() { $query = new WP_Query( array( 'post_type' => 'et_pb_layout', 'post_name__in' => array('after-menu') )); echo do_shortcode('
->ID . '"]
'); }

Ensuite, il vous suffit de le «compresser» et votre plugin est prêt.

Code alternatif pour les accros de la performance

Comme je l’ai écrit plus tôt, je fais une recherche dans la base de données pour obtenir l’ID interne de la mise en page … Il y a deux raisons à cela:

  • Pour les biens, car je peux utiliser ces morceaux de code où je veux, quelle que soit l’installation de WordPress.
  • Ceci est obligatoire pour la version du plugin car le plugin ne peut pas connaître l’ID à l’avance!

Cependant, si vous souhaitez optimiser la vitesse de chargement des pages avec la version de conception enfant, en ignorant cette recherche dans la base de données, vous pouvez directement utiliser l’ID interne de la mise en page qui s’affiche dans la barre d’URL de la page d’édition de la mise en page.

Ensuite, le code avec ID = 999999 est:

/* Top bar replacement */
add_filter( 'et_html_top_header', 'top_header_layout' );
function top_header_layout() {
  return do_shortcode('
'); }

et

/* Below menu injection */
add_action( 'et_before_main_content', 'before_content_layout' );
function before_content_layout() {
  echo do_shortcode('
'); }

En-têtes fixes

Si vous utilisez une barre de navigation fixe, vous pouvez voir la mise en page collée apparaître après le menu principal et défiler avec le reste de la page.

Pour résoudre ce problème, vous devez ajouter l’ID CSS ‘# top-header’ à la section div.

Noter: Mais alors vous devrez probablement ajouter un peu de CSS pour concevoir votre texte car les règles CSS sont déclenchées dans la barre supérieure (principalement la taille du texte et la hauteur de la ligne).

Conclusion

Comme vous pouvez le voir, la personnalisation de Divi en ajoutant des hooks WordPress au code est amusante et facile.

Et avec cela vient plus Publication de sujets élégante à l’aide d’un contenu dynamique.

En attendant, amusez-vous à «accrocher» et à préparer vos mises en page pour un futur en-tête visuel!



Source link

Recent Posts