Sélectionner une page

Dans ce tutoriel, je vais vous expliquer pas à pas comment créer une page de résultats de recherche personnalisée pour Divi.

Démo

Par exemple, sur ma page de recherche de démo, j’ai créé un en-tête et juste au-dessus du pied de page, un appel à l’action pour l’abonnement.

Étape 1 créer le fichier search.php

Ouvrez le dossier de votre thème Divi, recherchez et copiez le fichier index.php. Collez ce fichier dans votre thème enfant et renommez-le en search.php.

Étape 2 créer les sections

Section d’en-tête ou de pied de page

Accédez à votre tableau de bord WordPress et accédez à Divi > Bibliothèque Divi

Cliquez sur « Ajouter un nouveau » et sous « Nom de la mise en page« , vous pouvez entrer n’importe quel nom. J’ai nommé cet en-tête « Entête recherche« .

Sous « Type de mise en page« , je choisis la section « Section en pleine largeur » puis stylez cette section à votre goût.

Divi : Comment créer une page de résultat de recherche personnalisée

Ouvrez les sections créées pour récupérer leur ID.

Divi : Comment créer une page de résultat de recherche personnalisée

Vous aurez besoin de ces chiffres à la prochaine étape.

Étape 3: ajoutez les sections et les lignes à votre page de résultats de recherche.

Ouvrez le fichier search.php créé à l’étape 1 avec votre éditeur préféré. Copiez et placez ce code en haut :

 

[pastacode lang= »php » manual= »%3C%3Fphp%0A%2F*%0ATemplate%20Name%3A%20Search%20Page%0A*%2F%0A%3F%3E » message= »Copiez et placez ce code en haut de la page search.php » highlight= » » provider= »manual »/]

Placez cette ligne de code juste sous le get_header();

[pastacode lang= »php » manual= »%3C%3Fphp%20echo%20do_shortcode(‘%5Bet_pb_section%20global_module%3D%22XXX%22%5D%5B%2Fet_pb_section%5D’)%3B%20%3F%3E » message= »Coller ce code juste avant le get_header(); de la page search.php » highlight= » » provider= »manual »/]

Remplacez le XXX par l’ID de votre section de l’étape 2,  c’est là que l’en-tête apparaîtra faite de même juste avant le get_footer(); pour votre section en pied de page si vous en avez créée une.

Étape 4: téléverser le fichier search.php

Téléversez ce fichier dans votre dossier de thème enfant via FTP. Si vous n’avez pas de dossier de thème enfant, vous devez en créer un.

Et voilà, vous avez une belle page de résultats de recherche personnalisée.

Sur ma page, en complément, je fais afficher le nombre de résultats trouvés avec l’ajout de ce morceau de code en tête de page :

[pastacode lang= »php » manual= »%24allsearch%20%3D%20new%20WP_Query(%22s%3D%24s%26showposts%3D-1%22)%3B%0A%24not_singular%20%3D%20%24allsearch-%3Efound_posts%20%3E%201%20%3F%20’r%C3%A9sultats’%20%3A%20’r%C3%A9sultat’%3B%20%2F%2F%20si%20articles%20trouv%C3%A9s%20et%20sup%C3%A9rieur%20%C3%A0%201%2C%20je%20retourne%20au%20pluriel%2C%20sinon%20le%20singulier » message= »Si articles trouvés et supérieur à 1, je retourne au pluriel, sinon le singulier » highlight= » » provider= »manual »/]

Et j’affiche ensuite :

[pastacode lang= »markup » manual= »%3C%3Fphp%20echo%20%24allsearch-%3Efound_posts.’%20′.%24not_singular.’%20pour%20votre%20recherche%20%22%3Cstrong%3E’.%24_GET%5B%22s%22%5D.’%3C%2Fstrong%3E%22’%3B%20%3F%3E » message= »Affichage en front » highlight= » » provider= »manual »/]

A vous de jouer 🙂

 

PS : source de cette article sur markhendriksen.com

Florent Maillefaud

Divi : Comment créer une page de résultats de recherche personnalisée 1Webmaster à Sablons (Isère) / Création de sites internet WordPress.

Micro-entrepreneur depuis 2012, je vous propose la création ou la refonte de votre site internet sous WordPress et à votre image.

Que ce soit un site vitrine, un blog ou un site e-commerce pour votre entreprise ou association, laissez votre empreinte sur le web !

Share This