• Gelöst Uwe

    (@uwe367)


    Hallo allerseits,

    ich bin zwar nicht neu, was die Webprogrammierung betrifft, aber doch recht neu und unerfahren, was WordPress betrifft.
    Ich habe mich mit Version 6.6 schon recht vertraut gemacht aber nun stehe ich vor einem kleinen Problem und erhoffe mir bzw. erbitte Hilfe dabei, dieses zu lösen.
    Ich würde gerne diesen Bildslider unter https://fotorama.io/ einbinden.

    In Tutorials, die man generell zum manuellen Einbinden im Web findet, soll man die Codes zum laden der js und css files in die Header.php und Footer.php einbinden. Bei den Blockthemes gibt es die aber scheinbar nicht mehr. Statt dessen gibt es u.a. header.html, footer.html usw.
    Als Übungsgrundlage verwende ich einen Klon des Theme „Twenty Twenty-four“.

    Um die relevanten Codes in den Head und Footer zu bekommen bin ich dann bei meiner Suche auf das Plugin WP Code gestoßen, habe dieses installiert und hoffe, dass das die richtige Wahl war. Jedenfalls werden die erforderlichen Dateien (js und css) im Quellcode geladen. Bis dahin schonmal gut.

    Nun stehe ich aber vor dem Problem, wie ich die Bilder in den Slider bekomme.
    Da dies kein Plugin ist, müßte ich, so denke ich jedenfalls, mittels HTML Block sehr wahrscheinlich direkt auf die in der Mediathek enthaltenen Dateien zugreifen oder habe ich einen Denkfehler?

    Wenn ich den Code ansehe, der von dem Slider zur Verfügung gestellt wird..

    <div class="fotorama">
      <img src="/1.jpg">
      <img src="/2.jpg">
    </div>

    …muss ich die Bilder in den img TAG´s verlinken, aber wie greife ich aus dem HTML Block auf der Seite, wo der Slider laufen soll, auf die Dateien aus der Mediathek zu?
    Oder unterliege ich hier einem generellen Denkfehler und muss einen komplett anderen Weg gehen?

    Vielleicht kann mir jemand einen Schubs in die richtige Richtung geben.
    Auf den Einsatz von Sliderplugins möchte ich beabsichtigt verzichten, da ich zum einen gerne selbst die Kontrolle über Elemente habe, die in der Seite laufen, zum anderen möchte ich verstehen wie das Ganze funktioniert und der beste Lehrmeister ist nunmal „handmade“.
    Ebenso gerne würde ich auch das Plugin WP Code verzichten, wenn mir jemand sagen kann, wo ich die Einbindungen händisch vornehmen kann.

    Ich bedanke mich im voraus für eure Bemühungen.

    Viele Grüße
    Uwe

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator threadi

    (@threadi)

    Da hast Du dir durchaus eine komplexe Aufgabe gestellt. Ich würde erstmal jedoch dein Vorhaben hinterfragen. Du schreibst du willst den Bilderslider von der anderen Seite einbinden. Geht es dir dabei darum diesen von extern einzubinden (einzubetten) oder nur dessen Aussehen wie auch Bilder zu übernehmen?

    Denn abhängig von der Antwort gibt es verschiedene Wege um das zu erreichen was Du willst. Wenn Du ihn einbetten (also nur durch Angabe einer einzelnen URL) willst, brauchst Du von der anderen Seite eine URL die Du in den dafür vorgesehenen Block eingeben kannst: https://wordpress.org/documentation/article/embed-block/ – oder du bindest es per Hand per iframe ein (per HTML-Block).

    Du bist jedoch nun einen Weg gegangen der eher danach aussieht, dass du nur das Aussehen und die Funktionalität nachempfinden willst. Ja, dazu musst Du die CSS- und JavaScript-Dateien einbinden. Hierfür gibt es in WordPress mehrere Wege:

    Ich als Entwickler würde eher letzteren Weg gehen da das mehr Flexibilität sowohl für die Entwicklung als auch die Verwendung ermöglicht.

    Jetzt kommen wir aber noch zur entscheidenden Frage wie man die Bilder einbindet. Da Du für die Verwendung des externen CSS und JavaScript auch den HTML-Code der Galerie benötigst, musst Du auch deren Code übernehmen – sonst greift ja das Styling und die Funktion gar nicht. Dadurch ergibt sich gleichzeitig, dass Du die Bilder auch per HTML-Code einbinden musst. Im Block Editor nutzt Du dafür also in jedem Fall einen HTML Block. Dein HTML-Code

    <div class="fotorama">
    <img src="/1.jpg">
    <img src="/2.jpg">
    </div>

    Ist hier also schon richtig. Bei den URLs der Bilder musst Du dich nun entscheiden zwischen 3 Möglichkeiten:

    • Du kannst sie von extern einbinden, d.h. du nimmst die URLs der Galerie in der Vorlagenseite. Das hat jedoch vom Datenschutz her Konsequenzen, da jeder Besucher deiner Website eine externe Datei lädt. Zudem bist Du abhängig von der Erreichbarkeit der externen Seite.
    • Du lädst die Bilder einzeln runter und in deiner Medienbibliothek hoch. Dann bekommst Du von deinem WordPress eine URL für jede Datei die Du dann in den o.g. HTML-Code für die Bilder einfügen musst. Das wäre vom Datenschutz her sicherer, auch wärst Du beim Aufruf der Seite nicht von externen Diensten abhängig.
    • Ich habe selbst ein Plugin zur Einbindung von externen Dateien in der Medienbibliothek bereitgestellt: https://de.wordpress.org/plugins/external-files-in-media-library/ – dort kannst Du die URLs der externen Bilder reinwerfen und bekommst für deine lokale WordPress-Installation eine Proxy-URL erzeugt. Diese URL kannst Du dann in den o.g. HTML-Code einfügen. Auch hier wär der Datenschutz gegeben, allerdings wärst Du immernoch leicht abhängig von der externen Seite.

    Du siehst, es gibt viele Wege und Möglichkeiten. Du musst dich für den Entscheiden der dir am ehesten liegt und passt. Das ist auch die Freiheit in den Möglichkeiten die dir WordPress bietet.

    Thread-Starter Uwe

    (@uwe367)

    Hallo @threadi und besten Dank, dass Du dich meinem Anliegen angenommen hast.

    Ich dachte mir bereits, dass es da mehrere Möglichkeiten gibt. Was das „einbinden / einbetten“ betrifft, ich habe mich da vielleicht etwas unglücklich ausgedrückt.
    Mein Vorhaben sieht so aus, dass ich das „Silderpaket“ von der Website des Autoren herunter lade, entpacke und dann in ein Unterverzeichnis des Themeordners in der WP Installation kopiere, so dass der Slider im Prinzip dann Teil des Theme wird und die nötigen Dateien dann durch eine lokale URL in WP Code aufgerufen werden. Wie das funktioniert, habe ich bereits heraus gefunden.

    BTW….
    Ich könnte es auch einfacher machen und den Silder auslagern und mittles iframe einbinden, aber das ist nicht das, was ich möchte, da ich solche Dinge gerne lokal hoste. Eine Möglichkeit wäre auch, den Slider in einem Unterverzeichnis auf dem lokalen Host laufen zu lassen und einzubinden, aber das erklärt mir nicht die Techniken, wie ich den Slider ins System einbinden kann und genau diese Vorgehensweise möchte ich verstehen und erlernen. Außerdem wäre das „am System vorbei“ und würde einem weiteren Redaktuer die Arbeit erschweren, da dann wieder FTP Zugang nötig ist und und und.
    Einen ganz entscheidenden Grund gegen eine Einbindung von extern hast Du bereits genannt, nämlich den Datenschutz (DSGVO). In dem Fall gehe ich sogar so weit, dass ich Webfonts nur lokal einbinde.
    Das aber nur am Rande.

    Ja, wie gesagt würde ich den Slider gerne so einbauen, wie oben beschrieben und so, wie Du schreibst, lag ich ja gar nicht so falsch mit meinen Vermutungen.
    Besten Dank auch für das Angebot Deines Plugins, was ich sehr gerne annehmen werde.

    Du schreibst aber auch, dass die Einbindung der benötigten Dateien (js und css) über die functions.php realisiert werden kann.
    Ich habe mir die functions.php von Twenty Twenty-four mal angeschaut und klar, darin sind, wie der Dateiname schon vermuten läßt, PHP Funktionen deklariert.
    Wie würde denn in dieser der Aufruf, um js und css in Header bzw. Footer einzubinden, aussehen?
    Irgendwie kann ich aus dem Inhalt der functions.php nicht ableiten, wie dieser aussehen müsste.

    Wie ich bereits schrieb, möchte ich mich, so gut als möglich, nicht von externen Quellen (Plugins) abhängig machen. Klar, dass das dann mehr Aufwand bedeutet, aber wenn ich einmal den Durchblick habe, sollte das mehr oder weniger wie von selbst laufen.
    Klar ist das über WP Code ein einfaches, aber in irgend einer lokalen Datei müssen diese Aufrufe durch das Plugin abgelegt werden oder erfolgt das nur in der Datenbank?

    Auf jeden Fall bin ich, dank Deiner Hilfe, schonmal ein Stück weiter und dafür danke ich Dir ganz herzlich.




    Moderator threadi

    (@threadi)

    Ich hab nach meiner Antwort auch nochmal nachgedacht und habe dabei auch erkannt, dass es dir ja um die Einbindung eines Galerie-Scriptes geht. Nicht um die Einbindung einer externen Seite. Somit hab ich meine Antwort wohl doch etwas zu ausführlich formuliert gehabt.

    Für dein Ziel sehe ich daher nun 2 Möglichkeiten zur Umsetzung:

    • Als eigenes Plugins.
    • Als Ergänzung per Child-Theme.

    Beide Wege sind in der Umsetzung von deinem Wunsch sehr ähnlich. Du musst die Dateien des Scriptes zunächst irgendwo ablegen (beim Plugin in dem Plugin-Verzeichnis, beim Theme im Theme-Verzeichnis). Das Zauberwort zur Einbindung ist „enqueue“, siehe Handbuch:

    https://developer.wordpress.org/reference/functions/wp_enqueue_script/
    https://developer.wordpress.org/reference/functions/wp_enqueue_style/

    Wenn Du sie auch im Block Editor einbinden willst, müsstest Du es zusätzlich hierüber machen:
    https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/

    Beispiele zur Verwendung sind in den Kommentaren in den Handbuch-Seiten beschrieben.

    Dann kommt die Herausforderung den HTML-Code auch unterzubringen. Da Du den Block Editor nutzen willst, sehe ich für dich auch hier wieder 2 Möglichkeiten:

    Ich hoffe dir damit einen gewissen Schub an Ideen für deine individuelle Umsetzung gegeben zu haben.

    Thread-Starter Uwe

    (@uwe367)

    Danke Dir für die Antwort und die darin enthaltenen Links.
    Jetzt habe ich etwas zu tun, was mich dem Ganzen mit Sicherheit ein Stück näher bringt

    Deine vorherige Antwort war schon ok so denn es wäre ja im Bereich des Möglichen gewesen, dass ich mit meiner Vermutung komplett falsch liege.

    Mit der Materie eines eigenständigen Plugins habe ich mich bisher noch nicht befasst, aber das kommt auch irgerndwann.
    Ich werde versuchen, das über ein Child Theme zu realisieren.

    Danke dir ganz herzlich für deine Hilfe und die ausführlichen Erklärungen ubnd wenn ich noch Fragen habe, würde ich gerne auf diesen Thread zurück greifen.
    Und ja, damit hast Du mir auf jeden Fall einen Schubs in die richtige Richtung gegeben.

    Thread-Starter Uwe

    (@uwe367)

    Leider kann ich meinen letzten Beitrag nicht mehr editieren, daher Sorry fürs Doppelposting.
    Ich möchte erwähnen, dass der Slider läuft und ich es, dank Deiner Hilfe, hinbekommen habe und zwar so, wie ich es mir im Eingangsposting vorgestellt habe.

    Danke Dir nochmals ganz herzlich für Deine Hilfe.

    Moderator threadi

    (@threadi)

    Sehr schön 🙂 Danke für die Rückmeldung und das gelöst-Markieren.

    Thread-Starter Uwe

    (@uwe367)

    Gerne, so wird es in den Forenregeln gewünscht 🙂

    Ich werde mich jetzt mal näher mit der functions.php befassen, denn es soll, so wie ich gelesen habe, die bessere Methode sein, die Dateien dort einzubinden statt direkt über den HTML Head.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)