{"id":4153,"date":"2014-08-31T14:01:12","date_gmt":"2014-08-31T12:01:12","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4153"},"modified":"2015-07-10T11:40:30","modified_gmt":"2015-07-10T09:40:30","slug":"pourquoi-bootstrap-n-est-pas-adapte-theme-wordpress","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/wordpress\/pourquoi-bootstrap-n-est-pas-adapte-theme-wordpress","title":{"rendered":"Pourquoi Bootstrap n’est pas adapt\u00e9 pour un th\u00e8me WordPress"},"content":{"rendered":"

Mes coll\u00e8gues m’entendent souvent r\u00e2ler dans l’open space<\/em> lorsque je vois un th\u00e8me WordPress con\u00e7u sur une base de Twitter Bootstrap, d’autant plus lorsque l’on voit le code source et l’usage qui en est fait. Cette traduction d’un article de Fr\u00e4nk Klein<\/a> d\u00e9fend assez bien mon point de vue.<\/p>\n

NDA : Certains compl\u00e9ments ou interpr\u00e9tations sont ajout\u00e9s entre crochets, certaines tournures de phrase sont l\u00e9g\u00e8rement adapt\u00e9es. Enfin, certains termes ne sont pas traduits car ancr\u00e9s dans le jargon des m\u00e9tiers du Web.
\n——<\/p>\n

Depuis sa sortie en 2011, Bootstrap est rapidement devenu le framework<\/em> le plus populaire sur Github. Cette popularit\u00e9 a \u00e9galement eu un impact sur \u200b\u200ble monde des th\u00e8mes WordPress, avec de plus en plus d’auteurs utilisant cet outil au cours du d\u00e9veloppement ou m\u00eame au moment de publier des th\u00e8mes pr\u00e9sentant Bootstrap comme argument de vente unique. (ou principal)<\/p>\n

C’est quelque chose de surprenant car Bootstrap n’est pas vraiment l’outil adapt\u00e9 pour le d\u00e9veloppement d’un th\u00e8me WordPress.<\/p>\n

Bootstrap : le mauvais outil pour cette t\u00e2che<\/h2>\n

Bootstrap a \u00e9t\u00e9 cr\u00e9\u00e9 chez Twitter comme outil pour que les d\u00e9veloppeurs back-end<\/em> puissent ais\u00e9ment cr\u00e9er des interfaces pour leurs applications. Avant Bootstrap, beaucoup d’autres biblioth\u00e8ques furent utilis\u00e9es, aboutissant en des interfaces incoh\u00e9rentes et difficiles \u00e0 maintenir.<\/p>\n

Bootstrap a donc \u00e9t\u00e9 cr\u00e9\u00e9 avec un but pr\u00e9cis en t\u00eate, et continue \u00e0 \u00eatre d\u00e9velopp\u00e9 d’apr\u00e8s cette vision initiale du projet. Il a \u00e9t\u00e9 cr\u00e9\u00e9 pour que les d\u00e9veloppeurs puissent se concentrer sur du code back-end<\/em> et it\u00e9rer rapidement sans se soucier de l’aspect front-end<\/em>.<\/p>\n

C’est pourquoi Bootstrap n’est pas le bon outil pour cr\u00e9er un th\u00e8me WordPress\u00a0: le th\u00e8me WordPress, ou l’apparence du site une fois le th\u00e8me activ\u00e9, est tout ce qui compte. [Il n’y a rien \u00e0 attendre d’original dans votre th\u00e8me, dans son aspect graphique, avec un outil de back-end<\/em>]<\/p>\n

Bootstrap ne fait pas les choses \u00e0 la WordPress<\/h2>\n

WordPress facilite le d\u00e9veloppement de th\u00e8me en mettant \u00e0 disposition un lot de fonctions utilisables dans les fichiers de template<\/em>. En tirant parti de la sortie HTML de ces fonctions, les d\u00e9veloppeurs peuvent \u00e9crire du code propre et efficace qui fonctionne avec une grande vari\u00e9t\u00e9 de contenus [ou de structures].<\/p>\n

\"bootstrap\"<\/p>\n

Bootstrap, d’autre part, a sa propre approche de la fa\u00e7on dont le code HTML est [et doit \u00eatre] structur\u00e9, et il ne cadre pas tr\u00e8s bien avec ce que WordPress fournit par d\u00e9faut.<\/p>\n

Partant de cette diff\u00e9rence, les d\u00e9veloppeurs doivent prendre des mesures suppl\u00e9mentaires et \u00e9crire un surplus de code pour modifier le comportement de WordPress afin de l’ajuster au fonctionnement du framework<\/em>. Un bon exemple pour cela sont les menus de navigation. Au lieu d’utiliser le code g\u00e9n\u00e9r\u00e9 par wp_nav_menu()<\/code><\/a>, les d\u00e9veloppeurs doivent \u00e9crire des Walkers<\/em> personnalis\u00e9s<\/a> qui changent la structure HTML de sortie de sorte que les codes CSS et JavaScript de Bootstrap puissent \u00eatre utilis\u00e9s.<\/p>\n

De cette approche en ressortent davantage de code et une efficacit\u00e9 moindre, une maintenance plus difficile et un temps de d\u00e9veloppement sup\u00e9rieur, tout en ne permettant aucun b\u00e9n\u00e9fice sur les am\u00e9liorations produites par les fonctions natives de WordPress.<\/p>\n

Bootstrap est pl\u00e9thorique<\/h2>\n

Le code d’un framework<\/em> ne peut jamais \u00eatre aussi efficient qu’un code \u00e9crit pour une proposition sp\u00e9cifique, pour la simple raison que les frameworks<\/em> se construisent sur une base g\u00e9n\u00e9rale pour tendre vers des cas plus sp\u00e9cifiques, et ajoutent des redondances dans le processus. Souvent, plusieurs classes CSS doivent \u00eatre ajout\u00e9es \u00e0 des \u00e9l\u00e9ments HTML pour obtenir le r\u00e9sultat visuel d\u00e9sir\u00e9, classes CSS qui une fois combin\u00e9es apportent le CSS n\u00e9cessaire.<\/p>\n

\"C'est
C’est assur\u00e9ment plein de fonctionnalit\u00e9s\u2026<\/figcaption><\/figure>\n

Ce qui s’ajoute \u00e0 ce probl\u00e8me est que, bien des fois, le code CSS utile pour la conception du th\u00e8me n’est pas le seul packag\u00e9<\/em>, mais l’ensemble du code du framework<\/em> l’est \u00e9galement.<\/p>\n

Bootstrap n’encourage pas au bon design<\/h2>\n

L’une des fonctionnalit\u00e9s les plus populaires de Bootstrap est le colonage (12 colonnes), cette grille \u00ab\u00a0full responsive<\/em>\u00ab\u00a0. En ajoutant des classes \u00e0 la structure HTML, les d\u00e9veloppeurs peuvent cr\u00e9er des sites web adapt\u00e9s \u00e0 toutes les tailles d’\u00e9cran.<\/p>\n

Malheureusement, l’utilisation d’une grille pr\u00e9d\u00e9finie est une mauvaise approche pour l’aboutissement d’un bon design. Le probl\u00e8me majeur est que vous concevez de l’ext\u00e9rieur, bousculant le contenu dans des bo\u00eetes pr\u00e9d\u00e9finies. En r\u00e9sultent des mod\u00e8les qui offrent un sentiment de rigidit\u00e9 et un aspect m\u00e9canique, sans proportions appropri\u00e9es ou harmonie.<\/p>\n

L’approche de la \u00ab\u00a0taille unique\u00a0\u00bb garantit \u00e9galement que le th\u00e8me que vous concevez ne s’adapte pas \u00e0 toutes les contraintes telles que les dimensions de l’image ou de la longueur de la ligne. Que vous utilisiez une [police de caract\u00e8re] sans-serif \u00e9troite ou une didone-serif qui a besoin d’espace pour respirer, la grille reste la m\u00eame. Il en ressort souvent une mauvaise lisibilit\u00e9 et une typographie non harmonieuse.<\/p>\n

Une meilleure approche<\/h2>\n

Tout grand design de th\u00e8me commence avec une vision. Quel est le but derri\u00e8re le th\u00e8me que vous concevez ? Qui envisagez-vous comme utilisateur et dans quel contexte\u00a0?<\/p>\n

Cela vous informe sur les contraintes avec lesquelles vous devez travailler. Concevoir un portfolio riche en images est un d\u00e9fi [(voire besoin)] diff\u00e9rent de celui de cr\u00e9er une exp\u00e9rience optimale pour une th\u00e8me de magazine proposant de longs articles.<\/p>\n

Une fois que vous avez d\u00e9fini une vision, vous commencez alors la conception de l’int\u00e9rieur. Obtenez un \u00e9chantillon du contenu pour effectuer des tests, puis commencez \u00e0 concevoir l’exp\u00e9rience du parcours de ce contenu. Vous verrez qu’une fois que vous vous concentrez sur le contenu, vous pouvez construire autour de lui les \u00e9l\u00e9ments du design qui restent, et obtenir un r\u00e9sultat harmonieux.<\/p>\n

Sur le plan technique, utilisez un gabarit de th\u00e8me de d\u00e9part qui vous permette de d\u00e9marrer rapidement avec une structure de base et vous permette de plonger rapidement dans le balisage de pr\u00e9sentation, sans trop porter votre attention sur le design. Utilisez des biblioth\u00e8ques et les extraits de code (snippets) pour r\u00e9duire le temps de d\u00e9veloppement. Les th\u00e8mes par d\u00e9faut fournis avec WordPress sont g\u00e9n\u00e9ralement de bonnes ressources pour extraire des fragments de code.<\/p>\n

Article issu de la traduction et de l’adaptation de : Why Bootstrap is a bad fit for WordPress Themes<\/a><\/em><\/p>\n

Bien entendu, selon moi, cela ne s’arr\u00eate pas uniquement \u00e0 Bootstrap en particulier. D’autres biblioth\u00e8ques du m\u00eame type soul\u00e8vent la m\u00eame probl\u00e9matique, bien que certaines soient plus adapt\u00e9es \u00e0 un aspect front-ent<\/em>, mais l’objet de l’article n’est pas de les lister mais de soulever le probl\u00e8me de leur utilisation pour du th\u00e8me WordPress. D’ailleurs EdenPulse a \u00e9galement \u00e9crit un billet<\/a> sur le sujet.<\/p>\n","protected":false},"excerpt":{"rendered":"

Mes coll\u00e8gues m’entendent souvent r\u00e2ler dans l’open space lorsque je vois un th\u00e8me WordPress con\u00e7u sur une base de Twitter Bootstrap, d’autant plus lorsque l’on voit le code source et l’usage qui en est fait. Cette traduction d’un article de Fr\u00e4nk Klein d\u00e9fend assez bien mon point de vue.<\/p>\n","protected":false},"author":4,"featured_media":4166,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[13],"tags":[54,470,594],"coauthors":[597],"class_list":["post-4153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-developpement","tag-theme","tag-traduction"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4153","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=4153"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/4153\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/4166"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=4153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=4153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=4153"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=4153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}