Adicionando javascript para functions.php causa problemas com o meu modelo

Eu quero um link “Lido” que se move para outra parte da página quando clicado.

Eu entendo o bit HTML e até usei uma boa rolagem .

Funciona. Mas quando implementado quebra parte do meu tema. A imagem do controle deslizante desapareceu e o texto H1 está completo para a esquerda.

Aqui está o que adicionei ao meu filho functions.php, para injetar o javascript na área da cabeça.

/** * 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 } 

Como é que isso mexe o meu modelo, mas ainda me deslizo bem? Existe uma maneira melhor?

Editar:

OK, agora estou tentando enqueue o script.

Aqui está o que eu tenho no meu filho functions.php (tenha o js em um arquivo). O modelo carrega OK, mas ele rola não está animando. Não consigo ver um erro no inspetor.

 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' ); 

Edição final:

Aqui está a solução que usei …

Eu adicionei isso às funções filho.php

 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' ); 

Eu adicionei isso para o arquivo scroll.js em uma pasta js no meu diretório filho.

 (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); 

Na verdade, estava recebendo um erro de js e precisava adicionar um invólucro noConplict .

Solutions Collecting From Web of "Adicionando javascript para functions.php causa problemas com o meu modelo"

jQuery já está carregado com o WordPress, então você não precisará

Ao usar o jQuery com o WordPress, você provavelmente irá exigir invólucros sem conflito: https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

Provavelmente, os erros de JS são emitidos no console do navegador, de modo que nos dar mais informações sobre os erros também podem ser úteis.

Definitivamente, há uma maneira melhor – começando com este guia para criar JavaScript Javascript deve dar-lhe fundamentos sólidos para entender scripts WP um pouco melhor: http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts -and-styles-in-wordpress /