Come aggiungere correttamente Javascript in Functions.php

Vorrei rimuovere alcune brutte frecce dall'aspetto standard sui pulsanti del carrello in WooCommerce. Per raggiungere questo obiettivo, ho trovato un suggerimento per aggiungere il seguente codice, che dovrebbe rimuovere le frecce quando il documento è stato caricato.

Presumo che lo inserirò nel mio function.php? Come lo farei esattamente?

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

MODIFICARE

Va bene. Ho provato questo approccio:

Crea un file chiamato 'removeArrows.js' e lo inserisce nella mia cartella plugin. Questo ha lo stesso contenuto del codice originale, tranne jQuery anziché $. Quindi ho aggiunto quanto segue a 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' ); 

Non riesco a capire come visualizzare correttamente il codice. Questo non ha funzionato. Qualche suggerimento per farlo funzionare?

Sorgente frammento jQuery

Il tuo $scrnella tua wp_register_script()funzione è sbagliato. Dato che funziona.php nel tuo plugin e che removeArrows.js si trova nella radice del tuo plugin, $scrdovresti apparire così

plugins_url( '/removeArrows.js' , __FILE__ )

Un altro punto da notare, è sempre buona norma caricare gli script e gli stili per ultimi. Ciò assicurerà che non venga superato da altri script e stili. Per fare ciò, basta aggiungere una priorità molto bassa (numero molto alto) al parametro di priorità ( $priority) di add_action.

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

E sempre di carico / scripts di accodamento e stili tramite il wp_enqueue_scriptsgancio di azione, in quanto questo è il gancio giusto per l'uso. Non caricare script e stili direttamente su wp_headowp_footer

MODIFICARE

Per i temi, come hai indicato che ora hai spostato tutto sul tema, il tuo $scrcambierà in questo

 get_template_directory_uri() . '/removeArrows.js'

per i temi principali e questo

get_stylesheet_directory_uri() . '/removeArrows.js'

per temi per bambini. Il tuo codice completo dovrebbe apparire così

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

Non aggiungerei un altro file js esterno, è solo una risorsa extra e non necessaria da recuperare ed è qualcosa che vogliamo ridurre in termini di tempi di caricamento della pagina.

Vorrei aggiungere questo frammento jQuery nella testa del tuo sito Web utilizzando il wp_headgancio. Dovresti incollare quanto segue nel tuo file delle funzioni del tema o dei plugin. Mi sono anche assicurato che jQuery sia in modalità senza conflitti, come puoi vedere di seguito.

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

Una volta che hai fatto questo e aggiornato la tua pagina, controlla l'origine della pagina per assicurarti che questo frammento jQuery sia effettivamente caricato nella tua pagina. In tal caso, dovrebbe funzionare a meno che non sia presente nello snippet jQuery in uso.

Dato che la risposta è già stata accettata, voglio solo dire che c'è un altro modo per accodare il codice javascript nel piè di pagina che ho fatto molte volte.

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

puoi caricare questo script in un determinato modello di pagina solo usando condition

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 page-template.php è nella directory (ad esempio directory dei template nella directory principale del tuo tema) puoi scrivere come:

is_page_template( 'templates/page-template.php' );

Per rispondere alla domanda dobbiamo prima fare una distinzione tra javascript e JQuery.

Per dirlo in modo semplice:

• Javascript si basa su ECMAScript
• JQuery è una libreria per Javascript

Quindi in realtà fai due domande diverse:

• Il tuo titolo parla di una soluzione per l'implementazione di JavaScript
• La tua domanda parla di una soluzione per l'implementazione di JQuery

Poiché i risultati di Google mostrano il tuo titolo e tutto il contenuto della pagina parla di JQuery, questo può diventare molto frustrante per le persone che cercano una soluzione javascript.

E ora per la soluzione JQuery:

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

E la soluzione javascript:

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

Questo codice può essere aggiunto alle tue funzioni.php La posizione degli script in entrambi i casi è wp-content/themes/theme-name/js/script.js

Buona programmazione!