Как правильно добавить Javascript в functions.php
-
-
Это безумие: нельзя ли отредактировать стрелки в коде,который их генерирует?(Или он загружен из внешнего источника?) В любом случае вы можете выполнить обе замены в одной функции,чтобы избежать чтения и записи всего HTML внутри блока корзины дважды.Я не знаю,как напрямую ввести это на страницу изfunctions.php,но вы можете сохранить его в отдельном файле скрипта (если у вас его еще нет,вы можете добавить его),а затем [`wp-enqueue-script`] (http://codex.wordpress.org/Function_Reference/wp_enqueue_script) это.Вам также придется заменить `$ s на`jQuery` (см. Раздел 7 этой страницы).That's crazy: can't you edit the arrows out in the code that generates them? (Or is it downloaded from an external source?) In any case you can do both replaces in a single function to avoid reading and writing all the HTML inside the cart block twice. I don't know a way to directly inject that into the page from functions.php but you can save it in a separate script file (if you don't already have one you can add it to) and then [`wp-enqueue-script`](http://codex.wordpress.org/Function_Reference/wp_enqueue_script) it. You'll also have to change the `$`s to `jQuery` (see that page section 7)
- 0
- 2014-06-25
- Rup
-
Нет,я почти уверен,что его нельзя удалить,прежде чем вставить.Если это возможно,я не смог найти способ сделать это. Хороший момент по поводу добавления его в одну функцию.Будет ли это выглядеть так? $ (документ) .ready (функция () { $ (". woocommerce-cart"). html (function (i,val) { return val.replace ("→",""); return val.replace ("←",""); }); }); Я изучу сценарий постановки в очередь.Хотя это кажется немного сложным ... Спасибо!Nope, I'm pretty sure it can't be removed before inserted. If it can, I haven't been able to find a way to do it. Good point about adding it in a single function. Would it look like this? $(document).ready(function() { $(".woocommerce-cart").html(function(i, val) { return val.replace(" →", ""); return val.replace("← ", ""); }); }); I will look into the enqueue script. Seems a bit complicated, though.. Thanks!
- 0
- 2014-06-25
- user2806026
-
Хорошо.Я пробовал этот подход; Создал файл с именем 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'); (Извините,я не могу понять,как правильно отображать код) Это не сработало.Вы можете помочь мне это исправить?Okay. I tried this approach; Made a file named 'removeArrows.js' and placed it in my plugin folder. This has the same content as the original code, except jQuery instead $. then I added the following to 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' ); (Sorry, I cant figure out how to make the code display properly) This did not work. Can you help me fix it?
- 0
- 2014-06-25
- user2806026
-
Пожалуйста,отправьте [изменить] и добавьте всю соответствующую информацию ** прямо к вашему вопросу ** Не используйте раздел комментариев для добавления кодаPlease file an [edit] and add all relevant info **directly to your question** Do not use the comment section to add code
- 1
- 2014-06-26
- Pieter Goosen
-
4 ответ
- голосов
-
- 2014-06-26
Ваш
$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
< sizesEDIT
Для тем,поскольку вы указали,что теперь все переместили в свою тему,ваш
$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 );
Your
$scr
in yourwp_register_script()
function is wrong. Given that your functions.php is inside your plugin, and your removeArrows.js is in the root of your plugin, your$scr
should look like thisplugins_url( '/removeArrows.js' , __FILE__ )
Another point of note, it is always good practice to load your scripts and styles last. This will ensure that it will not get overriden by other scripts and styles. To do this, just add a very low priority (very high number) to your priority parameter (
$priority
) ofadd_action
.add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 );
And always load/enqueue scripts and styles via the
wp_enqueue_scripts
action hook, as this is the proper hook to use. Do not load scripts and styles directly towp_head
orwp_footer
EDIT
For themes, as you've indicated that you now moved everything to your theme, your
$scr
would change to thisget_template_directory_uri() . '/removeArrows.js'
for parent themes and this
get_stylesheet_directory_uri() . '/removeArrows.js'
for child themes. Your complete code should look like this
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-файл,если он находится в той же корневой папке темы?Thanks a lot for your great advice. This seems like the approach to use. One question though; the functions.php is in my theme folder. How would I link the js-file if it's just in the same, theme root folder?
- 0
- 2014-06-26
- user2806026
-
Вы должны сохранить все в плагине или в теме,не разделяйте их.Если вы работаете в теме,вашим `$ scr` будет`get_template_directory_uri ()./removeArrows.js для родительских тем иget_templatestylesheet_directory_uri ().'/removeArrows.js' для дочерних темYou should keep everything in a plugin or in a theme, don't split them. If you are in a theme, your `$scr` would be `get_template_directory_uri() . '/removeArrows.js'` for parent themes, and `get_templatestylesheet_directory_uri() . '/removeArrows.js'` for childthemes
- 0
- 2014-06-26
- Pieter Goosen
-
Попробовал снова,на этот раз добавив removeArrows.js прямо в папку темы и используя следующее вfunctions.php; function wpb_adding_scripts () { wp_register_script ('my_amazing_script',get_template_directory_uri (). '/removeArrows.js',__FILE__),array ('jquery'),'1.1',true); wp_enqueue_script ('my_amazing_script'); } add_action ('wp_enqueue_scripts','wpb_adding_scripts',999); это дает мне ошибку синтаксического анализа: синтаксическая ошибка,неожиданная ',' в строке wp_register_script.Tried again, this time adding the removeArrows.js directly in theme folder and using the following in functions.php; function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/removeArrows.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 999 ); this gives me Parse error: syntax error, unexpected ',' on the wp_register_script line.
- 0
- 2014-06-26
- user2806026
-
`get_template_directory_uri ().'/removeArrows.js',FILE) `должно быть просто`get_template_directory_uri ().'/removeArrows.js''`get_template_directory_uri() . '/removeArrows.js', FILE)` should just be `get_template_directory_uri() . '/removeArrows.js'`
- 0
- 2014-06-26
- Pieter Goosen
-
Нет.Использовал ваш полностью код,который вы отредактировали,в нижней части исходного сообщения.Единственное,что он делает,это замораживает страницу корзины при просмотре содержимого.Думаю,я просто сдамся :-) Однако последнее средство;вы начали с упоминания о том,чтоget_template_directory_uri () предназначен для родительских тем,а затем в окончательном полном коде для дочерних тем.Что он?Моя тема - родительская :-)Nope. Used your completely code you edited into the bottom of your original post. Only thing it does is to freeze the cart page when viewing the contents. I think I'll just give up :-) One last resort though; you started by mentioning that get_template_directory_uri() is for parent themes, and then in the final complete code that it's for child themes. Which is it? My theme is a parent :-)
- 0
- 2014-06-27
- user2806026
-
Извините,сделал ошибку копирования и вставки.Последняя часть полного кода предназначена для родительской темы.Если это не сработает,вам нужно будет взглянуть на свой скрипт.Sorry, made a copy and paste error there. The last piece of complete code is for parent theme. If this doesn't work, you will need to have a look at your script
- 0
- 2014-06-27
- Pieter Goosen
-
- 2014-06-25
Я бы не стал добавлять еще один внешний файл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.
I would not add another external js file, its just an extra and unnecessary resource to fetch and that is something we want to cut down on in terms of page loading times.
I would add this jQuery snippet in your websites head using the
wp_head
hook. You would paste the following in your theme or plugins functions file. I have also made sure jQuery is in no-conflict mode as you can see below.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
Once you have done this and refreshed your page, check the page source to make sure this jQuery snippet is in fact being loaded into your page. If it is then it should work unless their is something off in the actual jQuery snippet you are using.
-
Однако это не способ загрузки Javascript в WordPress.См. [`Wp_enqueue_script ()`] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script) для получения дополнительной информации.That's not the WordPress way to load Javascript, though. See [`wp_enqueue_script()`](https://codex.wordpress.org/Function_Reference/wp_enqueue_script) for more information.
- 0
- 2014-06-25
- Pat J
-
Привет,@PatJ,я согласен,для загрузки внешней библиотеки JS или файла JS со всеми вашими функциями Javascript в нем,тогда да,безусловно,это будет правильный путь.Однако,если вы загружаете фрагмент Javascript,не имеет смысла создавать новый файл JS и добавлять только для этого дополнительный HTTP-запрос.Возьмем,к примеру,Google Analytics: в 99% тем или пользовательских сборок JS будет добавлен в верхний или нижний колонтитул через файл параметров темы или файл функций.Это обычная практика - включать таким образом фрагменты JS или даже CSS.Hi @PatJ, I agree, for loading an external JS library or JS file with all your Javascript functions in it, then yes absolutely that would be the correct way. However if you are loading a snippet of Javascript it does not make sense to create a whole new JS file and add an additional HTTP request just for that. Take Google Analytics for example, in 99% of themes or custom builds, the JS will be added into the the header or footer via theme options or functions file. Its common practice to include JS or even CSS snippets this way.
- 2
- 2014-06-25
- Matt Royal
-
Однако «обычная практика» не делает этого правильным.[`Wp_enqueue_script ()` docs] (https://codex.wordpress.org/Function_Reference/wp_enqueue_script) четное состояние ** Это рекомендуемый метод привязки JavaScript к странице,созданной WordPress **."Common practice" doesn't make it correct, though. The [`wp_enqueue_script()` docs](https://codex.wordpress.org/Function_Reference/wp_enqueue_script) even state **This is the recommended method of linking JavaScript to a WordPress generated page**.
- 1
- 2014-06-26
- Pat J
-
Если вы выберете стандартную тему WordPress «двадцать четырнадцать»,она загрузит html5.js в header.php.Разрешено,что это так по причине,чтобы проверка браузера соответствовала условию IE <9,но я хочу сказать,что,по понятным причинам,постановка в очередь является рекомендуемым и предпочтительным методом,но в зависимости от всех других переменных/обстоятельств,связанных с тем,что выпытаетесь достичь,это не всегда может быть наиболее практичным,и я думаю,что следует проявлять некоторую осмотрительность.Послушайте,я тоже могу ошибаться в этом мнении,мне интересно услышать,что говорят некоторые из действительно опытных парней :-)If you take WordPress default twentyfourteen theme, it loads html5.js in the header.php. Granted its doe this way for a reason so as to check of the browser meets the condition of being IE < 9, but my point is that understandably, enqueuing is the recommended and preferred method but depending on all the other variables/circumstances surrounding what you are trying to achieve it may not always be the most practical and I think some discretion should be used. Look, I could be completely wrong in this view as well, I'm interested to hear what some of the really experienced guys have to say :-)
- 0
- 2014-06-26
- Matt Royal
-
Спасибо за отличное предложение.Но я не могу заставить его работать;если я добавлю ваш код в тегThanks for your great suggestion. I can't get it to work though; if I add your code inside the
- 0
- 2014-06-26
- user2806026
Когда вы вставляете его в свой файлfunctions.php - удалите первый ` Php` из кода,который я предоставил,поскольку у вас уже есть открывающий тег` Php` в строке 1 вашего файлаfunctions.php.Я отредактировал свой исходный ответ и удалил его оттуда.When you paste it in your functions.php file - remove the first `- 0
- 2014-06-26
- Matt Royal
Этот JS-код необходимо обернуть в .Этот метод рендеринга JS в WP не рекомендуется,но в некоторых случаях быстрые решения более важны,чем лучшие практики.This JS code needs to wrapped in . This method to render JS in WP is not recommended, but in some cases quick solutions are more important than best practices.- 0
- 2020-01-09
- Tahi Reu
- 2018-08-24
Поскольку ответ уже принят,я просто хочу сказать,что есть еще один способ поместить код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 находится в каталоге (скажем,в каталоге шаблонов в корневом каталоге вашей темы),вы можете написать примерно так:
is_page_template( 'templates/page-template.php' );
As the answer is accepted already so, I just want to say there's another way to enqueue javascript code in footer which I have done many times.
in functions.php file:
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' );
you can load this script to particular page template only by using condition
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;
if the page-template.php is in directory ( say templates directory in your theme's root dir ) you can write like:
is_page_template( 'templates/page-template.php' );
-
Я бы не рекомендовал «запекать» JavaScript в таком нижнем колонтитуле.Это предотвращает его отключение или изменение (по крайней мере,легко),что чрезвычайно важно при разработке плагинов и тем.Если вы конечный пользователь сайта и вам нужен быстрый скрипт или что-то в этом роде,сделайте это - но даже `wp_enqueue_script ()` почти всегда лучше и гибче.I would not recommend "baking" the JavaScript into the footer like this. It prevents it from being unhookable or modifiable (at least, easily) which is extremely important in plugin and theme development. If you're the end-user of a site and need a quick script or something, go for it - but even still `wp_enqueue_script()` is almost always universally better and more flexible.
- 0
- 2018-08-24
- Xhynk
- 2018-08-24
Чтобы ответить на вопрос,мы должны сначала провести различие между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
Удачного кодирования!
To answer the question we must first make a distinction between javascript and JQuery.
To state it in a simple fashion:
- Javascript is based on ECMAScript
- JQuery is a library for Javascript
So in reality you ask two different questions:
- Your title speaks about a solution for implementing javascript
- Your question speaks about a solution for implementing JQuery
Because the Google results show your title and all the content of the page talks about JQuery this can become very frustrating to people that search for a javascript solution.
And now for the JQuery solution:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
And the javascript solution:
wp_enqueue_script( 'script-id', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
This code can be added to your functions.php The location of the scripts in both cases is
wp-content/themes/theme-name/js/script.js
Happy coding!
-
Примерно в то время,когда был опубликован OP,разработчики действительно использовалиjquery иjavascript взаимозаменяемо.Это совсем не точно,но насколько популярным былjquery и сколько функцийjavascript не хватало.Around the time when OP posted, devs did use jquery and javascript interchangeably. It's not at all accurate, but it was how popular jquery was and how much javascript was missing features.
- 0
- 2020-04-29
- Rocky Kev
Я хотел бы удалить некоторые уродливые стрелки,которые являются стандартными для кнопок корзины в WooCommerce. Для этого я нашел совет по добавлению следующего кода,который должен убирать стрелки после загрузки документа.
Полагаю,я собираюсь поместить его в свойfunctions.php? Как именно я бы это сделал?
< sizesEDIT
Хорошо. Я пробовал такой подход:
Создал файл с именем removeArrows.js и поместил его в папку с моими плагинами. Он имеет то же содержимое,что и исходный код,за исключениемjQuery вместо $. Затем я добавил вfunctions.php следующее:
Я не могу понять,как правильно отображать код. Это не сработало. Есть предложения,как заставить эту работу работать?
Источник фрагментаjQuery