Как правильно добавить Javascript в functions.php

Я хотел бы удалить некоторые уродливые стрелки, которые являются стандартными для кнопок корзины в WooCommerce. Чтобы добиться этого, я нашел совет по добавлению следующего кода, который должен убрать стрелки при загрузке документа.

Я предполагаю, что собираюсь поместить это в мои functions.php? Как именно я это сделаю?

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

РЕДАКТИРОВАТЬ

Ладно. Я попробовал этот подход:

Сделал файл с именем 'removeArrows.js' и поместил его в мою папку плагинов. Содержит тот же контент, что и исходный код, за исключением jQuery вместо $. Затем я добавил следующее в 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' ); 

Я не могу понять, как заставить код правильно отображаться. Это не сработало. Любые предложения, чтобы сделать эту работу?

JQuery Snippet Source

Вы $scrв своей wp_register_script()функции неправильно. Учитывая, что ваш functions.php находится внутри вашего плагина, а ваш removeArrows.js находится в корне вашего плагина, вы $scrдолжны выглядеть так

plugins_url( '/removeArrows.js' , __FILE__ )

Еще один момент: всегда полезно загружать свои скрипты и стили в последнюю очередь. Это гарантирует, что он не будет переопределен другими скриптами и стилями. Для этого просто добавьте очень низкий приоритет (очень высокий номер) к параметру приоритета ( $priority) of add_action.

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

И всегда загружайте / ставьте в очередь скрипты и стили через wp_enqueue_scriptsхук действия, так как это правильный хук для использования. Не загружайте скрипты и стили непосредственно в wp_headилиwp_footer

РЕДАКТИРОВАТЬ

Для тем, как вы указали, что теперь вы все перенесли в свою тему, вы $scrизмените на это

 get_template_directory_uri() . '/removeArrows.js'

для родительских тем и это

get_stylesheet_directory_uri() . '/removeArrows.js'

для детской темы. Ваш полный код должен выглядеть следующим образом

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

Я бы не стал добавлять другой внешний js-файл, это просто дополнительный и ненужный ресурс для извлечения, и это то, что мы хотим сократить с точки зрения времени загрузки страницы.

Я бы добавил этот фрагмент jQuery в заголовок вашего сайта с помощью wp_headхука. Вы вставили бы следующее в вашу тему или файл функций плагинов. Я также убедился, что jQuery находится в режиме без конфликтов, как вы можете видеть ниже.

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

После того как вы сделали это и обновили свою страницу, проверьте источник страницы, чтобы убедиться, что этот фрагмент jQuery действительно загружается на вашу страницу. Если это так, то он должен работать, если только он не отключен в используемом вами фрагменте jQuery.

Поскольку ответ уже принят, я просто хочу сказать, что есть другой способ поставить код javascript в нижний колонтитул, который я делал много раз.

в файле 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' );

Вы можете загрузить этот скрипт в конкретный шаблон страницы только с помощью условия

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;

если page-template.php находится в каталоге (скажем, в каталоге templates в корневом каталоге вашей темы), вы можете написать так:

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

Чтобы ответить на вопрос, мы должны сначала провести различие между javascript и JQuery.

Чтобы изложить это простым способом:

• Javascript основан на ECMAScript
• JQuery - это библиотека для Javascript

В действительности вы задаете два разных вопроса:

• Ваш заголовок говорит о решении для реализации JavaScript
• Ваш вопрос говорит о решении для реализации JQuery

Поскольку результаты Google показывают ваш заголовок, а все содержимое страницы рассказывает о JQuery, это может очень расстроить людей, которые ищут решение javascript.

А теперь для решения JQuery:

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

И решение javascript:

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

Этот код может быть добавлен в ваши functions.php Расположение сценариев в обоих случаях wp-content/themes/theme-name/js/script.js

Удачного кодирования!