HivePress : affichage des catégories sur 4 colonnes (au lieu de 3)

[Nicolas]

Par défaut, HivePress (et le thème gratuit ListingHive) affiche les catégories sur 3 colonnes.

L’affichage en colonne des catégories se produit à trois moments différents :

• [x] Bloc « Catégories d’entrées »
• [x] Vue « Ajouter une entrée »
• [ ] Affichage d’une catégorie (dont « Afficher les sous-catégories » est activé)

Bloc « Catégories des entrées » : OK (natif)

Dans l’éditeur WordPress, le bloc « Catégories des entrées » (Listing Categories) permet de sélectionner le nombre de colonnes (2, 3 ou 4). Ainsi, on peut si on le désire afficher les catégories sur 4 colonnes sur la page d’accueil.

Vue « Ajouter une entrée » : OK (snippet)

Sur le forum HivePress.io, un développeur indique comment changer le nombre de colonnes (3 par défaut) de la vue « Ajouter une entrée » (Add listing).
https://hivepress.io/support/topic/at-the-category-selection-page-how-can-i-display-more-than-3-categories/#post-10409

Il suffit de créer un snippet avec le code suivant (ou de placer celui-ci dans le fichier functions.php du thème enfant), ce qui fonctionne :

/**
 * Add listing - Show categories in 4 columns
 * @author serhii
 * @link https://hivepress.io/support/topic/at-the-category-selection-page-how-can-i-display-more-than-3-categories/#post-10409
 */
add_filter(
    'hivepress/v1/templates/listing_submit_category_page',
    function( $template ) {
        return hivepress()->helper->merge_trees(
            $template,
            [
                'blocks' => [
                    'listing_categories' => [
                        'columns' => 4,
                    ],
                ],
            ]
        );
    }
);

Affichage des catégories : solution à trouver…

Mais qu’en est-il des pages de catégories elles-mêmes ? Apparemment cela est du domaine du thème ListingHive : https://hivepress.io/support/topic/how-can-i-make-shorter-the-categories-display/#post-1430

L’affichage en colonnes est contrôlé au sein du thème par l’ajout des attributs de classe hp-grid__item hp-col-sm-4 hp-col-xs-12 (pour trois colonnes). L’affichage de bloc sur 4 colonnes (eg. dans un bloc de « Catégories d’entrées) montre plutôt les classes hp-grid__item hp-col-sm-3 hp-col-xs-12.

Mais une recherche dans les fichiers sources du thème de la chaîne hp-col-sm-4 ne retourne aucun résultat ! Comment alors changer cette classe pour hp-col-sm-3 dans l’affichage des catégories ?

Discussion

[Nicolas]

La seule référence pertinente concernant le nombre de colonnes dans l’affichage des sous-catégories d’une catégorie trouvée sur les forums de HivePress est celle-ci : https://hivepress.io/support/topic/changing-listing-categories-column-amounts/

Le code CSS qu’y donne @ihor (développeur de HivePress) consiste à forcer l’affichage sur 1 colonne :

.hp-listing-categories .hp-grid__item {
    flex-basis: 100%;
    max-width: 100%;
}

Partons de cet exemple pour forcer l’affichage sur 4 colonnes, mais seulement à partir d’une certaine largeur de la zone d’affichage.

Vue « Sous-catégories » : règles CSS progressives

Les règles CSS contrôlant d’affichage en colonnes sont définies dans /wp-content/plugins/hivepress/assets/css/grid.min.css. Par défaut, l’affichage en colonnes est réduit à une seule colonne lorsque la largeur de l’écran est de 48em et moins. Cela est contrôlé par une règle @media. grid.min.css définit 3 points de rupture : 48em, 64em et 75em.

Nous allons donc définir une règle pour afficher les sous-catégories sur 4 colonnes (au lieu de 3) à partir de 64em, et on en profitera pour créer un affichage intermédiaire sur deux colonnes, entre 32em et 48em :

/* Catégories 4 colonnes */
@media only screen and (min-width:64em) {
  .hp-listing-categories .hp-grid__item {
    flex-basis: 25%;
    max-width: 25%;
  }
}
/* Catégories 2 colonnes */
@media only screen and (min-width:32em) and (max-width:48em) {
  .hp-listing-categories .hp-grid__item {
    flex-basis: 50%;
    max-width: 50%;
  }
}

C’est aussi simple que ça !

[Nicolas]

Comme il se trouve que les règles CSS affectent également la vue « Ajouter une entrée », on peut dorénavant se débarrasser du snippet (dans functions.php) qui règle les colonnes à 4 au lieu de 3 dans cette vue.

Aussi, j’ai rajusté les points de rupture pour les aligner sur ceux du thèmes :

• Affichage 2 colonnes (max-width=47.99em) : correspond exactement au moment où le texte du menu « Mon compte » et « Ajouter une entrée » est escamoté, ne laissant que les icônes.
• Affichage 4 colonnes (min-width=75em) : correspond exactement au passage du menu « hamburger » au menu déployé.

[Auteur]

Réponses