[GP] Anomalies & Évolutions

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.

Comme pour les pages d'archives (#185), l'idée est de supprimer la dépendance à FacetWP (#195) et se rapprocher du natif.

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.

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 :

<?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 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();

Ce template appelle un template partiel hero-search.php (situé dans components/parts/hero-search.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>

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.

Le contenu de la page SERP¶

La page contient uniquement des shortcodes FacetWP 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.

Le template search_results¶

Ce template FacetWP éditable depuis le BO dans Settings > Facet WP > Listings > Search Results.

Son contenu :

<?php while ( have_posts() ): the_post(); 
include( get_stylesheet_directory() . '/components/parts/loop-search.php' ); // appelle un template du thème
endwhile; ?>

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.

<?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>

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.

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 :

<button class="facet__button btn btn-secondary" type="reset" data-reset="dates,categories,sort,s"> Réinitialiser la recherche </button>

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).

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.