Support » Allgemeine Fragen » jQuery aktivieren auf WordPress-Seiten

  • Gelöst efaq

    (@efaq)


    Hi liebe Community,

    kann mir jemand sagen, wie man jQuery korrekt auf WordPress einbindet, so dass es funktioniert?

    Auf meiner Seite funktioniert es nicht. Wenn ich es in der Console untersuche, wird mir nur folgendes angezeigt: https://www.bilder-upload.eu/bild-21a966-1566063357.png.html
    Angeblich ist jQuery installiert. Wenn ich dann einen Code direkt in der Console ausprobieren möchte, klappt es nicht.

    kann mir jemand sagen, was ich falsch mache? Hier habe ich mal einen Test-Beitrag veröffentlicht, auf dem jquery code eingebunden ist:

    https://www.blaehbauch-was-tun.de/muell/

    LG und danke für eure Hilfe!

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Moderator Bego Mario Garde

    (@pixolin)

    WordPress bringt bereits jQuery mit. Um es in einem Child-Theme nutzen zu können, kannst du in der functions.php folgendes einfügen:

    add_action( 'wp_enqueue_script', 'my_jquery' );
    function my_jquery() {
      wp_enqueue_script( 'jquery' );
    }

    [Tippfehler! Korrektur siehe weiter unten.]

    (Alternativ kannst du auch Code Snippets installieren und den Code als neues Code Snippet hinzufügen.)

    Da WordPress jQuery in einem Kompatibilitätsmodus verwendet, kann es mit dem Shortcut $ nichts anfangen.
    $("#some-element").yaddaYaddaYadda(); funktioniert nicht, aber
    jQuery("#some-element").yaddaYaddaYadda(); wird korrekt ausgeführt.

    Oder du verwendest jQuery so:

    jQuery(document).ready(function( $ ) {
    	
    	// $ Works! You can test it with next line if you like
    	// console.log($);
    	
    });

    (alle Codebeispiele aus diesem Beitrag: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)

    jQuery Migrate hat etwas mit Abwärtskompatibilität zu tun. Ob du das brauchst, hat Torsten mal ausführlich beschrieben: https://torstenlandsiedel.de/2018/09/15/benoetige-ich-das-jquery-migrate-skript-wirklich/

    • Diese Antwort wurde geändert vor 1 Monat von  Bego Mario Garde. Grund: Hinweis auf Tippfehler
    efaq

    (@efaq)

    Erst mal danke für die schnelle Rückmeldung!

    1) der Code von dir

    add_action( 'wp_enqueue_script', 'my_jquery' );
    function my_jquery() {
      wp_enqueue_script( 'jquery' );
    }

    schien bei mir nicht zu klappen. Kam zu einer Fehlmeldung.

    meine Functions.php-Datei vom Child-Theme sieht nun so aus:

    <?php
    
    add_action( 'wp_enqueue_scripts', 'add_my_scripts' ); 
    function add_my_scripts () {
        wp_enqueue_script(
            'my-plugin', // eigener Name
            get_template_directory_uri() . '/js/jquery.plugin.min.js', // Pfad
            array('jquery') // Abhängigkeiten
        );
    }
    
    add_filter( 'wp_default_scripts', $af = static function( &$scripts) {
        if(!is_admin()) {
            $scripts->remove( 'jquery');
            $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' );
        }    
    }, PHP_INT_MAX );
    unset( $af );

    Und die HTML-Seite meines WordPress-Beitrages:

    <script>
    $(document).ready(function(){
    jQuery(document).ready(function( $ ) {
    	
    	// $ Works! You can test it with next line if you like
    	// console.log($);
    	
    });
      $("button").click(function(){
        $("p").hide();
      });
    });
    </script>
    <h2>This is a heading</h2>
    This is a paragraph.
    
    This is another paragraph.
    
    <button>Click me to hide paragraphs</button>

    Leider geht es nach wie vor nicht. Habe ich etwas falsch gemacht?

    Moderator Bego Mario Garde

    (@pixolin)

    Das ist ärgerlich: Der Hook zum Einbinden von JavaScript ist wp_enqueue_scripts mit einem s am Ende; da ist mir ein Tippfehler durchgegangen. Richtig müsste es lauten:

    add_action( 'wp_enqueue_scripts', 'my_jquery' );
    function my_jquery() {
      wp_enqueue_script( 'jquery' );
    }

    Sorry.

    Was das hingegen soll …

    <script>
    $(document).ready(function(){
    jQuery(document).ready(function( $ ) {
    	
    	// $ Works! You can test it with next line if you like
    	// console.log($);
    	
    });
      $("button").click(function(){
        $("p").hide();
      });
    });

    habe ich nicht verstanden. Ich hab doch beschrieben, dass du nicht

    $("button").click(function(){
        $("p").hide();
      });

    verwenden kannst, sonders das in
    jQuery(document).ready(function( $ ) { … }

    packen musst. So wie du das reinkopiert hast, kann das nicht klappen.

    Probier mal

    jQuery(document).ready(function( $ ) {
    $("button").click(function(){
        $("p").hide();
      });
    }

    Wenn du übrigens ein Glossar mit Akkordion-Funktion aufbauen möchtest, gibt es auch fertige Blöcke für den Block-Editor, z.B. in CoBlocks.

    Moderator Bego Mario Garde

    (@pixolin)

    … übrigens ist der Beitragseditor nicht der richtige Ort, um JavaScript einzufügen. Weil das ein Sicherheitsrisiko wäre, wird der Code „escaped“ (also in für die Ausführung unbrauchbare Character Entities umgewandelt).

    
    jQuery(document).ready(function( $ ) {
    $(&quot;button&quot;).click(function(){
        $(&quot;p&quot;).hide();
      });
    }
    

    wird folglich nicht funktionieren.

    Du könntest das aber in eine JavaScript-Datei js/tolles.js packen und dann ebenfalls einbinden:

    add_action( 'wp_enqueue_scripts', 'my_script' );
    function my_script() {
        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'mein_tolles_script', get_stylesheet_directory_uri() . 'js/tolles.js', array( 'jquery' );
    }
    • Diese Antwort wurde geändert vor 1 Monat von  Bego Mario Garde. Grund: Code korrigiert

    Hi Bego,

    sorry erstmal für die späte Rückmeldung. Ich war die letzten beiden Wochen krank. Komme erst jetzt zum Antworten.

    Also habe es genauso eingepackt wie du gesagt hast. Aber es klappt leider nach wie vor nicht..

    Hier mal der Code von meiner functions.php:

    <?php
    
    add_action( 'wp_enqueue_scripts', 'my_jquery' );
    function my_jquery() {
      wp_enqueue_script( 'jquery' );
    }
    
    add_filter( 'wp_default_scripts', $af = static function( &$scripts) {
        if(!is_admin()) {
            $scripts->remove( 'jquery');
            $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' );
        }    
    }, PHP_INT_MAX );
    unset( $af );

    Und hier der Code aus meinem Beitrag:

    <script>
    jQuery(document).ready(function( $ ) {
    $("button").click(function(){
        $("p").hide();
      });
    }
    </script>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    
    <p>This is another paragraph.</p>
    
    <button>Click me to hide paragraphs</button>

    Dein Code:

    jQuery(document).ready(function( $ ) {
    $(&quot;button&quot;).click(function(){
        $(&quot;p&quot;).hide();
      });
    }

    wird dieser automatisch im Editor umgewandelt? Weil wenn ich auf „Visuell“ klicke und dann wieder auf „Text“ wird mir der oben genannte Code nach wie vor unverändert angezeigt. also so:

    jQuery(document).ready(function( $ ) {
    $("button").click(function(){
        $("p").hide();
      });
    }

    Danke dir für deine Hilfe bis hier hin! Weiß leider einfach nicht, weshalb es nicht klappt.

    Moderator Bego Mario Garde

    (@pixolin)

    Beim Code fehlt noch eine schließende Klammer:

    jQuery(document).ready(function( $ ) {
    $("button").click(function(){
        $("p").hide();
      });
    });

    Gebe ich das in den Entwickler-Tools des Browsers in der Konsole ein, funktioniert der „Click me to hide paragraphs“-Button.

    Allerdings ist es wie gesagt nicht ideal, JavaScript in einem Beitrag einzufügen. Du solltest das in ein eigenes Plugin packen oder zumindest eines der Plugins verwenden, die dafür vorgesehen sind, z.B. Custom CSS and JavaScript.

    Top!! Jetzt klappt es bei mir auch. Endlich

    und ja klar. ich würde das auslagern dann. Hab es erstmal nur als Test da gelassen.
    In der Entwicklungskonsole werden mir folgende Fehlermeldungen angezeigt:

    (index):12 A parser-blocking, cross site (i.e. different eTLD+1) script, https://ssl.google-analytics.com/ga_exp.js?utmxkey=164043077-1&utmx=&utmxx=&utmxtime=1566998652299, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
    (anonymous) @ (index):12
    adsbygoogle.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    (index):94 Note: The site owner has disabled Google Analytics tracking for your user role.
    ga_exp.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    1467beb3-a54b-43dd-a31d-008334ceacce.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

    Kann man die ignorieren?

    Und welche Vorteile – bis auf vielleicht schnelle Ladezeit – gibt es noch, wenn man den Code auslagert?

    Grüße

    hab den Code jetzt mal geändert in

    <script>
    jQuery(document).ready(function( $ ) {
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({left: '250px'});
      });
    });
    </script>
    <button>Start Animation</button>
    
    <p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
    
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
    

    jetzt klappt es wieder nicht. Ich verstehe nicht, warum es vorher ging und diesmal nicht.

    Wollte das Beispiel von hier nachbauen: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

    Moderator Bego Mario Garde

    (@pixolin)

    Ich hatte dir doch erklärt, wieso das hier nicht geht:

    
    $(document).ready(function(){
      $("button").click(function(){
        $("div").animate({left: '250px'});
      });
    });
    

    Allerdings sind das auch keine WordPress-Fragen und du bist vermutlich in einem jQuery-Forum besser aufgehoben.

    Da du zwischenzeitlich zu einem brauchbaren Ergebnis gekommen bist, setze ich den Thread jetzt auf „gelöst“ und wünsche noch viel Erfolg.

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