Comment personnaliser la pagination dans l'éditeur de blocs WordPress

Publié: 2024-10-16

La pagination est un élément essentiel de la conception Web, en particulier pour les sites Web proposant un contenu long tel que des blogs ou des listes de produits. Une pagination efficace garantit une expérience de navigation transparente, améliorant à la fois la satisfaction des utilisateurs et l'optimisation des moteurs de recherche (SEO).

La fonctionnalité de pagination de l'éditeur de blocs WordPress, communément appelée Gutenberg, fait partie du bloc Query Loop, et non un bloc autonome. Le bloc Query Loop vous permet d'afficher des publications ou de créer des modèles personnalisés dans un thème de bloc.

Le bloc de pagination dans la boucle de requête de Gutenberg est assez limité en matière de personnalisation prête à l'emploi. Sa conception par défaut ne correspond pas toujours aux besoins esthétiques de votre site, mais vous pouvez améliorer son apparence et ses fonctionnalités en utilisant du CSS personnalisé.

Cet article vous guidera à travers les étapes de modification et d'optimisation de la pagination dans l'éditeur Gutenberg en ajoutant du CSS personnalisé, vous permettant d'améliorer la navigation de votre site et l'expérience utilisateur globale.

Étapes pour personnaliser la pagination dans l'éditeur de blocs WordPress

Étape 1 : Créer ou modifier une page ou un modèle

Créez un nouveau type de publication (page/publication) ou sélectionnez celui existant. Si vous utilisez un thème de bloc, vous pouvez également ajouter un nouveau modèle ou modifier celui existant à l'aide de l'éditeur de site.

Dans cet exemple, nous allons créer une nouvelle page que nous utiliserons comme page de publications (page de blog).

Ajouter le bloc de boucle de requête

Sur votre tableau de bord WordPress, accédez à Pages -> Ajouter une nouvelle page . Dans Gutenberg, ajoutez un bloc Query Loop. Ce bloc vous permet d'afficher des publications, des pages ou des types de publications personnalisés.

Vous pouvez choisir un modèle pour la boucle de requête ou commencer vide. Pour cet exemple, nous choisissons l'option de démarrage noir, puis pour la variation de la boucle de requête, nous sélectionnons Image, Date et Titre.

Ensuite, vous pouvez modifier et styliser l'apparence de tous les éléments du bloc Boucle de requête à l'aide des paramètres de bloc.

Étape 2 : Identifiez la classe CSS de l’élément de pagination

Vous devez identifier sa classe CSS spécifique avant de personnaliser l'élément de pagination. Généralement, le nom de la classe dépend du thème WordPress et de tout plugin actif que vous utilisez. Alors, comment obtenir le nom de classe CSS de chaque élément de pagination sur votre page ?

Prévisualisez votre page en cliquant sur le bouton Aperçu dans un nouvel onglet .

Vous pouvez utiliser les outils de développement intégrés de votre navigateur Web (presque tous les navigateurs Web disposent de cette fonctionnalité). Si vous utilisez Google Chrome, vous pouvez cliquer sur l'icône de menu (icône à trois points) et sélectionner Plus d'outils -> Outils de développement .

Une fois que vous êtes entré dans la fenêtre Outils de développement, cliquez sur l'icône en forme de flèche pour inspecter un élément de votre page (voir l'image ci-dessous).

Ensuite, pointez le curseur sur les éléments de pagination (conteneur de pagination principal, numéros de page individuels, numéro de page actuel, boutons précédent et suivant) pour déterminer leurs classes.

Comme vous pouvez le voir sur l'image ci-dessus, nous avons identifié les classes CSS de nos éléments de pagination ci-dessous :

Nom des éléments Classes CSS
Conteneur de pagination principal .wp-block-query-pagination
Numéros de page individuels .numéros de pages
Numéro de page actuel .numéros de page.current
Bouton Précédent .wp-block-query-pagination-précédent
Bouton Suivant .wp-block-query-pagination-suivant

Étape 3 : Ajout d'un CSS personnalisé pour la pagination

Ensuite, nous ajouterons l'extrait CSS au personnalisateur de thème WordPress pour personnaliser l'élément de pagination dans le bloc Query Loop. Sur votre tableau de bord WordPress, accédez à Apparence -> Personnalisateur -> CSS supplémentaire . Ensuite, copiez l'extrait CSS ci-dessous et collez-le dans le champ disponible.

Remarque : Si vous utilisez un thème en bloc, cliquez ici pour savoir comment activer un personnalisateur de thème sur votre WordPress. 

 .wp-block-query-pagination {
  affichage : flexible ;
  justifier-contenu : centre ;
  marge : 20px 0 ;
}

.wp-block-query-pagination .page-numbers {
  remplissage : 5px 8px ;
  couleur d'arrière-plan : #f0f0f0 ;
  marge : 0 3px ;
  couleur : #000000 ;
}

.wp-block-query-pagination .page-numbers.current {
  couleur d'arrière-plan : #601599 ;
  couleur : blanc ;
}

