TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un tableau de comparaison dans WordPress ?

27

Les gens disent que WordPress alimente plus de 30% des sites Web sur Internet. Cependant, créer un site Web avec toutes les fonctionnalités dont vous avez besoin n’est pas une tâche facile. La création de tableaux dans WordPress en est un exemple simple. WordPress a introduit un bloc de table avec le Gutenberg et le met à jour en continu. Cependant, il n’est pas réactif et ne fonctionnera pas correctement sur les appareils mobiles lorsque vous avez trois colonnes ou plus. Bien que des plugins comme TablePress résolvent ce problème avec le plugin gratuit, il n’est toujours pas pratique de créer un tableau de comparaison qui nécessite des étoiles de révision. Dans cet article, nous allons vous expliquer comment créer un tableau de comparaison dans WordPress.

Qu’est-ce qu’un tableau comparatif ?

De nombreux blogueurs WordPress écrivent des critiques et recommandent des produits qu’ils utilisent à leurs lecteurs. Cela aide à la fois les lecteurs à obtenir des informations fiables tandis que les blogueurs reçoivent une commission d’affiliation lorsqu’un lecteur achète ce produit. Dans de nombreux cas, le tableau de comparaison est le plus utile pour présenter les informations.

  • Présenter une liste des 10 meilleurs produits dans un tableau – par exemple les 10 meilleures sociétés d’hébergement.
  • Comparez les spécifications de deux produits, par exemple iPhone et Samsung Galaxy.

Comment créer un tableau de comparaison dans WordPress ?

Après avoir beaucoup cherché, nous avons trouvé un plugin décent qui aide à créer un tableau de comparaison dans WordPress.

  • Connectez-vous à votre tableau de bord WordPress et accédez à la section « Plugins > Ajouter un nouveau ».
  • Recherchez le mot-clé «table» et trouvez «WP Table Builder – WordPress Table Plugin ».
  • Installez et activez le plugin pour créer de belles tables.

Comment créer un tableau de comparaison dans WordPress ?

Générateur de tables WP

Création de tableaux avec le générateur de tableaux glisser-déposer

Après avoir activé le plugin, il créera un menu « Table Builder » dans la barre de navigation latérale. Allez dans le menu « Table Builder > Add New » pour créer une nouvelle table. Cela vous mènera à l’interface de création de table par glisser-déposer du plugin dans votre tableau de bord WordPress.

Comment créer un tableau de comparaison dans WordPress ?

Éditeur glisser-déposer du générateur de tables WP

Entrez le nom de la table pour votre table et choisissez les colonnes/lignes. Cliquez sur le bouton « Générer ».

Personnaliser les paramètres du tableau

Sur l’écran suivant, vous pouvez voir l’aperçu en direct du tableau. Faites défiler vers le bas dans la barre latérale gauche pour trouver les « Paramètres de la table ». Vous pouvez configurer les options suivantes pour votre table :

Comment créer un tableau de comparaison dans WordPress ?

Paramètres du tableau

  • Activez l’option « Rendre la table réactive » pour rendre vos tables réactives sur les appareils mobiles.
  • Ajoutez la ligne du haut comme en-tête et configurez une couleur pour votre ligne d’en-tête.
  • Modifiez les tailles et les couleurs des bordures extérieures et intérieures.
  • Ajoutez des couleurs pour les lignes impaires et paires de votre table.
  • Configurez le remplissage des cellules et la largeur du tableau.

Si vous n’êtes pas familier avec les tableaux, découvrez ici comment créer des tableaux HTML.

Ajout de contenu au tableau

Après avoir configuré la base de votre tableau, vous pouvez faire glisser et déposer des éléments à l’intérieur des cellules et commencer à créer votre tableau en ligne. Le plugin vous permet d’ajouter du texte, une image, une liste, un classement par étoiles, un code HTML personnalisé, un shortcode et un bouton dans les cellules. Vous pouvez personnaliser chaque élément après l’avoir fait glisser dans la cellule.

Par exemple, vous pouvez ajouter un élément d’image et ajouter des liens, aligner, ajouter du texte alternatif et ajuster la taille. Vous trouverez ci-dessous à quoi ressemblera le tableau de comparaison dans le générateur de tableau.

Comment créer un tableau de comparaison dans WordPress ?

Tableau de comparaison dans le générateur de tableaux

Après avoir terminé le contenu du tableau, vous pouvez prévisualiser et enregistrer le tableau.

Obtenir un shortcode pour le tableau de comparaison

Lorsque vous êtes dans le constructeur, cliquez sur le bouton « Intégrer » en haut pour obtenir le code court de votre table.

Comment créer un tableau de comparaison dans WordPress ?

Obtenir le code court d’intégration

Vous pouvez également afficher toutes les tables créées dans le menu « Table Builder > Toutes les tables » avec les codes abrégés de chaque table.

Insertion de tableaux dans les articles et les pages

Maintenant que vous avez le shortcode pour votre tableau de comparaison, vous pouvez l’insérer n’importe où sur le site.

  • Collez simplement le shortcode dans le bloc "Paragraph" ou "Shortcode" de l’éditeur Gutenberg.
  • Vous pouvez également insérer le tableau dans votre pied de page ou votre barre latérale à l’aide d’un widget de texte. Faites glisser et déposez le widget "Texte" sur votre barre latérale ou votre pied de page et collez le shortcode du tableau. Enregistrez vos modifications et le tableau commencera à s’afficher dans la zone de widgets correspondante sur le site publié.

Le tableau publié sur le site de bureau ressemblera à quelque chose comme ci-dessous :

Comment créer un tableau de comparaison dans WordPress ?

Exemple de tableau de comparaison

Et la vue mobile responsive ressemblera à ci-dessous :

Comment créer un tableau de comparaison dans WordPress ?

Tableau comparatif sur mobile

Avantages et inconvénients du plugin WP Table Builder

Le plugin a des avantages ainsi que quelques limitations.

Avantages

  • Le plugin est un bel outil pour créer des tableaux de comparaison réactifs sur votre site WordPress.
  • Il n’affiche aucune publicité gênante ni vente incitative dans la section d’administration.
  • Interface simple, glisser-déposer avec des options personnalisables.
  • Shortcodes pour insérer le tableau n’importe où sur votre site.

Les inconvénients

  • Après avoir choisi des colonnes et des lignes, il n’y a aucun moyen de changer cela. Si vous souhaitez supprimer une colonne ou une ligne, vous devez créer à partir de zéro.
  • Aucune possibilité de réorganiser les lignes et les colonnes.

Nous espérons que les futures mises à jour pourront inclure ces options.

Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails