Québec Web

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

  • Créateur
    Discussion
  • #310

    Nicolas
    Keymaster

    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 ?

  • Auteur
    Réponses
  • #389

    Nicolas
    Administrateur
    Initié

    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 !

  • #392

    Nicolas
    Administrateur
    Initié

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

Connectez-vous pour répondre.