Cara menambahkan Javascript dengan benar di functions.php

Saya ingin menghapus beberapa panah tampak jelek yang standar pada tombol keranjang di WooCommerce. Untuk mencapai ini, saya menemukan tip menambahkan kode berikut, yang akan menghapus panah ketika dokumen telah dimuat.

Saya menganggap saya akan meletakkannya di functions.php saya? Bagaimana tepatnya saya melakukan itu?

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

EDIT

Baik. Saya sudah mencoba pendekatan ini:

Membuat file bernama 'removeArrows.js' dan meletakkannya di folder plugin saya. Ini memiliki konten yang sama dengan kode asli, kecuali jQuery sebagai gantinya $. Kemudian saya menambahkan yang berikut ini ke 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' ); 

Saya tidak tahu bagaimana cara membuat kode ditampilkan dengan benar. Ini tidak berhasil. Ada saran untuk membuat ini berfungsi?

jQuery Snippet Source

Anda $scrdi Anda wp_register_script()fungsi yang salah. Mengingat functions.php Anda ada di dalam plugin Anda, dan removeArrows.js Anda ada di root plugin Anda, Anda $scrakan terlihat seperti ini

plugins_url( '/removeArrows.js' , __FILE__ )

Catatan lain, selalu merupakan praktik yang baik untuk memuat skrip dan gaya Anda terakhir. Ini akan memastikan bahwa itu tidak akan ditimpa oleh skrip dan gaya lain. Untuk melakukan ini, tambahkan saja prioritas sangat rendah (angka sangat tinggi) ke parameter prioritas Anda ( $priority) dari add_action.

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

Dan selalu muat / enqueue skrip dan gaya melalui wp_enqueue_scriptskait tindakan, karena ini adalah kait yang tepat untuk digunakan. Jangan memuat skrip dan gaya langsung ke wp_headatauwp_footer

EDIT

Untuk tema, karena Anda telah mengindikasikan bahwa Anda sekarang memindahkan semuanya ke tema Anda, Anda $scrakan berubah menjadi ini

 get_template_directory_uri() . '/removeArrows.js'

untuk tema orang tua dan ini

get_stylesheet_directory_uri() . '/removeArrows.js'

untuk tema anak. Kode lengkap Anda akan terlihat seperti ini

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

Saya tidak akan menambahkan file js eksternal lain, itu hanya sumber daya tambahan dan tidak perlu untuk mengambil dan itu adalah sesuatu yang kami ingin mengurangi dalam hal waktu pemuatan halaman.

Saya akan menambahkan potongan jQuery ini di kepala situs web Anda menggunakan wp_headhook. Anda akan menempelkan yang berikut ini di file tema atau fungsi plugin Anda. Saya juga memastikan jQuery dalam mode tanpa konflik seperti yang Anda lihat di bawah.

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

Setelah Anda melakukan ini dan me-refresh halaman Anda, periksa sumber halaman untuk memastikan snippet jQuery ini sebenarnya dimuat ke halaman Anda. Jika ya maka itu akan berfungsi kecuali jika mereka ada sesuatu di snipet jQuery yang sebenarnya Anda gunakan.

Karena jawabannya sudah diterima, saya hanya ingin mengatakan ada cara lain untuk membuat kode javascript di footer yang telah saya lakukan berkali-kali.

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

Anda dapat memuat skrip ini ke templat halaman tertentu hanya dengan menggunakan kondisi

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;

jika halaman-template.php ada di direktori (misalkan direktori templates di direktori root tema Anda) Anda bisa menulis seperti:

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

Untuk menjawab pertanyaan, pertama-tama kita harus membuat perbedaan antara javascript dan JQuery.

Untuk menyatakannya secara sederhana:

• Javascript didasarkan pada ECMAScript
• JQuery adalah perpustakaan untuk Javascript

Jadi pada kenyataannya Anda mengajukan dua pertanyaan berbeda:

• Judul Anda berbicara tentang solusi untuk mengimplementasikan javascript
• Pertanyaan Anda berbicara tentang solusi untuk mengimplementasikan JQuery

Karena hasil Google menunjukkan judul Anda dan semua konten halaman berbicara tentang JQuery, ini bisa membuat sangat frustasi bagi orang yang mencari solusi javascript.

Dan sekarang untuk solusi JQuery:

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

Dan solusi javascript:

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

Kode ini dapat ditambahkan ke functions.php Anda Lokasi skrip dalam kedua kasus adalah wp-content/themes/theme-name/js/script.js

Selamat coding!