In Easy Digital Downloads (EDD) is de [downloads] shortcode de standaardmanier om al je producten op één pagina weer te geven. Als je niet bekend bent met de shortcode en zijn mogelijkheden, kun je er hier over lezen.
Standaard worden je producten weergegeven in een rasterindeling met drie kolommen, negen producten en paginering als je meer dan negen producten in je winkel hebt. In de meeste thema's voldoet deze weergave prima zonder extra CSS (ontwerpstijlen) van het thema zelf. Het ziet er echter misschien niet precies uit zoals je wilt in alle thema's. Sterker nog, de weergave kan vervormd raken op kleinere schermen.
Dit leidt doorgaans tot de vraag: "is de [downloads] shortcode responsive?" Met andere woorden, mensen vragen zich vaak af waarom de weergave er niet zo goed uitziet op kleine schermen. Ik zal hieronder uitleggen waarom, en wat je eraan kunt doen.
Waarom is de [downloads] shortcode niet responsive?
Het eerste dat opvalt, is dat responsiviteit geen gedrag is dat voor iedereen werkt. De responsiviteit van een element hangt volledig af van de omgeving waarin het zich bevindt.
Laten we bijvoorbeeld zeggen dat er een sectie op je site is met twee naast elkaar geplaatste kolommen gevuld met tekst, die elk 50% van de breedte van je hoofdinhoudsgebied beslaan. Laten we ook zeggen dat het hoofdinhoudsgebied dat die dubbele kolommen "vasthoudt" 1000px breed is. Dat betekent dat elke kolom 500px breed is. Naarmate de schermbreedte op kleinere apparaten smaller wordt, ergens rond een inhoudsgebiedbreedte van 600px, worden de nu 300px brede kolommen een beetje te smal. Dat is onwenselijk, dus responsive CSS gebruikt regels om te zeggen: "bij een schermbreedte van 600px, verander de breedte van deze twee kolommen van 50% naar 100%, en plaats de linker kolom bovenop de rechter kolom." En daarmee worden ze weer leesbaar.
Dat is precies hoe responsive CSS werkt, en het gebeurt met opzet.
Met dat begrip wordt het duidelijk dat om de responsive CSS te schrijven om die dubbele kolommen te laten "reageren" op de schermbreedte, we ook de afmetingen van de elementen rond de kolommen moeten kennen. In de WordPress-context betekent dit dat we het ontwerp en de afmetingen van je thema moeten kennen.
Natuurlijk kunnen we de details van alle thema's die onze klanten gebruiken niet kennen. Hoewel je thema de [downloads] shortcode mogelijk uitvoert in een element dat slechts 500px breed is, kan het thema van de volgende persoon dezelfde shortcode uitvoeren in een element dat 900px breed is. Je responsive CSS zou heel anders moeten zijn dan de responsive CSS van de ander. En als je van thema wisselt, zou je responsive CSS opnieuw moeten veranderen.
Met andere woorden, we kunnen simpelweg niet voorspellen wanneer en hoe de [downloads] shortcode moet reageren op elk thema tegelijk.
Zijn er thema's die responsive CSS bevatten voor de [downloads] shortcode?
Jazeker! In de meeste thema's die zijn gebouwd om EDD te benutten, is dit al voor u gedaan. Het Vendd-thema bijvoorbeeld, ontwerpt de uitvoer van de [downloads]-shortcode volledig voor alle schermformaten. U kunt het hier op de demo bekijken: https://easydigitaldownloads.com/vendd/ Vendd maakt de [downloads]-shortcode niet alleen responsief, maar verbetert ook de lay-out.
Als een thema niet is verbeterd met EDD in gedachten, zal de uitvoer van de shortcode niet responsief zijn. Het wordt weergegeven zoals gespecificeerd door de shortcode-parameters en niets meer. Als u wilt dat het "reageert" op schermgrootte, moet dat specifiek vanuit het perspectief van uw thema worden geschreven.
Merk ook op dat sommige thema's die zijn verbeterd voor EDD de [downloads]-shortcode mogelijk nog steeds niet responsief maken. In plaats daarvan bevat het zijn eigen sjabloon voor het weergeven van producten en stelt het voor dat u het aangepaste sjabloon gebruikt in plaats van de shortcode.
Er is hier een grote selectie van EDD-ready thema's beschikbaar: https://easydigitaldownloads.com/themes/
Wat moet ik doen als ik geen EDD-ready thema gebruik?
Als u uw thema dat niet is verbeterd voor EDD wilt blijven gebruiken, maar u wilt ook dat de uitvoer van uw [downloads]-shortcode responsief is, heeft u twee opties:
1. Als u een CSS-auteur bent, kunt u eenvoudig responsieve CSS schrijven om de uitvoer van de shortcode te doen wat u wilt vanuit uw thema. U hoeft zich geen zorgen te maken dat EDD wijzigingen aanbrengt die uw CSS zullen verbreken.
2. Huur een ontwerper in om de uitvoer voor u responsief te maken. Het is geen ongelooflijk moeilijke taak, dus de ontwerper hoeft niet bekend te zijn met EDD zelf. Responsieve CSS is een algemeen begrepen ontwerpstijl en vrijwel elke CSS-auteur zou de uitvoer moeten kunnen bekijken en deze responsief moeten kunnen maken voor uw thema. Als u wilt vasthouden aan een professional die al bekend is met het EDD-ecosysteem, raden we onze vertrouwde partner aan, Codeable.
