Как подключить javascript на странице или посте wordpress
В процессе работы с WordPress, иногда, возникает необходимость подключить javascript в посте или странице WP. Некоторые горе программисты решают эту задачу подключая все файлы яваскрипт в шапке или просто запихнув код в пост, если первый вариант невозможный. Сегодня я расскажу и покажу вам несколько вариантов подключения любого кода javascript на wordpress странице.
Зачем нужно у вордпрессе подключать javascript на странице:
- Для вывода карты, проверки координат, запроса адреса и геолокации.
- Для вызова внешнего API JavaScript.
- Для Аякс запроса и многое другое.
как установить на хостинг скрипт
джава скрипт в яндекс браузере
джава скрипт в яндекс браузере
Подключаем wordpress javascript на странице через шорткод
к менюСамый простой способ вставки javascript на странице wordpress — запихнуть его в шорткод и вызвать в нужном месте.
как в браузере включить javascript
Делается это довольно просто:
1) Открываем файл темы functions.php.
2) В самом начале файла создаем шорткод вот таким способом:
Если нужно подключить отдельный файл javascript:
или же вот такой код, если вам нужно вывести код в странице WordPress:
Вместо alert(«пример»); можно писать свой яваскрипт код, только следите чтоб кавычки были правильные и не конфликтовали. Все ‘ надо закрывать в /’ для яваскрипта внутри этого ПХП.
3) Для вызова шорткода воспользуйтесь кодом [myJavascript1] — его можно вставить в любое место вашего поста или страницы WP.
Более подробно о том, как создать шорткод wordpress (откроется в новом окне) читайте по ссылке.
Многие программисты могут меня упрекнуть, что мол это не самый хороший код для вызова wordpress javascript на странице, но он рабочий. Далее я расскажу вам другие способы добавления яваскрипт.
Добавляем javascript на страницу wordpress через wp_enqueue_script
к менюФункция wp_enqueue_script идеально подходит для подключения яваскрипта к теме, но немножко туговато для подключения к отдельной странице, но все же с точки зрения правильности кода, такой вариант более правильный чем первый.
Подробные параметры функции wp_enqueue_script (откроется в новом окне) можно прочитать перейдя по ссылке, сейчас я вам покажу пример для отдельной страницы и отдельного поста.
Предположим, что нам нужно подключить javascript файл «myScript.js» для страницы с идентификатором 15, которому для работы нужна библиотека jQuery:
1) Открываем файл темы functions.php.
2) В самое начало записываем код:
3) Сохраняем, и заливаем на сервер, теперь на странице 15 будет вызываться файл под именем myScript.js
4) Если нам потребуется подключить этот javascript для поста wordpress с ид 21, то код будет такого плана:
Подключение wordpress javascript на странице в файле header.php
к менюЭто самый плохой вариант подключения javascript на странице WordPress, — я решил расказать о нем лиш по тому, что он лучше чем просто закинуть код в редактор записи, а также его реализация более проста для новичков.
1) Открываем файл темы header.php.
2) Перед закрывающимся тегом пишем:
или вот так, если нам нужно подключить файл до поста:
или вот так если нужно до категории:
3) Если вам нужно не подключить код, а просто вывести его, то выглядеть это будет по аналогии с пунктом 2:
На этом у меня все, надеюсь эти 3 реализации подключения javascript на странице wordpress помогут вам правильно подключить код или вывести его.
Я не большой любитель WP, но вот заказали на нем сайт, да и сам подумал, что для человека никогда не администрировавшего сайт, cms’ка пойдет. У меня такой вопрос: можно ли массивом добавлять идентификаторы страниц? Влияет ли вложенность страниц на срабатывание скрипта? Буду рад ответу.
Добрый день.
Так понимаю «массивом идентификаторы страниц» это вот так is_page(array(15,10,22,11)) ?? (Да, можно)
Но если вам ко многим страницам надо подключить скрипт, то проще тогда подключать полностью на весь сайт, без всяких проверок if(is_page(15)).
Вложенность страницы вроде никак не влияет на срабатывание скрипта. На подключение скрипта влияет очередь и что должно быть подключено до его подключения.
Благодарю за ответ. Вчера я пришел к этому сам, сочинив вот такой велосипед: (и это далеко не все страницы )) )
function tables_template_scripts() <
if( is_page(array(‘187′,’223′,’212′,’214′,’217′,’245′,’241′,’239′,’223′,’225′,’235′,’229′,’233′,’227′,’243′,’231′,’219′,’198′,’192′,’210′,’196′,’208′,’221’)) )
wp_enqueue_script(«js-zoom», get_template_directory_uri() . ‘/js/jquery.zoom.js’,array(‘jquery’), », false);
wp_enqueue_script(«js-count», get_template_directory_uri() . ‘/js/count.me.js’,array(), », false);
wp_enqueue_script(«js-bedview», get_template_directory_uri() . ‘/js/bed-veiw.js’,array(), », true);
>
add_action( ‘wp_enqueue_scripts’,
‘tables_template_scripts’ );
Я думал в таком ключе, если у меня есть родительская страница, а остальные к которым нужно подключить скрипты — ее дочерние, то сделав запрос if (is_page(родительская), как-то состыковать с запросом get_page_children и подключить скрипты. Вариант с шорт-кодом, хоть и не предполагает автоматизации, но на крайний случай тоже сгодится(( Так же, читая коментарии я понял, что один из скриптов с функцией onclick нужно передавать именно в text/javascript в консоли кидает ошибку ReferenceError: event is not defined библиотека jquery-1.10.2.min.js (в functions.php jquery по умолчанию). У Вас хороший сайт, посоветуйте свою статью про поиск wp с ajax без отдельного плагина? (если сталкивались).
Извините, пропустил.
К сожалению статьи про Ajax у меня нет. Частично можно посмотреть в самописной форме обратной связи https://help-wp.ru/obratnaya-svyaz-wordpress-bez-plagina/ она на технологии аякс сделана.
Да, сложно с wp после october, сортировки медиафайлов нет, bootstrap 4 меню, чтобы полностью вывести с depth 3 знатно покрасноглазил (в итоге поменял разметку), для подключения конкретных скриптов и стилей нужен массив с id поста, иное почему-то у меня не прокатило, плагины на бесплатном хостинге, либо отказываются работать, либо работают корректно только их платные версии, в общем я повеселился, поседел и запил)) Благо уже на финишной прямой. Успехов!
А можете написать код как скомбинировать шорткод и wp_enqueue_script ?
Спасибо
Самый простой вариант забросить подключение в шорткод вот так:
(там же можно и основную инфу написать что должен делать и возвращать шорткод через return)
ДД, а чем плох первый способ?
ДД, чем плох 1й способ? Вроде наоборот, скрипт грузится только на нужных страницах. Если таких не много, то это положительно сказывается на работе сайта.
Добрый.
Плох тем, что так делать запрещают стандарты ВП. Еще плох тем что нельзя подключить плагин чтоб он оптимизировал скрипт, сжал и так далее этот код. Также при таком подключении не получится перенести этот скрипт в футер, код будет болтаться посреди текста. Еще могут возникнуть проблемы если нужны разные версии jquery когда посредине сайта нужна первая версия в в начале и конце вторая. Нюансов много, просто о них вспоминают только когда надо что то серьезное поправить, а оно не получается 🙂
P.S. Во втором способе скрипт тоже грузится только там где нужно.
Спасибо.
Но как во втором случае сделать подключения без указания номера страницы?
1. Страниц,постов может быть несколько. (Как указать несколько страниц/постов?)
2.Каждый раз лезть в код чтобы добавить новый номер не совсем удобно.
Со страницами наверное можно использовать специально созданный шаблон, и подключать только в нем.
Только как модифицировать if чтобы проверялся шаблон?
Хотя наверное можно и с постами и с использовать мета поле, скажем script = 1, тогда подключается скрипт.
Так правильно будет?
Вы видимо хотите подключить в самом шорткоде?
В общем эту статью нужно дописать будет на досуге. В любом месте страницы, до того момента как был вызван wp_footer() можно писать такую вот конструкцию для подключения яваскрипт:
wp_enqueue_script(«my_script», get_bloginfo( ‘stylesheet_directory’ ).’/js/my_script.js’,array(‘jquery’),»0.1″,true);
P.S. вместо true можно писать false так вроде лучше работает
Не совсем понял последний вариант. Нужно вставлять код прямо на странице? Вроде же это не очень хорошо?
В общем с нетерпением жду обновления статьи с «правильным решением» подключения по требованию скриптов на странице/постах.))
Спасибо
1) Если ваш скрипт используется на всем сайте то правильней всего его подключать через wp_enqueue_script в файл functions.php (понятное дело в этом случаи не нужно ни каких if() условий)
2) Если вам нужно подключить скрипт в шорткоде то в сам шорткод в начало или конец вставляем wp_enqueue_script как я писал выше (тогда тоже условия не нужны).
3) Если нужно вставить на конкретную страницу или в конкретный шаблон, тогда лучше всего вставлять через functions.php но с добавлением правильного условия. например нужен код только на страницах поста, мы пишем if(is_single())
Давайте я поясню на своем примере.
Я хотел бы подключить скрипт кластеризации карт от гугл. Но используется он всего лишь на нескольких страницах их 600 (там где я вывожу карты). Скрипт достаточно тяжелый. Зачем грузить его на все страницы? Шорткодом было бы удобно, но вы говорите это не правильно.
Вот и думаю как сделать так чтобы только на определенных страницах/постах подключался этот скрипт, но, при этом, это было бы правильно реализовано. Через мета поле, как мне кажется, это было бы самым удобным вариантом.
Можно и через мета поле можно и через шорткод, глоавное чтоб подключалось через функцию wp_enqueue_script, а не хтмл кодом через тег ‘;
return $str;
>
add_shortcode( ‘myJavascript1’, ‘myJavascript1’);
Добрый день. Это конечно хорошо. Скрипт я подключил. Но как блин вызвать функцию из этого скрипта? onClick по кнопке wordpress обрезает. Я уже запарился гуглить.
Добрый день. А что там гуглить, обычный вызов jquery.
В тот же подключаемый файл можно забросить такой код и все будет работать.
(function( $ ) <
$(document).ready(function() <
$(«#вашИДселектор»).on(«click»,function());
>);
>)(jQuery);
Источник: http://help-wp.ru/wordpress-javascript-na-stranice-ili-poste/
Идите сюда http://iprowebber.ru/pro-dzhava-skript-javascript/.