Feature #198
Mis à jour par ggallais il y a plus de 3 ans
La page SERP s'appuie sur un empilement compliqué (voire infra) et éloigné du natif WP. Cela empêche d'ajouter une recherche avancée (plugin, moteur externe, etc.) et d'améliorer la recherche. etc.). Comme pour les pages d'archives (#185), l'idée est de supprimer la dépendance à FacetWP (#195) et se rapprocher du natif. h3. Structure globale La page de SERP est un contenu WordPress de type Page. Elle est accessible depuis le BO (id 83624) ou en front : * page à vide : https://www.inserm.fr/rechercher/ * page après une recherche : https://www.inserm.fr/rechercher/?_s=covid Elle se distingue d'une page classique par : * son modèle de page (@Search@), sélectionnable en BO * la présence d'une sidebar @search-top@, héritée du modèle de page * son contenu : des shortcodes FacetWP et un bloc réutilisable HTML @reset@ À part ça c'est une page "normale" : on peut modifier son contenu, la renommer, la supprimer, etc. h3. Le modèle de page Par défaut, une Page utilise le template @page.php@. Mais on peut choisir d'appeler un template custom depuis le BO (voir PJ). La page SERP utilise le template @templates/template-search.php@ : <pre><code class="php"> <?php /** * Template Name: Search * */ get_header(); ?> <article class="article"> <?php while ( have_posts() ) : the_post(); ?> <div class="article__background article__background--search"> <div class="container"> <?php get_template_part( 'components/blocks/breadcrumb' ); get_template_part( 'components/parts/hero-search' ); // on utilise une zone "hero" différente a été conçue pour la recherche ?> </div> </div> <div class="container"> <div class="push"> <div class="article__page wysiwyg"> <div class="push"> <?php the_content(); ?> </div> </div> </div> </div> </div> <?php endwhile; ?> </article> <?php get_footer(); </code></pre> Ce template appelle un template partiel @hero-search.php@ (situé dans @components/parts/hero-search.php@) <pre><code class="php"> <div class="article__hero"> <header><h1 class="article__title push"><?php the_title(); ?></h1></header> <div class="search__top wysiwyg push"> <?php dynamic_sidebar( 'search-top' ); ?> // déclaration de sidebar search-top </div> </div> </code></pre> h3. La sidebar @search-top@ La sidebar @search-top@ contient 3 widgets texte legacy, qui appellent des shortcodes FacetWP. Widget 1 = @[facetwp facet="results_fr"]@ => Affiche le nombre de résultats (en FR) Widget 2 = @[facetwp facet="results_en"]@ => Affiche le nombre de résultats (en EN) Widget 3 = @[facetwp facet="s"]@ => Champ de recherche On peut supprimer ou modifier le contenu de ces widgets dans @Apparence > Widgets@. h3. Le contenu de la page SERP La page contient uniquement des shortcodes fonctionner avec FacetWP + SearchWP et un bloc réutilisable fait par BeAPI. @[facetwp sort="true"]@ => Choisit l’ordre d’affichage des résultats @[facetwp facet="dates"]@ => Filtre les résultats par date @[facetwp template="search_results"]@ => Affiche les résultats de recherche @[facetwp facet="pagination"]@ => Pagination Le 3e shortcode ( @[facetwp template="search_results"]@) appelle un template FacetWP, c'est à dire du PHP. h4. Le template @search_results@ Ce template FacetWP éditable depuis le BO dans @Settings > Facet WP > Listings > Search Results@. Son contenu : <pre><code class="php"> <?php while ( have_posts() ): the_post(); include( get_stylesheet_directory() . '/components/parts/loop-search.php' ); // appelle un template du thème endwhile; ?> </code></pre> h4. Le template @loop-search.php@ Le template @loop-search.php@ génère les items de résultats. Il est situé dans @components/parts/loop-search.php@. <pre><code class="php"> <?php $loop_cpt = get_post_type(); $file_ext = ''; $article_link = get_the_permalink(); $download = ''; if ( 'attachment' === $loop_cpt ) { $article_link = wp_get_attachment_url( get_the_ID() ); $file_type = wp_check_filetype( $article_link ); $file_ext = ' <span class="filetype">' . $file_type['ext'] . '</span>'; $download = ' download'; } ?> <div class="loop"> <div class="loop__wrapper" data-seo-container> <h2><a href="<?php echo esc_url( $article_link ); ?>" data-seo-target<?php echo esc_attr( $download ); ?>> <?php the_title(); echo wp_kses_post( $file_ext ); ?> </a></h2> <div class="url"><?php the_permalink(); ?></div> <?php the_excerpt(); $categories = get_the_category( $push_id ); if ( ! empty( $categories ) ) : $cats = wp_list_pluck( $categories, 'name' ); if ( count( $cats ) > 0 ) : $all_cats = implode( ', ', $cats ) ?> <div class="loop__category"><?php echo esc_html( $all_cats ); ?></div> <?php endif; endif; ?> </div> </div> </code></pre> Ultimement, c'est ce template qui affiche les résultats de recherche. On aurait pu l'utiliser directement, sans passer par un template FacetWP, un widget, un shortcode et une sidebar. h4. Le bloc réutilisable Le bloc réutilisable sert à réinitialiser la recherche. C'est un bloc "gutenberg" de type HTML Custom, dont le contenu est : <pre><code class="html"> <button class="facet__button btn btn-secondary" type="reset" data-reset="dates,categories,sort,s"> Réinitialiser la recherche </button></code> </pre> L'attribut @data-reset@ détermine ce qui est remis à zéro (en l’occurrence le filtre par date, par catégorie, l'ordre de tri et la requête). h3. Bref Tout ce système est extrêmement complexe, pour un résultat qu'on pourrait obtenir de façon beaucoup plus simple et sans FacetWP. L'objectif intermédiaire est de reconstruire techniquement la page de SERP au plus près du natif WP, sans FacetWP. Cela peut induire des changements visuels : OSEF. De toute façon, il va y avoir aussi des changements fonctionnels et de design. ne tolère rien d'autre :/