Rangements et aménagements sur le site

« Mais tu as encore changé des choses ? » Pour la rentrée et avant de me plonger dans de nouveaux contenus, j’ai repris l’accueil, crée une page pour présenter les catégories et deux trois autres choses, aimerez-vous ?

Le chêne en avant

J’avais des problèmes avec les polices. Non, mon casier est vierge, mais le mariage entre Volkorn et Newsreader posait des petits soucis sur mobile. J’ai choisi Lora comme police principale et Fira Code, pour le code. Vous me direz si vous appréciez… Je la trouve agréable et dans l’esprit du site. Je vous passe les détails techniques, mais il y a des optimisations que WordPress ne fait pas alors que c’est recommandé. Cela dit les performances sont très satisfaisantes aux tests PageSpeed Insights : 100% sur ordinateur et entre 98 et 100% sur smartphone.

Le chêne, symbole du site est mis en avant un peu partout et dès la page d’accueil. J’ai pas mal utilisé les ressources de Open Doodles et les images de Pablo Stanley que j’apprécie beaucoup, mais pour l’identité du site, il me semblait mieux d’avoir quelque chose d’original.

À la demande de quelques personnes, j’ai replacé un bloc avec les quatre dernières publications accessibles dès l’accueil. La page « nouveautés » en dit un peu plus long.

L’arbre des catégories

Plutôt qu’un plan fastidieux, j’ai voulu proposer une page présentant l’arbre des catégories et sous-catégories du site avec le nombre d’articles : ça permet de s’orienter un peu si on souhaite voir comment le mille-feuilles est structuré.

En croisant des requêtes auprès de l’automatisation probabiliste, j’ai utilisé un code php et un code css plutôt que d’ajouter une extension.

Je vous les donne ici pour info, à adapter selon vos goûts et vos envies si vous tenez un site WordPress :

Le code PHP

function vb_category_tree_shortcode($atts) {
    $atts = shortcode_atts([
        'parent' => 0,
        'color'  => '',
    ], $atts);

    // Palette de couleurs lisibles sur fond blanc (contraste suffisant)
    $palette = [
        '#8a3ffc', '#0f62fe', '#007d79', '#b28600',
        '#c9401e', '#a6104f', '#005d5d', '#4b0082',
    ];

    $categories = get_categories([
        'hide_empty' => false,
        'parent'     => $atts['parent'],
        'orderby'    => 'name',
    ]);

    if (empty($categories)) {
        return '';
    }

    $output = '<ul class="vb-category-tree">';

    $i = 0;
    foreach ($categories as $cat) {
        // Une couleur par grande catégorie (niveau 0), héritée par ses enfants
        if ($atts['parent'] == 0) {
            $color = $palette[$i % count($palette)];
        } else {
            $color = $atts['color'];
        }

        $style = $color ? ' style="—vb-color: ' . esc_attr($color) . ';"' : '';

        $output .= '<li class="vb-category-item"' . $style . '>';
        $output .= '<div class="vb-category-row">';
        $output .= '<a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a>';
        $output .= '<span class="vb-category-count">' . intval($cat->count) . '</span>';
        $output .= '</div>';

        if (!empty($cat->description)) {
            $output .= '<p class="vb-category-description">' . esc_html($cat->description) . '</p>';
        }

        $output .= vb_category_tree_shortcode(['parent' => $cat->term_id, 'color' => $color]);

        $output .= '</li>';

        $i++;
    }

    $output .= '</ul>';

    return $output;
}
add_shortcode('vb_category_tree', 'vb_category_tree_shortcode');

Le code CSS

.vb-category-tree {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.vb-category-tree .vb-category-tree {
    margin-left: 1.5rem;
    padding-left: 1.2rem;
    border-left: 1px solid var(—vb-color, #ccc);
    margin-top: 0.4rem;
}

.vb-category-item {
    position: relative;
    margin-bottom: 0.8rem;
}

.vb-category-tree .vb-category-tree .vb-category-item::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: -1.2rem;
    width: 1rem;
    height: 1px;
    background: var(—vb-color, #ccc);
}

.vb-category-row {
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
}

.vb-category-row a {
    font-weight: 600;
    text-decoration: none;
    color: var(—vb-color, #333);
}

.vb-category-row a:hover {
    text-decoration: underline;
}

.vb-category-count {
    font-size: 0.85rem;
    color: var(—vb-color, #777);
    background: color-mix(in srgb, var(—vb-color, #ccc) 12%, white);
    border: 1px solid var(—vb-color, #ccc);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    white-space: nowrap;
}

.vb-category-description {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    color: #555;
    font-style: italic;
}

Chacun de ces codes se colle dans un snippet ou fragment dédié : je le fais avec WP Code (extension en version gratuite).

Voici ce que ça donne :

L’arbre des catégories

Incontestablement, on peut penser qu’il y a trop de catégories !

Menus et autres

J’ai repris un peu les menus dans leur mise en forme et leur composition. J’ai changé le modèle pour les pages d’informations. L’harmonisation est à peu près faite partout.

---

Réfléchir à l’organisation formelle du site, c’est pour moi important d’abord pour améliorer son accessibilité, le rendre pratique : ça invite à réfléchir aussi à la cohérence entre forme et contenu. Il s’agit pour moi de ne pas être trop austère tout en essayant d’éviter l’effet « sapin de Noël » qu’on adorait avec les premiers sites quand ça bougeait et clignotait partout dans des couleurs incroyables. On fixait longuement certaines pages pour les voir s’afficher !

Il reste des animations comme des développements et des images souvent seulement illustratives ou anecdotiques mais j’espère que vous percevez l’unité et pour les plus anciennes et anciens à visiter le site, percevez son évolution.

N’hésitez pas à faire part d’idées ou remarques !