Como adicionar corretamente o Javascript em functions.php

9

Eu gostaria de remover algumas flechas feias que são padrão nos botões do carrinho no WooCommerce. Para conseguir isso, encontrei uma dica para adicionar o seguinte código, que deve remover as setas quando o documento for carregado.

Eu suponho que vou colocá-lo em minhas funções.php? Como exatamente eu faria isso?

$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});

EDITAR

Ok. Eu tentei essa abordagem:

Fiz um arquivo chamado 'removeArrows.js' e o coloquei na pasta do meu plugin. Isso tem o mesmo conteúdo do código original, exceto jQuery, em vez de $. Então eu adicionei o seguinte ao functions.php:

function wpb_adding_scripts() {
      wp_register_script('my_amazing_script', plugins_url('removeArrows.js', FILE), array('jquery'),'1.1', true);
     wp_enqueue_script('my_amazing_script');
 } 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

Não consigo descobrir como exibir corretamente o código. Isso não funcionou. Alguma sugestão para fazer este trabalho?

Fonte de snippet do jQuery

    
por user2806026 25.06.2014 / 20:30

4 respostas

5

Seu $scr na sua função wp_register_script() está errado. Dado que o seu functions.php está dentro do seu plugin, e o seu removeArrows.js está na raiz do seu plugin, o seu $scr deve ser parecido com este

plugins_url( '/removeArrows.js' , __FILE__ )

Outro ponto de nota é sempre uma boa prática carregar seus scripts e estilos por último. Isso garantirá que ele não seja substituído por outros scripts e estilos. Para fazer isso, basta adicionar uma prioridade muito baixa (número muito alto) ao seu parâmetro de prioridade ( $priority ) de add_action .

 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 

E sempre carrega scripts e estilos de carregamento / enfileiramento por meio da ação wp_enqueue_scripts gancho, como este é o gancho adequado para usar. Não carregue scripts e estilos diretamente em wp_head ou wp_footer

EDITAR

Para os temas, como você indicou que agora mudou tudo para o seu tema, seu $scr mudaria para este

 get_template_directory_uri() . '/removeArrows.js'

para temas pais e isso

get_stylesheet_directory_uri() . '/removeArrows.js'

para temas infantis. Seu código completo deve se parecer com isso

function wpb_adding_scripts() {
    wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', array('jquery'),'1.1', true);
    wp_enqueue_script('my_amazing_script');
} 

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); 
    
por Pieter Goosen 26.06.2014 / 14:47
4

Eu não adicionaria outro arquivo js externo, é apenas um recurso extra e desnecessário para buscar e isso é algo que queremos reduzir em termos de tempo de carregamento da página.

Eu adicionaria esse snippet jQuery na cabeça do seu site usando o wp_head hook. Você deve colar o seguinte no seu arquivo de funções de tema ou plug-ins. Eu também me certifiquei de que o jQuery está no modo sem conflito, como você pode ver abaixo.

add_action('wp_head','woocommerce_js');

function woocommerce_js()
{ // break out of php ?>

jQuery(document).ready(function($) {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
<?php } // break back into php

Depois de fazer isso e atualizar sua página, verifique a fonte da página para verificar se esse snippet jQuery está sendo carregado na sua página. Se for, então deve funcionar, a menos que seja algo fora do snippet real do jQuery que você está usando.

    
por Matt Royal 25.06.2014 / 23:06
0

Como a resposta já é aceita, só quero dizer que há outra maneira de enfileirar o código JavaScript no rodapé, o que fiz muitas vezes.

no arquivo functions.php:

function load_script_to_remove_arrow(){
?>
<script>
$(document).ready(function() {
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace(" →", "");
    });
    $(".woocommerce-cart").html(function(i, val) {
    return val.replace("← ", "");
    });
});
</script>
<?php
}
add_action( 'wp_footer', 'load_script_to_remove_arrow' );

você pode carregar este script para um modelo de página específico usando apenas a condição

if( is_page_template( 'page-template.php' ) ):

//put above code (or just add_action part) inside this condition to load file only if the condition is true 

endif;

se o page-template.php estiver no diretório (digamos, diretório templates no diretório raiz do seu tema) você pode escrever como:

is_page_template( 'templates/page-template.php' );
    
por maverick 24.08.2018 / 16:31
-1

Para responder à pergunta, devemos primeiro fazer uma distinção entre javascript e JQuery.

Para apresentá-lo de maneira simples:

  • O Javascript é baseado no ECMAScript
  • JQuery é uma biblioteca para Javascript

Então, na realidade, você faz duas perguntas diferentes:

  • Seu título fala sobre uma solução para implementar o javascript
  • Sua pergunta fala sobre uma solução para implementar o JQuery

Como os resultados do Google mostram seu título e todo o conteúdo da página fala sobre o JQuery, isso pode se tornar muito frustrante para as pessoas que pesquisam uma solução de javascript.

E agora para a solução JQuery:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

E a solução de javascript:

wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Este código pode ser adicionado ao seu functions.php A localização dos scripts nos dois casos é wp-content/themes/theme-name/js/script.js

Codificação feliz!

    
por fred heuvel 24.08.2018 / 13:24