Support » Allgemeine Fragen » Dynamischen Shortcode aufgrund von gedrückten Button generieren

  • Ich möchte auf einer (Elementor) Seite dem Nutzer die Möglichkeit geben unterschiedliche Gelerien (und zwar jeweils nur eine ausgewählte) anzuzeigen. Dazu hab ich nen Grid mit Buttons angelegt mit unterschiedlichen IDs. Auf Basis des vom Benutzers gedrückten Buttons möchte ich nun darunter die gewählte Galerie (über den jeweils zugeordneten Galerie Shortcode) dynamisch anzeigen lassen. Also beim Klick auf nen anderen Button wird ne andere Galerie angezeigt.

    Leider sind meine PHP Kenntnisse bescheiden (aber ausbaufähig!) und ich bräuchte etwas „Dummenhilfe“. Wo platziere ich den PHP Code, der mir auf Basis der Button ID einen Shorttcode generiert und den dynamisch in ein Widget einfügt (und ggf. ein redraw der Seite anstößt). PHP Code kann ich – soweit ich weiß – nicht im HTML Widget selber unterbringen – ich werd ihn also als Shortcode einfügen müssen. Mir fehlt es an Wissen über den strukturellen Aufbau.

    Wie bekommt der PHP Code z.B. die ID des gedrückten Buttons? Wie sorge ich dafür, daß nach dem Betätigen eines Buttons der PHP Code ausgeführt wird? Kann ich dafür sorgen, daß nur der Galeriebereich dann neu aufgebaut wird oder ist ein kompletter „Reload“ der Seite erforderlich?

    Danke Euch schon mal für die Hilfe,
    Timo

    • Dieses Thema wurde geändert vor 4 Monaten, 3 Wochen von .
Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Das ist alles ein wenig komplexer. 🙂

    Ich versuche es mal vereinfacht darzustellen: Nehmen wir an, du möchtest auf einer Webseite drei Buttons anzeigen und bei Klick auf einen Button wird Text A, Text B oder Text C gezeigt. Die übliche Vorgehensweise ist, die Texte als HTML zu laden und mit einer CSS-Regel auszublenden. Die Buttons werden mit einer JavaScript oder jQuery-Funktion verbunden, damit bei Klick der eine oder andere Text eine neue CSS-Klasse zugewiesen bekommt und damit angezeigt wird. (Kennst du vermutlich, wenn Texte in Tabs dargestellt werden.) Wird ein anderer Button angeklickt, werden alle Texte auf die ursprüngliche CSS-Klasse zurückgesetzt (und damit ausgeblendet) und der Text, der mit dem angeklickten Button verknüpft ist, bekommt die CSS-Klasse um ihn einzublenden.

    Nun wäre es schön (und nicht mal sonderlich kompliziert), das auf deine Galerien anzuwenden. Allerdings haben wir hier ein Performance-Problem, weil die Fotos aller Galerien erst geladen, dann ausgeblendet und anschließend über die Zuweisung einer CSS-Klasse per Button wieder eingeblendet werden müssten. Der Wechsel der CSS-Klassen ist dabei nicht das Problem; du könntest sogar Tabs-Blöcke für den Gutenberg-Editor verwenden. Problematisch ist aber unter Umständen, dass erst sehr viele Bilder geladen werden, von denen dann nur ein Bruchteil angezeigt wird – und das dauert eigentlich zu lange, um eine Webseite performant darzustellen.

    Die Idee, mit einem Reload immer wieder die gleiche Webseite zu laden, nur jeweils eine andere Galerie anzuzeigen setzt voraus, dass die Webseite irgendwo auslesen muss, welche Galerie denn nun geladen werden soll. Das funktioniert üblicherweise über Cookies, die gesetzt und auch wieder ausgelesen werden müssen, was verhältnismäßig viel (Programmier-)aufwand ist.
    Eine bessere Möglichkeit wäre, für drei Galerien weitgehend identische Seiten zu erstellen, die jeweils eine andere Galerie beinhalten. Die Buttons könntest du dann jeweils mit einem Link zu einer dieser Galerien versehen. Dadurch würden bei Klick auf einen Button jeweils neue Webseiten geladen (was tatsächlich schneller funktioniert, da nur die Bilder einer Galerie geladen werden müssen).

    Tatsächlich gibt es auch die Möglichkeit, mit einer JavaScript-Funktion (Stichwort: AJAX) Teile der Webseite nachzuladen. Abgesehen davon, dass das in der Programmierung noch komplizierter ist, müsste auch geklärt werden, welche Inhalte da wie geladen werden. Eine Galerie ist ja eigentlich eine in einem Blogbeitrag oder einer Seite mit einem Shortcode vorgegebene Auswahl an Bildern und diese Auswahl müsste der Funktion übergeben werden, damit die Funktion „weiß“, was da nachgeladen werden soll. Vielleicht findest du zu den Suchbegriffen „wordpress AJAX gallery“ auch im Web ein (bezahltes?) Plugin, aber für jemand mit „bescheidenen PHP-Kenntnissen“ (wie du es selber beschreibst) ist das ein vermutlich zu ambitioniertes Projekt.

    Hallo Bego,
    herzliche Dank für Deine ausführliche Antwort! Auch, wenn ich mir da eine etwas „weniger aufwändigere“ Lösung erhofft hatte.

    Das Performance Problem aufgrund der Datenmengen in der Galerie ist in der Tat ein Thema (Es geht hier um bis zu 20 Galerieen mit jeweils 20-40 Bilder). Meine Hoffnung war eigentlich, mit einem OnClick Event im Button eine JS Funktion mit der Button ID aufzurufen, welche mir dann einen entsprechenden Shortcode für die gewünschte Galerie generiert, der dann in einem weiteren, unter den Buttons befindlichen Widget, eingesetzt wird. Tatsächlich müsste die Funktion dafür aber den HTML Code (Speziell den Shortcode für die Galerie) dynamisch zur Laufzeit verändern können und die Seite dann neu rendern. Aber wenn ich Dich richtig verstehe, ist das nicht so einfach.

    Es gibt natürlich entsprechende Galerie PlugIns, welche eine Kategorisierung zulassen, die selektiv eingeblendet werden können. Aber genau hier besteht das Problem, daß alle diese Plugins ebenfalls zunächst einmal ALLE Bilder aller Galerieen einlesen und dann nur selektiv darstellen (zudem gibt es bei den meisten da weitere Probleme, da nur die Previews kategorisiert ausgewählt werden können – die zugehörigen Lightboxen zeigt bei allen gefundenen PlugIns dann wieder alle an).

    Die „Simpel-Lösung“ ist natürlich, jetzt für jede Galerie eine eigene Seite zu generieren … aber das finde ich alles andere als „elegant“ 😉 … Mal schauen, was Ajax dazu sagt … ich stelle mich ganz gerne neuen Herausforderungen – irgendwie muss man sich ja neues Wissen aneignen 😉

    Dank Dir nochmal für die Erklärungen!
    Grüße, Timo

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)