Das Hinzufügen von Javascript zu functions.php verursacht Probleme mit meiner Vorlage

Ich möchte einen “Read on” -Link, der beim Klicken auf einen anderen Teil der Seite verschoben wird.

Ich verstehe das HTML-Bit und ich habe sogar ein paar schöne Scrolling verwendet .

Es klappt. Aber wenn implementiert, bricht ein Teil meines Themas. Das Slider-Bild ist verschwunden und der H1-Text ist vollständig gebündelt.

Hier ist, was ich meinem Kind functions.php hinzugefügt habe, um das Javascript in den Kopfbereich zu injizieren.

/** * Smooth scroll */ add_action('wp_head', 'wpse_43672_wp_head'); function wpse_43672_wp_head(){ //Close PHP tags ?> //ADD YOUR PLAIN CODE HERE   $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });  //STOP YOUR PLAIN CODE HERE <?php //Open PHP tags } 

Wie bricht diese Hälfte meine Vorlage, aber scrollen Sie immer noch gut? Gibt es einen besseren Weg?

Bearbeiten:

OK, jetzt versuche ich das Skript in die Warteschlange zu stellen.

Hier ist, was ich in meinem Kind habe functions.php (habe die js in einer Datei). Die Vorlage lädt OK, aber der Bildlauf animiert nicht. Ich kann keinen Fehler im Inspektor sehen.

 function wpb_adding_scripts() { wp_register_script('scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array('jquery')); wp_enqueue_script('scroll'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Letzte Bearbeitung:

Hier ist die Lösung, die ich benutzt habe …

Ich habe dies der Child functions.php hinzugefügt

 function wpb_adding_scripts() { wp_register_script('scroll', get_stylesheet_directory_uri() . '/js/scroll.js', array('jquery')); wp_enqueue_script('scroll'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Ich habe dies in der Datei scroll.js in einem js-Ordner in meinem Child-Verzeichnis hinzugefügt.

 (function($){ $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); })(jQuery); 

Ich bekam tatsächlich einen js-Fehler und musste einen noConplict-Wrapper hinzufügen.

Solutions Collecting From Web of "Das Hinzufügen von Javascript zu functions.php verursacht Probleme mit meiner Vorlage"

jQuery ist bereits mit WordPress geladen, so dass Sie nicht benötigen

Wenn Sie jQuery mit WordPress verwenden, benötigen Sie wahrscheinlich keine Konflikt-Wrapper: https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Es kann passieren, dass JS-Fehler in Ihrer Browser-Konsole ausgegeben werden. Daher können sich weitere Informationen zu Fehlern als nützlich erweisen.

Es gibt definitiv einen besseren Weg – beginnend mit diesem Leitfaden für das Enqueueing von Javascript sollten Sie solide Gründe geben, WP-Skripte ein wenig besser zu verstehen: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts -and-styles-in-wordpress /