Support » Allgemeine Fragen » jquery einbinden

  • Hallo zusammen,
    ich versuche gerade rauszufinden wie ich am besten eine jquery einbinde. Im Netz habe ich mir schon einige Beiträge angeschaut, aber wie man ein fremdes Jquery einbindet finde ich da irgendwie nicht. Momentan lade ich es mir runter und erstelle eine eigene Datei auf welche ich verlinke:

    add_action( 'wp_enqueue_scripts', 'my_script2' );
    function my_script2 () {
        wp_enqueue_script(
            'my-plugin2', // eigener Name
            get_template_directory_uri() . '/js/leaffleet.js', // Pfad
            array('jquery') // Abhängigkeiten
        );
    }

    Danach kann ich auf die Funktionen zugreifen.

    Jetzt würde ich das aber gerne mal über die HTTPs Adresse machen. Auf der Homepage werden mir die Links bereit gestellt:

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin="">

    Das soll in die Head section – also eigentlich doch head.php?

    und das jquery soll danach aktiviert werden:

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
       integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""><script>

    Ich kriege das aber einfach nicht hin.

    Das muss doch ganz einfach gehen oder nicht?

    Gruß und danke

    Moderationshinweis: Bitte verwende künftig beim Erstellen von Forenbeiträgen im Beitragseditor zur Formatierung von Code den [code]-Button. Dadurch werden deine Beiträge für andere lesbarer, was deine Chancen auf eine Antwort erhöht. Grüße, Bego

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Hallo,
    mir ist nicht klar, wozu das gut sein soll? – Schreibe doch einfach mal, was du damit erreichen willst.
    Viele Grüße
    Hans-Gerd

    Thread-Starter token001

    (@token001)

    Vielleicht ist das auch einfach ein Missverständnis meinerseits.

    Ich möchte gerne die Funktionen von bspw. Datatables oder Leaflet auf meiner WordPress Seite nutzen.
    Dabei muss der Inhalt dynamisch angepasst werden, daher rufe ich das via PHP oder jquery auf. Ich clicke bspw auf eine GPS Koordinate und bekomme dann den Standort auf der Karte angezeigt.

    Jetzt dachte ich, dass es sinnvoller ist den Link einzubinden und die Funktionen zu nutzen,als die Dateien auf die WordPress Seite hochzuladen.

    Ich bin da eher als Neuling unterwegs.

    ok, jetzt weiß ich zwar, dass das irgendwas mit „Datatables oder Leaflet“ zu tun hat, aber was genau du machen willst, wissen wir leider immer noch nicht.

    wp_enqueue_script() sorgt dafür, dass JavaScript richtig im Header oder Footer eingebunden wird, ohne dass du ein Child-Theme erstellen und das Template header.php oder footer.php ersetzen musst. (Die Funktion lässt sich außer in der functions.php eines Child-Themes auch gut mit Code Snippets oder einem eigenen Plugin integrieren.)

    Um weitere Parameter zu übergeben kannst du die Funktion wp_script_add_data() verwenden. Beispiele findest du hier: https://developer.wordpress.org/reference/functions/wp_script_add_data/#user-contributed-notes

    Thread-Starter token001

    (@token001)

    Okay, na das ist kein Geheimnis. Also ich habe eine Tabelle von Informationen mit u.a. GPS Positionen. Diese wird automatisch immer wieder neu erstellt und ist via dem Jquery Datatable formatiert.

    Ich möchte jetzt, dass mit einem Click auf solch eine „Position“ die Karte, in diesem Fall eben Leaflet, aktualisiert wird. Oder gibt es da noch einen besseren Weg?

    Ich bin mir aber nicht so ganz sicher was der richtige weg ist um css und js in WordPress einzubinden. Aktuell mache ich es wie oben beschrieben und hinterlege den Code im /js/ Verzeichnis.

    Ich bin mir aber nicht so ganz sicher was der richtige weg ist um css und js in WordPress einzubinden. Aktuell mache ich es wie oben beschrieben und hinterlege den Code im /js/ Verzeichnis.

    wp_enqueue_script() ist einem fest im Header-Template eingebauten Code immer vorzuziehen, weil es mehr Flexibilität bietet. Ansonsten gilt: was für dich funktioniert.

    wir setzen das Plugin leaflet Maps im Zusammenhang mit dem Plugin The Events Calendar ein, um Orte auf OpenStreetMaps anzeigen zu lassen.
    Insofern kenne ich das Plugin, wenn es sich um Leaflet Maps handelt. Vielleicht wäre das ein Ansatz, anstatt die Library einzubinden.

    Thread-Starter token001

    (@token001)

    Hallo zusammen,
    vielen Dank, also ich habe das jetzt wie gewohnt gemacht und mir die Library einfach runtergeladen.

    ich mache dann das wp_enqueue_script auf die Datei im js Verzeichnis:
    get_template_directory_uri() . ‚/js/leaffleet.js‘
    Sollte ja soweit richtig sein oder? ( muss dann gleich mal weiterforschen wie ich es nur auf bestimmten Seiten nutze )

    ich versuche es mal bei Gelegenheit noch mit //<www Adresse>/

    @Hans-Gerd:
    ich hatte das Plugin auch erstmal runtergeladen, fand es dann aber zu statisch.
    so weiß ich auch einfacher wie mein Objekt heißt 🙂

    Viele Grüße und auf jeden Fall ein großes Dank an Euch
    Rainer

    … muss dann gleich mal weiterforschen wie ich es nur auf bestimmten Seiten nutze

    if( is_page( 'ihr-weg-zu-uns' ) {
      add_action( 'wp_enqueue_scripts', 'my_leaflet_js' );
    }

    Hallo,
    danke für die Info. Könnte in der Tat auch für mich interessant sein, auch wenn ich mit dem Plugin bei diesem Projekt zufrieden bin. Aber es gibt eine kleine Problematik, bei der evtl. die Library interessant sein könnte.
    Viele Grüße
    Hans-Gerd

    Was hast Du gegen Leaflet Map?

    fand es dann aber zu statisch.

    Wenn Du Deine GPS-Daten in der Datenbank hast, kannst Du doch mit einem php-Skript den Shortcode dieses Plugins erzeugen, z.B.:

    echo '[leaflet-marker lat='.$lat.' lng='.$lon.'[/leaflet-marker]';

    echo do_shortcode( '[leaflet-marker lat='.$lat.' lng='.$lon.'[/leaflet-marker]' );

    oder ab WordPress 5.4

    echo apply_shortcodes( '[leaflet-marker lat='.$lat.' lng='.$lon.'[/leaflet-marker]' );

Ansicht von 12 Antworten - 1 bis 12 (von insgesamt 12)
  • Das Thema „jquery einbinden“ ist für neue Antworten geschlossen.