La page d’accueil encore affinée

Après les rangements et aménagements sur le site présentés il y a deux jours, j’avais envie de revenir sur la page d’accueil. Jouer avec WordPress, c’est une sorte de jeu de briques qu’on assemble. Encore faut-il que l’assemblage fonctionne aussi bien sur ordinateur que smartphone. C’est une activité où il faut être centré. Elle aide à comprendre comment ça fonctionne mais je trouve que ça détend l’esprit. Démonstration de mes essais.

Ma problématique

Voici l’ancienne version :

Je n’étais pas mécontent de la dernière version qui en plus était légère. Ce qui me chiffonnait, c’était le bloc sous Journal & Créations, qui présentait les dernières nouveautés, mais en désordre…

Mon objectif : tout en conservant la légèreté de la page, présenter les dernières nouveautés mises en ligne par grande catégorie.

• journal
• fiction
• poésie
• chanson

Ce sont les catégories du menu. Comme je publie le plus dans le journal, je voulais 2 entrées pour  » journal » et 1 ensuite pour chaque catégorie. Une façon de montrer que le site est vivant dans chaque catégorie. Je voulais aussi à côté du titre que la date soit affichée et pas en dessous, mais à côté du titre.

La recette

Sur la première page j’utilisais des groupes dans lesquels j’ai rangé des colonnes.

Je ne voulais pas mettre des colonnes dans des colonnes car ça alourdit.

Tout en haut vous voyez le slogan du site ou H2.
Ensuite, dans le premier bloc colonnes, vous trouvez en haut à gauche le mot de bienvenue et le bouton vers la biographie. À droite l’image du symbole du site, le chêne au format .svg

Si vous descendez, vous voyez une colonne à gauche, j’y ai collé la « citation » (il y a un bloc spécial de WordPress pour ça).

À droite dans l’autre colonne le sous titre H2 « Journal & Créations ».

En dessous j’ai utilisé un bloc spécial, « grille » . Pas toujours aisé à manipuler. L’avantage d’une grille c’est d’être très légère et de s’adapter de façon « responsive » à tous les écrans. J’ai choisi de construire la grille sur 2 colonnes.

À gauche : le titre de chaque rubrique. J’ai changé la casse en petites majuscules et j’ai aussi modifié l’interlettrage pour écarter un peu les lettres. J’ai veillé à ce que ça ne se coupe pas sur mobile.

À droite j’ai utilisé le bloc « derniers articles » pour chaque catégorie.

Deux problèmes

Comme je n’utilise que les grandes catégories pour appeler les nouveautés sur la page d’accueil, il faut que chaque article soit rangé dans sa sous-catégorie et la catégorie principale.

Exemple : l’article « les copains d’avant » dans la sous catégorie « sur le vif » est inclus dans « blog » la catégorie de premier niveau. Il doit être affecté « à chaque étage ».

Comme je n’avais pas tout coché pour chaque article, j’aurais eu la catégorie « blog » vide.

j’ai donc dû utiliser un code PHP pour affecter chaque article aussi à sa catégorie principale.

add_filter('query_loop_block_query_vars', function ($query, $block) {
    // Slugs des catégories à NE PAS étendre aux sous-catégories
    $categories_strictes = ['curiosites-numeriques'];

    if (!empty($query['tax_query'])) {
        foreach ($query['tax_query'] as &$clause) {
            if (($clause['taxonomy'] ?? '') === 'category' && !empty($clause['terms'])) {
                $all_ids = [];
                foreach ((array) $clause['terms'] as $term_id) {
                    $term = get_term($term_id, 'category');
                    $all_ids[] = $term_id;

                    if ($term && !in_array($term->slug, $categories_strictes, true)) {
                        $all_ids = array_merge($all_ids, get_term_children($term_id, 'category'));
                    }
                }
                $clause['terms'] = array_unique($all_ids);
            }
        }
    }
    return $query;
}, 10, 2);

On charge le code par exemple dans WP Code (une extension spéciale).
Puis on se connecte dans son administration de site et on lance dans la barre : /wp-admin/?fix_parent_cats=1

Une fois l’opération effectuée, on désactive le code. Chaque article est maintenant « bien rangé ».

Deuxième problème : je voulais que la date soit à côté du titre de l’article et pas en dessous. Cette fois, on utilise un code CSS.

.wp-block-latest-posts li {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex-wrap: wrap;
}

.wp-block-latest-posts__post-title {
    margin: 0;
}

.wp-block-latest-posts__post-date {
    margin: 0;
    white-space: nowrap;
    font-size: 0.9em;
    opacity: 0.7;
}

C’est à ajuster selon les thèmes. Je suis avec WordPress 7.1, Twenty-Twenty five.

J’ai ensuite modifié ça et là, par exemple la taille du titre H2. Sur un grand écran, la page s’affiche en une seule vue sans avoir à manipuler l’ascenseur.

---

On vérifie ensuite que ça reste léger en testant la page (F12 + Ligthouse) sur ordinateur et mobile.

Ah oui ! j’ai ajouté aussi un séparateur sous les requêtes.

Cette fois, je me calme et je ne touche plus à rien et me consacre aux contenus !