Dans Easy Digital Downloads (EDD), le shortcode [downloads] est la méthode standard pour afficher tous vos produits sur une seule page. Si vous n’êtes pas familier avec le shortcode et ses capacités, vous pouvez en savoir plus ici.
Par défaut, vos produits s’affichent dans une mise en page en grille avec trois colonnes, neuf produits et une pagination si vous avez plus de neuf produits dans votre boutique. Dans la plupart des thèmes, cet affichage remplit son rôle sans aucun CSS (styles de conception) supplémentaire du thème lui-même. Cependant, il peut ne pas avoir exactement l’apparence que vous souhaitez dans tous les thèmes. Pire encore, l’affichage peut être déformé sur les petits écrans.
Cela conduit généralement à la question : « le shortcode [downloads] est-il responsive ? ». En d’autres termes, les gens se demandent souvent pourquoi l’affichage n’est pas si beau sur les petits écrans. Je vais expliquer pourquoi, et ce que vous pouvez faire à ce sujet ci-dessous.
Pourquoi le shortcode [downloads] n’est-il pas responsive ?
La première chose à noter est que la responsivité n’est pas un comportement universel. La responsivité d’un élément dépend entièrement de l’environnement dans lequel il est contenu.
Par exemple, disons qu’il y a une section de votre site avec deux colonnes côte à côte remplies de texte, chacune occupant 50 % de la largeur de votre zone de contenu principale. Disons aussi que la zone de contenu principale « contenant » ces deux colonnes mesure 1000 pixels de large. Cela signifie que chaque colonne mesure 500 pixels de large. À mesure que la largeur de l’écran devient plus étroite sur les appareils plus petits, une largeur de contenu d’environ 600 pixels commence à rendre les colonnes, maintenant de 300 pixels, un peu trop étroites. C’est indésirable, donc le CSS responsive utilise des règles pour dire : « à une largeur d’écran de 600 pixels, changez la largeur de ces deux colonnes de 50 % à 100 %, et empilez la colonne de gauche sur celle de droite. » Et avec cela, elles redeviennent toutes deux lisibles.
C’est *exactement* ainsi que fonctionne le CSS responsive, et cela est fait intentionnellement.
Avec cette compréhension, il devient clair que pour écrire le CSS responsive afin que ces deux colonnes « répondent » à la largeur de l’écran, nous devons également connaître les dimensions des éléments environnants les colonnes. Dans le contexte de WordPress, cela signifie que nous devons connaître la conception et les dimensions de votre thème.
Bien sûr, nous ne pouvons pas connaître les détails de tous les thèmes que nos clients peuvent utiliser. Alors que votre thème peut afficher le shortcode [downloads] dans un élément qui ne fait que 500 pixels de large, le thème de la personne suivante peut afficher le même shortcode dans un élément qui fait 900 pixels de large. Votre CSS responsive devrait être très différent du CSS responsive de l’autre personne. Et si vous changez de thème, votre CSS responsive devrait changer à nouveau.
Autrement dit, nous ne pouvons tout simplement pas *prédire* quand et comment le shortcode [downloads] devrait répondre à tous les thèmes en même temps.
Existe-t-il des thèmes qui incluent du CSS responsive pour le shortcode [downloads] ?
Oui, en effet ! Dans la plupart des thèmes conçus pour tirer parti d'EDD, cela est déjà fait pour vous. Par exemple, le thème Vendd conçoit entièrement la sortie du shortcode [downloads] pour toutes les tailles d'écran. Vous pouvez le voir sur la démo ici : https://easydigitaldownloads.com/vendd/ Non seulement Vendd rend le shortcode [downloads] responsive, mais il améliore également la mise en page.
Si un thème n'a pas été amélioré en pensant à EDD, la sortie du shortcode ne sera pas responsive. Elle s'affichera comme spécifié par les paramètres du shortcode et rien de plus. Si vous avez besoin qu'il « réponde » à la taille de l'écran, cela doit être écrit spécifiquement du point de vue de votre thème.
Notez également que certains thèmes améliorés pour EDD peuvent toujours ne pas rendre le shortcode [downloads] responsive. Au lieu de cela, il inclura son propre modèle pour afficher les produits et suggère que vous utilisiez le modèle personnalisé au lieu du shortcode.
Il existe une large sélection de thèmes prêts pour EDD disponibles ici : https://easydigitaldownloads.com/themes/
Que dois-je faire si je n'utilise pas de thème prêt pour EDD ?
Si vous souhaitez continuer à utiliser votre thème qui n'est pas amélioré pour EDD, mais que vous souhaitez également que la sortie de votre shortcode [downloads] soit responsive, vous avez deux options :
1. Si vous êtes un auteur CSS, vous pouvez simplement écrire du CSS responsive pour que la sortie du shortcode fasse ce que vous voulez de votre thème. Vous n'aurez pas à vous soucier qu'EDD apporte des modifications qui casseront votre CSS.
2. Engagez un designer pour rendre la sortie responsive pour vous. Ce n'est pas une tâche incroyablement difficile, donc le designer n'a pas besoin d'être familier avec EDD lui-même. Le CSS responsive est un style de design largement compris et à peu près n'importe quel auteur CSS devrait être capable de visualiser la sortie et de la rendre responsive pour votre thème. Si vous souhaitez vous en tenir à un professionnel déjà familier avec l'écosystème EDD, nous vous recommandons notre partenaire de confiance, Codeable.