.wp-block-query-pagination-précédent {
  remplissage : 8px 12px ;
  arrière-plan : #233b27 ;
  marge : 0 4px ;
  couleur : #ffffff ;
  rayon de bordure : 4 px ;

}

.wp-block-query-pagination-suivant {
  remplissage : 8px 12px ;
  arrière-plan : #233b27 ;
  marge : 0 4px ;
  couleur : #ffffff ;
  rayon de bordure : 4 px ;
}

.wp-block-query-pagination .page-numbers:hover {
  couleur d'arrière-plan : #be76f5 ;
  couleur : blanc ;
}

.wp-block-query-pagination-previous:hover {
  arrière-plan : #ffb300 ;
  couleur : #000000 ;
}

.wp-block-query-pagination-next: survol {
  arrière-plan : #ffb300 ;
  couleur : #000000 ;
}

N'oubliez pas de cliquer sur le bouton Publier pour appliquer les modifications que vous avez apportées.

C'est ça. Pour voir le résultat, veuillez revenir sur votre page puis la prévisualiser. Vous verrez que vos éléments de pagination sont personnalisés. N'hésitez pas à remplacer les valeurs des propriétés CSS pour obtenir l'apparence qui correspond à votre conception globale.

N'oubliez pas de sauvegarder votre page ou de la publier si vous le souhaitez.

Qu'a fait le code CSS ?

  • Conteneur de pagination principal : .wp-block-query-pagination
    • Utilise Flexbox pour centrer les éléments de pagination et ajoute un espacement vertical (20 px).
  • Numéros de page individuels : .wp-block-query-pagination .page-numbers
    • padding: 5px 8px; : Crée un espacement à l'intérieur de chaque numéro de page. Il ajoute 5 pixels de remplissage vertical (haut et bas) et 8 pixels de remplissage horizontal (gauche et droite), augmentant ainsi la zone cliquable.
    • background-color: #f0f0f0; : Définit la couleur d'arrière-plan des numéros de page sur un gris clair (#f0f0f0).
    • margin: 0 3px; : Ajoute un espace horizontal (3 pixels à gauche et à droite) entre les éléments du numéro de page. Il n'y a pas de marge verticale, donc l'espacement n'affecte que l'alignement horizontal.
    • color: #000000; : Change la couleur du texte des numéros de page en noir, en s'assurant qu'il contraste bien avec le fond clair.
  • Numéro de page actuel : .wp-block-query-pagination .page-numbers.current
    • background-color: #601599; : Change la couleur d'arrière-plan du numéro de page actuel (actif) en violet riche (#601599). Cela indique visuellement quelle page est actuellement sélectionnée.
    • color: white; : Définit la couleur du texte sur blanc, offrant un contraste élevé sur le fond violet, rendant visible le numéro de page active.
  • Boutons Précédent et Suivant : .wp-block-query-pagination-previous et . wp-block-query-pagination-next
    • Stylé avec un fond vert foncé, du texte blanc, un remplissage et des coins légèrement arrondis.
  • Effets de survol :
    • .wp-block-query-pagination .page-numbers:hover
      • Lorsque l'utilisateur survole un numéro de page individuel, la couleur d'arrière-plan passe au violet clair (#be76f5) pour un effet interactif subtil.
      • La couleur du texte passe au blanc, améliorant ainsi le contraste et la lisibilité lors du survol. Effets de survol :
    • .wp-block-query-pagination-previous:hover et . wp-block-query-pagination-next:hover
      • Lorsque l'utilisateur survole les boutons « Précédent » ou « Suivant », l'arrière-plan se transforme en jaune-orange vif (#ffb300), ce qui les fait ressortir.
      • La couleur du texte passe au noir, offrant une lisibilité claire sur le fond clair.

L'essentiel

Cet article montre avec quelle facilité vous pouvez personnaliser la pagination dans WordPress Block Editor sans l'aide d'un plugin. La personnalisation de la pagination dans l'éditeur de blocs WordPress avec du CSS personnalisé permet un meilleur contrôle sur l'apparence et les fonctionnalités de la navigation de votre site.

En tirant parti du CSS, vous pouvez adapter la pagination au style de votre marque, améliorer l'expérience utilisateur et améliorer la conception globale de votre site WordPress. Que vous choisissiez d'ajuster les couleurs, les tailles ou la disposition des éléments de pagination, la flexibilité du CSS personnalisé vous permet de créer un parcours utilisateur transparent et visuellement attrayant sur votre site Web.

Cependant, si vous souhaitez des options de conception riches sans avoir besoin de CSS personnalisé, nous vous recommandons fortement d'utiliser un plugin WordPress tel que Divi ou Elementor, car les deux offrent des constructeurs visuels intuitifs avec des fonctionnalités de personnalisation étendues, vous permettant de créer de superbes mises en page entièrement réactives avec Options avancées de pagination, de contenu dynamique et de style directement dans l'interface du générateur de pages.