Plugins Wordpress Tableaux responsive

Zout16 · #1 2017-03-24 13:18:42

Bonjour à tous,

Je recherche actuellement des plugins Wordpress pour pouvoir faire des tableaux responsive.
J'en ai essayé plusieurs et en ai trouvé un convenable (table maker) mais les autres que j'ai testés ne proposent soit pas de tableaux responsive, ou ne sont pas du tout pratiques à utiliser (tablepress,Data Tables Generator...).

En connaissez-vous d'autres par hasard ?

Merci d'avance !

DjibouTeaM · #2 2017-03-24 13:30:04

moi j'ajoute dans le header de mon theme les appels aux CDNs Bootstrap

A minima du coup, pour tes tableaux, tu leur colles juste la classe 'table' et ils seront responsive

Dernière modification par DjibouTeaM (2017-03-24 13:30:30)

Zout16 · #3 2017-03-24 13:46:39

Merci beaucoup !
Par contre je ne connaissais pas du tout Bootstrap. C'est un CMS pour faire des sites responsive sur mobile c'est ça ? Du coup je ne comprends pas trop quand tu me parles de CDNs...

Merci à toi

DjibouTeaM · #4 2017-03-24 15:45:53

en fait, pour faire simple (je vais pas parler tech, donc les devs on ne crie pas au scandale, je vulgarise )

Bootstrap est une sorte de Framework/extension (ajout de fonctionnalités basées sur les fonctions initiales) CSS et JQuery.
JQuery est lui même une extension de fonctionnalité de Javascript.

Et oui, bootstrap est fait pour être responsive et avoir un rendu quasi-équivalent sur mobile et ordis, mais en respectant la lisibilité des mobiles (les éléments vont s'adapter à la taille, voire même passer à la ligne dans le cas de plusieurs cases....

Le but de mon opération est donc de charger les CSS et scripts JS de Bootstrap dans le <head></head> de ton thème afin que ce dernier puisse utiliser les fonctions bootstrap.

Un CDN est un serveur dédié à l'hébergement de ressources de types Javascript, CSS ou encore images.

Pour résumer, dans ton code tu ajoutes ça :

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

à l'intérieur des balises <head></head> de ton thème.

Ensuite, pour rendre responsive tes tables, tu auras juste à y ajouter la classe table :