So fügen Sie Javascript korrekt in functions.php hinzu

Ich möchte einige hässlich aussehende Pfeile entfernen, die bei Warenkorbschaltflächen in WooCommerce Standard sind. Um dies zu erreichen, habe ich einen Tipp zum Hinzufügen des folgenden Codes gefunden, der die Pfeile entfernen sollte, wenn das Dokument geladen wurde.

Ich gehe davon aus, dass ich es in meine functions.php einfügen werde. Wie genau würde ich das machen?

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

BEARBEITEN

In Ordnung. Ich habe diesen Ansatz ausprobiert:

Erstellte eine Datei mit dem Namen 'removeArrows.js' und legte sie in meinem Plugin-Ordner ab. Dies hat den gleichen Inhalt wie der ursprüngliche Code, außer jQuery statt $. Dann habe ich Folgendes zu functions.php hinzugefügt:

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

Ich kann nicht herausfinden, wie der Code richtig angezeigt wird. Das hat nicht funktioniert. Irgendwelche Vorschläge, damit dies funktioniert?

jQuery-Snippet-Quelle

Ihre $scrin Ihrer wp_register_script()Funktion ist falsch. Da sich Ihre functions.php in Ihrem Plugin befindet und sich Ihre removeArrows.js im Stammverzeichnis Ihres Plugins befindet, $scrsollten Sie so aussehen

plugins_url( '/removeArrows.js' , __FILE__ )

Ein weiterer wichtiger Punkt ist, dass es immer empfehlenswert ist, Ihre Skripte und Stile zuletzt zu laden. Dadurch wird sichergestellt, dass es nicht von anderen Skripten und Stilen überschrieben wird. Fügen Sie dazu einfach Ihrem Prioritätsparameter ( $priority) von eine sehr niedrige Priorität (sehr hohe Zahl) hinzu add_action.

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

Und immer Last / enqueue Skripte und Stile über die wp_enqueue_scriptsAktion Haken, da dies der richtige Haken verwendet wird. Laden Sie keine Skripte und Stile direkt in wp_headoderwp_footer

BEARBEITEN

Wenn Sie für Themen angegeben haben, dass Sie jetzt alles in Ihr Thema verschoben haben, wird $scrdies geändert

 get_template_directory_uri() . '/removeArrows.js'

für übergeordnete Themen und dies

get_stylesheet_directory_uri() . '/removeArrows.js'

für untergeordnete Themen. Ihr vollständiger Code sollte so aussehen

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

Ich würde keine weitere externe js-Datei hinzufügen, es ist nur eine zusätzliche und unnötige Ressource zum Abrufen, und das ist etwas, das wir in Bezug auf die Ladezeiten von Seiten reduzieren möchten.

Ich würde dieses jQuery-Snippet mit dem wp_headHook in den Kopf Ihrer Website einfügen. Sie würden Folgendes in Ihre Theme- oder Plugins-Funktionsdatei einfügen. Ich habe auch sichergestellt, dass sich jQuery im konfliktfreien Modus befindet, wie Sie unten sehen können.

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

Nachdem Sie dies getan und Ihre Seite aktualisiert haben, überprüfen Sie die Seitenquelle, um sicherzustellen, dass dieses jQuery-Snippet tatsächlich in Ihre Seite geladen wird. Wenn dies der Fall ist, sollte es funktionieren, es sei denn, das tatsächliche jQuery-Snippet, das Sie verwenden, ist fehlerhaft.

Da die Antwort bereits akzeptiert wird, möchte ich nur sagen, dass es eine andere Möglichkeit gibt, Javascript-Code in der Fußzeile in die Warteschlange zu stellen, was ich schon oft getan habe.

in der Datei 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' );

Sie können dieses Skript nur unter Verwendung der Bedingung in eine bestimmte Seitenvorlage laden

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;

Wenn sich die Seite-template.php im Verzeichnis befindet (z. B. im Vorlagenverzeichnis im Stammverzeichnis Ihres Themas), können Sie wie folgt schreiben:

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

Um die Frage zu beantworten, müssen wir zuerst zwischen Javascript und JQuery unterscheiden.

Um es auf einfache Weise auszudrücken:

• Javascript basiert auf ECMAScript
• JQuery ist eine Bibliothek für Javascript

In Wirklichkeit stellen Sie also zwei verschiedene Fragen:

• Ihr Titel spricht von einer Lösung für die Implementierung von Javascript
• Ihre Frage spricht von einer Lösung für die Implementierung von JQuery

Da die Google-Ergebnisse Ihren Titel anzeigen und der gesamte Inhalt der Seite über JQuery spricht, kann dies für Personen, die nach einer Javascript-Lösung suchen, sehr frustrierend sein.

Und jetzt zur JQuery-Lösung:

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

Und die Javascript-Lösung:

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

Dieser Code kann zu Ihrer functions.php hinzugefügt werden. In beiden Fällen befindet sich der Speicherort der Skripte wp-content/themes/theme-name/js/script.js

Viel Spaß beim Codieren!