Wordpress und jquery

  • Hallo,
    vielleicht kann mir hier im Forum jemand weiterhelfen, damit ich jquery auf einer WordPress-Seite zum Laufen bringe. Ich möchte eine jquery Scrollbar auf der Seite installieren und habe folgendes dazu unternommen:
    auf der function.php habe ich jquery wie folgt eingebunden:

    // enqueue base scripts and styles
    add_action( 'wp_enqueue_scripts', 'bones_scripts_and_styles', 999 );
    //

    function mein_script_laden() {
    wp_enqueue_script(
    // Name des Scripts (benötigt man z.B. zum Entfernen, etc.)
    'handlerMeinesScripts',
    // Ort der Script-Datei
    get_template_directory_uri() . 'library/js/scroll.js',
    // Liste der Scripts, welche von der Script-Datei benötigt werden.
    // In diesem Falle das von Wordpress geladene jqeury
    array('jquery')
    );
    }

    add_action( 'wp_enqueue_scripts', 'mein_script_laden' );

    Auf der page.php binde ich den Slider so ein:

    <div id="content">
    <div class="scrollbar-external_wrapper">
    <div class="scrollbar-external">

    ..... Inhalt

    </div></div></div>

    Und unter CSS style ich das Ganze.

    Jetzt funktioniert jedoch jquery nicht. Ich habe auch schon eine andere Funktion eingebunden, die auch nicht geht, daher ist meine Vermutung, dass ich jquery nicht richtig in der function.php eingebunden habe. Oder habe ich noch ganz was anderes übersehen?
    Kann mir jemand weiterhelfen?
    Vielen Dank für eure Tipps.
    Liebe Grüße
    Steph

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hallo Steph,

    ein Beispiel:

    Code
    function mein_js() {
        wp_enqueue_script( 'mein-js', 
                           get_stylesheet_directory_uri() . '/js/mein.js',
                           array( 'jquery' ), 
                           '1.0', 
                           true);
    }
    add_action( 'wp_enqueue_scripts', 'mein_js' );

    Das Einbinden der Datei reicht sicherlich nicht ohne Weiteres aus. Davon abgesehen kannst Du $ auch nicht unmittelbar nutzen. Du solltest den Aufruf in einer zusätzlichen JavaScript-Datei (die ebenfalls eingebunden werden muss) ausführen.

    Beispiel:

    Code
    (function($){
        $(document).ready( function(){
            // Deine Aufrufe
        }
    })(jQuery);
  • Hallo Brawler,
    vielen Dank für deine Antwort.
    Soweit - so klar. Ich habe natürlich eine zusätzliche jquery-Datei, die ich im obigen Beispiel eingefügt habe:
    // Ort der Script-Datei
    get_template_directory_uri() . 'library/js/scroll.js',

    Meine Frage ist, wie ich jquery korrekt in die Wordpress function.php einbaue und ob obiges korrekt ist.
    Vielen Dank
    Liebe Grüße
    Steph

  • Das wäre der korrekte Weg. Falls get_template_directory_uri Probleme macht, verwende bitte die stylesheet-Variante. Das baust Du am Ende der functions.php ein. Im Firefox/Chrome kannst Du im Quelltext prüfen, ob die Datei korrekt eingebunden wurde. Alternativ in der Entwicklerkonsole (F12) auf Fehler überprüfen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!