{"id":1201,"date":"2011-10-19T07:47:38","date_gmt":"2011-10-19T05:47:38","guid":{"rendered":"http:\/\/www.loligrub.be\/blog\/?p=1201"},"modified":"2011-10-22T18:40:40","modified_gmt":"2011-10-22T16:40:40","slug":"wp-table-reloaded-ou-comment-inserer-un-tableau-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.loligrub.be\/blog\/2011\/10\/19\/wp-table-reloaded-ou-comment-inserer-un-tableau-dans-wordpress\/","title":{"rendered":"WP-Table Reloaded ou comment ins\u00e9rer un tableau dans WordPress"},"content":{"rendered":"<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wordpress-logo-big-metal.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1273 alignright\" title=\"wordpress-logo-big-metal\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wordpress-logo-big-metal.jpg\" alt=\"\" width=\"182\" height=\"181\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wordpress-logo-big-metal.jpg 506w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wordpress-logo-big-metal-150x150.jpg 150w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wordpress-logo-big-metal-300x298.jpg 300w\" sizes=\"auto, (max-width: 182px) 100vw, 182px\" \/><\/a>Si vous souhaitez afficher des donn\u00e9es en tableau dans votre blog <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wp-table-reloaded\/\" target=\"_blank\">WordPress<\/a>, vous pouvez soit utiliser l&rsquo;\u00e9diteur <a href=\"http:\/\/www.tinymce.com\/\" target=\"_blank\">TinyMCE<\/a> int\u00e9gr\u00e9, avec des fonctionnalit\u00e9s limit\u00e9es \u00e0 la pr\u00e9sentation statique de donn\u00e9es, soit opter pour un plugin\u00a0(une extension de WordPress) permettant non seulement l&rsquo;affichage en table, mais \u00e9galement une interactivit\u00e9 avec le lecteur. Ce billet va vous pr\u00e9senter via un exemple le <a href=\"http:\/\/wordpress.org\/extend\/plugins\/wp-table-reloaded\/\" target=\"_blank\">plugin WP-Table Reloaded<\/a>, dont la derni\u00e8re mise \u00e0 jour date de moins d&rsquo;un mois\u00a0 !<\/p>\n<p>Alors supposons que nous voulons afficher<!--more--> en tableau des donn\u00e9es de communes proche (communes de l&rsquo;arrondissement de Mons, mieux connu comme Mons-Borinage) : le nom, la zone de police comp\u00e9tente, le nombre d&rsquo;habitants, la superficie et le lien vers le site web officiel de la commune.<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-menu-plugins.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-1213\" title=\"wP-reloaded-menu-plugins\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-menu-plugins.png\" alt=\"ajouter une extension \u00e0 WordPress (plugin)\" width=\"153\" height=\"117\" \/><\/a>La premi\u00e8re \u00e9tape consiste bien entendu \u00e0 installer le plugin . Cela se fait via le menu \u00ab\u00a0Extensions\u00a0\u00bb du tableau de bord (dashboard). Menu ajouter, indiquer WP-table. Cliquer sur \u00ab\u00a0Installer maintenant\u00a0\u00bb en-dessous de WP-Table Reloaded. <a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-search-install-plugins.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-1214\" title=\"wP-reloaded-search-install-plugins\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-search-install-plugins.png\" alt=\"Installer WP-Table Reloaded dans WordPress\" width=\"612\" height=\"218\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-search-install-plugins.png 765w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-search-install-plugins-300x107.png 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/a>L&rsquo;archive de l&rsquo;extension est alors t\u00e9l\u00e9charg\u00e9e, et on aboutit alors dans une page permettant d&rsquo;activer le plugin.\u00a0 A tout moment, la d\u00e9sactivation comme l&rsquo;activation sont possibles et ais\u00e9s, par le menu principal de gestion des extensions.<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-cliquer-plugins.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1216 alignright\" title=\"wP-reloaded-outils-cliquer-plugins\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-cliquer-plugins.png\" alt=\"\" width=\"158\" height=\"125\" \/><\/a>On dispose d\u00e8s ce moment d&rsquo;une entr\u00e9e suppl\u00e9mentaire WP-Table Reloaded dans le tableau de bord, \u00e0 la rubrique Outils. Cliquez dessus !<\/p>\n<p>Vous arrivez sur un \u00e9cran propre \u00e0 l&rsquo;extension. On peut par exemple acc\u00e9der aux options du plugin, et activer l&rsquo;option \u00ab\u00a0liens dans une nouvelle fen\u00eatre\u00a0\u00bb. Choisir \u00ab\u00a0enregistrer les options\u00a0\u00bb, et retourner ensuite \u00e0 la page \u00ab\u00a0Liste des tableaux\u00a0\u00bb.<\/p>\n<p>Faisons un petit test et cr\u00e9ons un petit tableau de 4 lignes et 3 colonnes (option \u00ab\u00a0Ajouter un nouveau tableau\u00a0\u00bb) :<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1220\" title=\"wP-reloaded-outils-ajouter-tableau-test\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test.png\" alt=\"Cr\u00e9ation d'un tableau simple dans WordPress avec WP-Table Reloaded\" width=\"297\" height=\"268\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test.png 495w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test-300x270.png 300w\" sizes=\"auto, (max-width: 297px) 100vw, 297px\" \/><\/a><br \/>\nOn clique sur le bouton \u00ab\u00a0Ajouter un tableau\u00a0\u00bb, et on acc\u00e8de alors \u00e0 un \u00e9cran permettant d&rsquo;encoder quelques informations g\u00e9n\u00e9rales, ainsi que les douze \u00ab\u00a0donn\u00e9es\u00a0\u00bb, plus de nombreux param\u00e8tres. On peut dans un premier temps laisser inchang\u00e9s les param\u00e8tres par d\u00e9faut.<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1221\" title=\"wP-reloaded-outils-ajouter-tableau-test-2\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test-2.png\" alt=\"\" width=\"618\" height=\"669\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test-2.png 772w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-ajouter-tableau-test-2-277x300.png 277w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/a><\/p>\n<p>Une fois qu&rsquo;elle est sauvegard\u00e9e, la table peut \u00eatre tr\u00e8s facilement affich\u00e9e dans votre billet WordPress en incluant la balise sp\u00e9ciale \u00ab\u00a0table\u00a0\u00bb ins\u00e9r\u00e9e entre des crochets [], sans oublier de pr\u00e9ciser le num\u00e9ro d&rsquo;identification unique du tableau :\u00a0 [[table id =1 \/]]<br \/>\nVous obtiendrez alors le r\u00e9sultat suivant :<\/p>\n<p>[table id =1 \/]<\/p>\n<p>Remarquez que vous pouvez trier suivant les diff\u00e9rentes colonnes en ordres croissant ou d\u00e9croissant des pr\u00e9noms, poids et tailles !<\/p>\n<p>Si vous retournez dans l&rsquo;outil WP-Table Reloaded et acc\u00e9dez de nouveau \u00e0 la table de test, vous verrez au del\u00e0 des \u00e9l\u00e9ments du tableau une rubrique consacr\u00e9e \u00e0 la manipulation des donn\u00e9es, qui fournit un grand nombre de possibilit\u00e9s :<\/p>\n<ul>\n<li>ins\u00e9rer des liens ou images;<\/li>\n<li>trier par d\u00e9faut suivant une colonne pr\u00e9cise;<\/li>\n<li>masquer des lignes ou colonnes;<\/li>\n<li>combiner des cellules;<\/li>\n<li>ins\u00e9rer, supprimer, permuter ou d\u00e9placer des lignes ou colonnes.<\/li>\n<\/ul>\n<p>Mais retournons \u00e0 notre probl\u00e8me de d\u00e9part, l&rsquo;affichage de donn\u00e9es de communes,et supposons que nous disposons des donn\u00e9es dans un tableur, et qu&rsquo;on a pu les exporter dans un format .csv (comma separated variables) \u00e0 partir de votre logiciel tableur favori de la suite bureautique xxxxOffice (remplacez xxxx par Open, Libre, K ou ce que vous voulez&#8230;). Voici \u00e0 quoi peuvent ressembler les 3 premi\u00e8res lignes d&rsquo;un tel fichier :<\/p>\n<pre>Commune;code INS;Zone de police comp\u00e9tente;Population;Superficie;Site Web\r\nBoussu;53014;boraine;20192;20.01;&lt;a href=\"http:\/\/www.boussu.be\/\"&gt;http:\/\/www.boussu.be\/&lt;\/a&gt;\r\nDour;53020;des Hauts-Pays;16899;33.32;&lt;a href=\"http:\/\/www.communedour.be\/\"&gt;http:\/\/www.communedour.be\/&lt;\/a&gt;<\/pre>\n<p style=\"padding-left: 30px;\"><em>N.B.<\/em> : si vous \u00e9ditez le fichier \u00e0 l&rsquo;aide d&rsquo;un \u00e9diteur de texte, n&rsquo;oubliez pas de v\u00e9rifier que le fichier ne contient pas de lignes en \u00ab\u00a0extra\u00a0\u00bb.<\/p>\n<p>L&rsquo;importation du fichier de donn\u00e9es se fait tr\u00e8s facilement via la fonction \u00ab\u00a0Importer un tableau\u00a0\u00bb de l&rsquo;outil WT-Table Reloaded, et en \u00ab\u00a0parcourant\u00a0\u00bb votre disque pour y s\u00e9lectionner le fichier :<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-importer-tableau.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1276 alignnone\" title=\"wP-reloaded-outils-importer-tableau\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-importer-tableau.png\" alt=\"\" width=\"774\" height=\"380\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-importer-tableau.png 774w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-importer-tableau-300x147.png 300w\" sizes=\"auto, (max-width: 774px) 100vw, 774px\" \/><\/a><\/p>\n<p>Dans notre cas, le nombre de donn\u00e9es \u00e0 repr\u00e9senter \u00e9tant d\u00e9j\u00e0 important (6 colonnes), nous choisirons dans une \u00e9tape suivante de masquer la colonne contenant le code INS :<\/p>\n<p><a href=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-tableau-masquer.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1277 alignnone\" title=\"wP-reloaded-outils-tableau-masquer\" src=\"http:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-tableau-masquer.png\" alt=\"\" width=\"392\" height=\"305\" srcset=\"https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-tableau-masquer.png 490w, https:\/\/www.loligrub.be\/blog\/wp-content\/uploads\/2011\/10\/wP-reloaded-outils-tableau-masquer-300x233.png 300w\" sizes=\"auto, (max-width: 392px) 100vw, 392px\" \/><\/a><\/p>\n<p>Et on termine en ins\u00e9rant le tableau \u00e0 l&rsquo;aide de la balise [[table id =2 \/]]<br \/>\nVoici le r\u00e9sultat :<br \/>\n(n&rsquo;h\u00e9sitez pas \u00e0 cliquer sur les ent\u00eates de colonnes pour effectuer des tris diff\u00e9rents, &#8230;)<\/p>\n<p>[table id =2 \/]<\/p>\n<p>&nbsp;<\/p>\n<p>Le r\u00e9sultat peut encore \u00eatre am\u00e9lior\u00e9, car le nombre d&rsquo;enregistrement affich\u00e9 par d\u00e9faut vaut 10. On peut s\u00e9lectionner une autre valeur, 20, 50 ou 100. Il est possible de modifier cette valeur par d\u00e9faut dans les param\u00e8tres du tableau, \u00e0 la rubrique \u00ab\u00a0Pagination\u00a0\u00bb, en d\u00e9sactivant l&rsquo;option ou en indiquant par exemple d&rsquo;afficher 15 lignes du tableau par page. Une technique plus avanc\u00e9e consiste \u00e0 utiliser le champ \u00ab\u00a0Commandes personnalis\u00e9es\u00a0\u00bb en y injectant les param\u00e8tres suppl\u00e9mentaires JavaScript suivant :<\/p>\n<p>\u00ab\u00a0aLengthMenu\u00a0\u00bb: [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, \u00ab\u00a0All\u00a0\u00bb]], \u00ab\u00a0iDisplayLength\u00a0\u00bb: 25<\/p>\n<p>Voici ce que cela donne :<\/p>\n<p>[table id =3\/]<\/p>\n<p>&nbsp;<\/p>\n<p>Remarquez quelques autres changement de param\u00e8tres : on ne permet plus de changer le nombre de lignes affich\u00e9es, le nom du tableau est indiqu\u00e9 au dessus, la description en dessous,\u00a0 les lignes sont mises en surbrillance en changeant sa couleur de fond lors du passage de curseur de souris. WP-Table Reloaded permet de nombreux r\u00e9glages fins !<\/p>\n<p>Merci d&rsquo;avance de vos commentaires&#8230;<\/p>\n<p>R\u00e9f\u00e9rences :<\/p>\n<ul>\n<li><a href=\"http:\/\/tobias.baethge.com\/wordpress-plugins\/wp-table-reloaded-english\/\" target=\"_blank\">http:\/\/tobias.baethge.com\/wordpress-plugins\/wp-table-reloaded-english\/<\/a><\/li>\n<li><a href=\"http:\/\/wpcandy.com\/broadcasts\/the-sweet-plugin\/day-4\" target=\"_blank\">http:\/\/wpcandy.com\/broadcasts\/the-sweet-plugin\/day-4<\/a> (tutoriel vid\u00e9o en anglais)<\/li>\n<li><a href=\"http:\/\/datatables.net\/\" target=\"_blank\">http:\/\/datatables.net\/<\/a> plugin de la librairie jQuery utilis\u00e9 par WP-Table Reloaded<\/li>\n<li><a href=\"http:\/\/www.openscriptsolution.com\/2011\/09\/20\/how-to-change-the-default-selected-record-count-in-wp-table-reloaded-plugin-of-wordpress\/\" target=\"_blank\">Comment changer le nombre de record affich\u00e9 par d\u00e9faut dans la table <\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Si vous souhaitez afficher des donn\u00e9es en tableau dans votre blog WordPress, vous pouvez soit utiliser l&rsquo;\u00e9diteur TinyMCE int\u00e9gr\u00e9, avec des fonctionnalit\u00e9s limit\u00e9es \u00e0 la pr\u00e9sentation statique de donn\u00e9es, soit opter pour un plugin\u00a0(une extension de WordPress) permettant non seulement &hellip; <a href=\"https:\/\/www.loligrub.be\/blog\/2011\/10\/19\/wp-table-reloaded-ou-comment-inserer-un-tableau-dans-wordpress\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[133],"tags":[105,22,197],"class_list":["post-1201","post","type-post","status-publish","format-standard","hentry","category-howto","tag-cms","tag-web","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/posts\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":37,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/posts\/1201\/revisions"}],"predecessor-version":[{"id":1285,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/posts\/1201\/revisions\/1285"}],"wp:attachment":[{"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/media?parent=1201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/categories?post=1201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loligrub.be\/blog\/wp-json\/wp\/v2\/tags?post=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}