In Easy Digital Downloads (EDD) ist der [downloads]-Shortcode die Standardmethode, um alle Ihre Produkte auf einer einzigen Seite auszugeben. Wenn Sie mit dem Shortcode und seinen Funktionen nicht vertraut sind, können Sie hier mehr darüber erfahren.
Standardmäßig werden Ihre Produkte in einem Rasterlayout mit drei Spalten und neun Produkten angezeigt, mit Paginierung, wenn Sie mehr als neun Produkte in Ihrem Shop haben. In den meisten Themes erfüllt diese Anzeige ihren Zweck ohne zusätzliche CSS (Designstile) des Themes selbst. Es kann jedoch sein, dass sie in allen Themes nicht genau so aussieht, wie Sie es möchten. Schlimmer noch, die Anzeige kann auf kleineren Bildschirmen verzerrt werden.
Dies führt typischerweise zu der Frage: „Ist der [downloads]-Shortcode responsiv?“ Anders ausgedrückt: Leute fragen sich oft, warum die Anzeige auf kleinen Bildschirmen nicht so gut aussieht. Ich werde unten erklären, warum das so ist und was Sie dagegen tun können.
Warum ist der [downloads]-Shortcode nicht responsiv?
Das Erste, was Sie beachten sollten, ist, dass Responsivität keine Einheitslösung ist. Die Responsivität eines Elements hängt vollständig von der Umgebung ab, in der es sich befindet.
Nehmen wir zum Beispiel an, es gibt einen Bereich auf Ihrer Website mit zwei nebeneinander liegenden Spalten, die mit Text gefüllt sind und jeweils 50 % der Breite Ihres Hauptinhaltsbereichs einnehmen. Nehmen wir auch an, dass der Hauptinhaltsbereich, der diese Zwillingsspalten „hält“, 1000 Pixel breit ist. Das bedeutet, jede Spalte ist 500 Pixel breit. Wenn die Bildschirmbreite auf kleineren Geräten schmaler wird, beginnen die nun 300 Pixel breiten Spalten bei einer Inhaltsbreite von etwa 600 Pixeln, ein wenig zu schmal zu werden. Das ist unerwünscht, daher verwendet responsives CSS Regeln, die besagen: „Bei einer Bildschirmbreite von 600 Pixeln ändern Sie die Breite dieser beiden Spalten von 50 % auf 100 % und stapeln die linke über die rechte.“ Und damit werden sie wieder gut lesbar.
Das ist genau, wie responsives CSS funktioniert, und es geschieht mit Absicht.
Mit diesem Verständnis wird klar, dass wir, um das responsive CSS zu schreiben, damit diese Zwillingsspalten auf die Bildschirmbreite „reagieren“, auch die Abmessungen der Elemente um die Spalten herum kennen müssen. Im WordPress-Kontext bedeutet dies, dass wir das Design und die Abmessungen Ihres Themes kennen müssen.
Natürlich können wir nicht alle Details aller Themes kennen, die unsere Kunden möglicherweise verwenden. Während Ihr Theme den [downloads]-Shortcode möglicherweise in einem Element ausgibt, das nur 500 Pixel breit ist, gibt das Theme der nächsten Person denselben Shortcode möglicherweise in einem Element aus, das 900 Pixel breit ist. Ihr responsives CSS müsste sich stark von dem responsiven CSS der anderen Person unterscheiden. Und wenn Sie das Theme wechseln, müsste sich Ihr responsives CSS erneut ändern.
Anders ausgedrückt: Wir können einfach nicht vorhersagen, wann und wie der [downloads]-Shortcode auf alle Themes gleichzeitig reagieren soll.
Gibt es Themes, die responsives CSS für den [downloads]-Shortcode enthalten?
Ja, in der Tat! In den meisten Themes, die für die Nutzung von EDD entwickelt wurden, ist dies bereits für Sie erledigt. Zum Beispiel gestaltet das Theme Vendd die Ausgabe des [downloads]-Shortcodes für alle Bildschirmgrößen vollständig. Sie können es hier in der Demo sehen: https://easydigitaldownloads.com/vendd/ Vendd macht nicht nur den [downloads]-Shortcode responsiv, sondern verbessert auch das Layout.
Wenn ein Theme nicht im Hinblick auf EDD verbessert wurde, ist die Ausgabe des Shortcodes nicht responsiv. Sie wird so angezeigt, wie sie durch die Shortcode-Parameter festgelegt wurde, und nicht mehr. Wenn Sie möchten, dass sie auf die Bildschirmgröße "reagiert", muss dies speziell aus der Perspektive Ihres Themes geschrieben werden.
Beachten Sie auch, dass einige Themes, die für EDD verbessert wurden, den [downloads]-Shortcode möglicherweise immer noch nicht responsiv machen. Stattdessen enthalten sie eine eigene Vorlage für die Anzeige von Produkten und empfehlen Ihnen, die benutzerdefinierte Vorlage anstelle des Shortcodes zu verwenden.
Hier finden Sie eine große Auswahl an EDD-fähigen Themes: https://easydigitaldownloads.com/themes/
Was soll ich tun, wenn ich kein EDD-fähiges Theme verwende?
Wenn Sie Ihr Theme, das nicht für EDD optimiert ist, weiterhin verwenden möchten, aber auch möchten, dass die Ausgabe Ihres [downloads]-Shortcodes responsiv ist, haben Sie zwei Möglichkeiten:
1. Wenn Sie ein CSS-Autor sind, können Sie einfach responsives CSS schreiben, um die Ausgabe des Shortcodes nach Ihren Wünschen in Ihrem Theme zu gestalten. Sie müssen sich keine Sorgen machen, dass EDD Änderungen vornimmt, die Ihr CSS beeinträchtigen.
2. Beauftragen Sie einen Designer, die Ausgabe für Sie responsiv zu gestalten. Es ist keine unglaublich schwierige Aufgabe, sodass der Designer mit EDD selbst nicht vertraut sein muss. Responsives CSS ist ein weit verbreiteter Designstil und fast jeder CSS-Autor sollte in der Lage sein, die Ausgabe anzuzeigen und sie für Ihr Theme responsiv zu gestalten. Wenn Sie sich an einen Profi halten möchten, der bereits mit dem EDD-Ökosystem vertraut ist, empfehlen wir unseren vertrauenswürdigen Partner Codeable.
