Як правильно додати Javascript у function.php

Я хотів би видалити кілька некрасивих стрілок, які є стандартними для кнопок кошика в WooCommerce. Щоб досягти цього, я знайшов підказку щодо додавання наступного коду, який повинен видалити стрілки під час завантаження документа.

Я припускаю, що я збираюся поставити це у свої функції.php? Як саме я це зробив би?

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

EDIT

Добре. Я спробував такий підхід:

Створив файл під назвою 'removeArrows.js' і помістив його у свою папку плагінів. Він має той самий вміст, що і вихідний код, за винятком jQuery замість $. Тоді я додав у function.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

Ваш $scrу вашій wp_register_script()функції неправильний. З огляду на , що ваш functions.php знаходиться всередині вашого плагіна, і ваш removeArrows.js знаходиться в кореневому каталозі вашого плагіна, ваш $scrповинен виглядати наступним чином

plugins_url( '/removeArrows.js' , __FILE__ )

Ще одна примітка: завжди корисно завантажувати свої сценарії та стилі останніми. Це забезпечить, що його не перекриють інші сценарії та стилі. Щоб зробити це, просто додайте дуже низький пріоритет (дуже високий номер) для пріоритетного параметра ( $priority) з add_action.

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

І завжди завантажуйте / запускайте сценарії та стилі через wp_enqueue_scriptsгачок дій, оскільки це правильний гак для використання. Не завантажуйте сценарії та стилі безпосередньо на wp_headабоwp_footer

EDIT

Що стосується тем, як ви вказали, що тепер все перемістили до своєї теми, ви $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 у нижньому колонтитулі, що я робив багато разів.

у файлі function.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 знаходиться в каталозі (скажімо, каталог шаблонів у кореневому режимі вашої теми), ви можете написати так:

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

Цей код можна додати до функцій.php Розташування сценаріїв в обох випадках wp-content/themes/theme-name/js/script.js

Щасливого кодування!