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

10

Я хотел бы удалить некоторые уродливые стрелки, которые являются стандартными для кнопок корзины в 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

user2806026
источник
Это безумие: вы не можете редактировать стрелки в коде, который их генерирует? (Или он загружен из внешнего источника?) В любом случае вы можете выполнять обе замены в одной функции, чтобы избежать чтения и записи всего HTML-кода внутри блока корзины дважды. Я не знаю, как напрямую добавить это на страницу из functions.php, но вы можете сохранить его в отдельном файле сценария (если у вас его еще нет, вы можете добавить его) и затем wp-enqueue-scriptего. Вам также придется изменить $s на jQuery(см. Раздел 7 страницы)
Rup
Нет, я почти уверен, что его нельзя удалить, прежде чем вставить. Если это возможно, я не смог найти способ сделать это. Хорошее замечание о добавлении его в одну функцию. Будет ли это выглядеть так? $ (document) .ready (function () {$ (". woocommerce-cart"). html (function (i, val) {return val.replace ("→", ""); возврат val.replace ("← "," ");});}); Я посмотрю в сценарий постановки. Кажется немного сложным, хотя .. Спасибо!
user2806026
Ладно. Я попробовал этот подход; Сделал файл с именем 'removeArrows.js' и поместил его в мою папку плагинов. Содержит тот же контент, что и исходный код, за исключением jQuery вместо $. затем я добавил следующее в functions.php; `function wpb_adding_scripts () {wp_register_script ('my_amazing_script', plugins_url ('removeArrows.js', FILE ), массив ('jquery'), '1.1', true); wp_enqueue_script ( 'my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); (Извините, я не могу понять, как правильно отобразить код) Это не сработало. Вы можете помочь мне это исправить?
user2806026
1
Пожалуйста, внесите изменения и добавьте всю необходимую информацию непосредственно к вашему вопросу. Не используйте раздел комментариев для добавления кода
Pieter Goosen

Ответы:

10

Вы $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 ); 
Питер Гусен
источник
Большое спасибо за ваш отличный совет. Это похоже на подход к использованию. Хотя один вопрос; functions.php находится в моей папке темы. Как связать js-файл, если он находится в той же корневой папке темы?
user2806026
Вы должны держать все в плагине или в теме, не разбивайте их. Если вы находитесь в теме, вы $scrбы get_template_directory_uri() . '/removeArrows.js'для родительских тем, а также get_templatestylesheet_directory_uri() . '/removeArrows.js'для childthemes
Питер Гусен
Попробовал еще раз, на этот раз добавив removeArrows.js прямо в папку темы и используя следующее в functions.php; function wpb_adding_scripts () {wp_register_script ('my_amazing_script', get_template_directory_uri (). '/removeArrows.js', FILE ), массив ('jquery'), '1.1', true); wp_enqueue_script ( 'my_amazing_script'); } add_action ('wp_enqueue_scripts', 'wpb_adding_scripts', 999); это дает мне ошибку разбора: синтаксическая ошибка, неожиданное ',' в строке wp_register_script.
user2806026
get_template_directory_uri() . '/removeArrows.js', FILE)должно быть простоget_template_directory_uri() . '/removeArrows.js'
Питер Гусен
Нет. Использовал свой полностью код, который вы отредактировали в нижней части оригинального сообщения. Единственное, что он делает, это замораживает страницу корзины при просмотре содержимого. Я думаю, что я просто сдамся :-) И последнее средство; вы начали с упоминания, что get_template_directory_uri () предназначена для родительских тем, а затем в окончательном полном коде - для дочерних тем. Что он? Моя тема родительская :-)
user2806026
4

Я бы не стал добавлять другой внешний 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.

Мэтт Роял
источник
Это не WordPress способ загрузки Javascript. Смотрите wp_enqueue_script()для получения дополнительной информации.
Пэт Дж
2
Привет @PatJ, я согласен, для загрузки внешней библиотеки JS или файла JS со всеми вашими функциями Javascript, тогда да, это абсолютно правильно. Однако, если вы загружаете фрагмент Javascript, не имеет смысла создавать новый файл JS и добавлять дополнительный HTTP-запрос только для этого. Возьмем, к примеру, Google Analytics, в 99% тем или пользовательских сборок JS будет добавлен в верхний или нижний колонтитул через файл параметров или функций темы. Обычная практика - включать JS или даже CSS-фрагменты таким образом.
Мэтт Роял
1
«Обычная практика» не делает ее правильной. В wp_enqueue_script()документах даже утверждать Это рекомендуемый метод связывания JavaScript для WordPress генерироваться страниц .
Пэт Дж.
Если вы выберете тему WordPress по умолчанию двадцать четыре, она загрузит html5.js в header.php. Да, это было сделано по какой-то причине, чтобы проверка браузера соответствовала условию IE <9, но я хочу сказать, что понятно, что постановка в очередь является рекомендуемым и предпочтительным методом, но в зависимости от всех других переменных / обстоятельств, окружающих вас. Попытки достичь этого не всегда могут быть наиболее практичными, и я думаю, что следует использовать некоторую свободу действий. Слушай, я тоже могу быть совершенно неправ в этом, мне интересно услышать, что скажут некоторые из действительно опытных парней :-)
Matt Royal
Спасибо за ваше отличное предложение. Я не могу заставить это работать хотя; если я добавляю ваш код в тег <? php моего functions.php, я получаю сообщение «Ошибка синтаксического анализа: синтаксическая ошибка, неожиданное» <в /somepath.../functions.php в строке 1146 ». Если я добавлю его за пределы <? Php, то, похоже, он повторяет данный код в верхней части страницы. Что мне здесь не хватает?
user2806026
0

Поскольку ответ уже принят, я просто хочу сказать, что есть другой способ поставить код 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 в нижний колонтитул, как это. Это предотвращает его отмена или изменение (по крайней мере, легко), что чрезвычайно важно при разработке плагинов и тем. Если вы конечный пользователь сайта и вам нужен быстрый сценарий или что-то в этом роде, сделайте это - но даже все wp_enqueue_script()равно он почти всегда лучше и более гибок.
Xhynk
-1

Чтобы ответить на вопрос, мы должны сначала провести различие между 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

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

Фред Хеувел
источник
Примерно во время публикации OP разработчики взаимозаменяемо использовали jquery и javascript. Это не совсем точно, но это было то, насколько популярным был jquery и насколько в javascript отсутствовали функции.
Рокки Кев