Подключение скрипта к WordPress
Здравствуйте, в этом посте публикую способы подключения скрипта к сайту, делая акцент на подключение скрипта в WordPress, который имеет особенности и кардинально отличается от обычного HTML-подключения. Имеются ввиду JavaScript и JQuery
Для начала вкрадце напишу про подключение скрипта к обычному HTML сайту или странице.
Что-бы подключить скрипт к обычной HTML странице нужно между тегами
прописать такой код:
где jquery-toltip.js — название скрипта, название файла, а js — папка, в которую предварительно помещается скрипт.
Для подключения сторонних скриптов, например, если вы не хотите использовать библиотеку JQuery локально, а подгружать ее со стороннего ресурса, нужно прописывать полностью путь к этому файлу. Выглядеть будет все это следующим образом:
Если скрипт не влияет на формирование страницы, то лучше его подключать в footer между тегами
В этом случае этот скрипт будет подгружаться в последнюю очередь и не будет сильно влиять на скорость загрузки страницы.
Теперь рассмотрим как осуществляется правильное подключение скрипта к WordPress.
Конечно для этого можно подключать скрипты стандартным методом, о котором написано выше, но в таком случае возможно подключение одного и того-же скрипта несколько раз, если какой-то из плагинов его уже использует, также из за такого подключения может отказаться работать какой либо плагин.
Все аналогично первому варианту. На данном примере подключаю другой скрипт bootstrap.min.js
Оба способа подключения скриптов к WordPress являются верными, но предпочтительней второй вариант.
Подключение стороннего скрипта к WordPress
Иногда требуется подключение, подгрузка стороннего скрипта к WordPress, например с серверов CDN. Это делается в первую очередь для ускорения загрузки подключаемого скрипта и как следствие ускорение загрузки страницы. Хотя я проверял — разницы нет (все зависит от хостинг провайдера).
Как и в варианте локального подключения скриптов, описанного выше, в файл functions.php ставьте такой код:
Различие лишь в том, что естественно, убирается из кода get_template_directory_uri() — скрипт ведь не находится в директории темы.
И пишется полный адрес подгружаемого скрипта, без протокола http или https.
Лучший способ отблагодарить автора
Похожие по Тегам статьи
WordPress может использоваться для создания широкого спектра веб-сайтов. Вы можете создать портфолио сайты, новостные…
Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…
В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…
10 thoughts on “ Подключение скрипта к WordPress ”
Егор, полезная статья =) А вот смотри, получается, вместо того, чтобы прописывать скрипт между тегами head, можно просто в functions его подключить? Этот метод всегда срабатывает или проверять нужно?
Еще нежно не забывать про зависимости при подключении библиотек. А то я помню намучался в свое время.
Здравствуй, я там ссылочку оставил на WP кодекс. Кстати, я сознательно не стал углубляться в тему, у меня сайт рассчитан на обычных блоггеров, в основном. Кто серьезно занимается разработкой сайтов на WordPress, тому кодекс в руки и на ГитХаб 🙂
здравствуйте. я хочу реализовать возможность распечатать определенную область на странице вордпресс в соответствии с этой инструкцией: _http://szenprogs.ru/blog/delaem_quotversija_dlja_pechatiquot/2009-03-20-36. все получилось и работает, но я хотела бы подключить через файл js. первый код я вынесла в отдельный js-файл и поместил его в папку javascript активной темы, но не знаю, как подключить этот файл, чтобы все работало. пробовала делать, как описано в этой статье, с помощью файла functions.php, но не работает. подскажите, пожалуйста, в чём может быть дело?
Елена, скорее всего пропишите правильный путь к файлу. Он должен находится в папке с темой, если get_bloginfo — это директория, тоесть положите скрипт в папку с темой.
js-файл со скриптом записала в папку js активной темы, подключение в файле functions.php сделала по образцу и подобию, но ничего не происходит, ссылка на «печать», к сожалению, не появляется в записи(((
Все подключается, только почему-то не работает. Нужно разбираться. Время нет на это.
wp_enqueue_script() WP 2.1
Правильно подключает скрипт (JavaScript файл) на страницу.
Использовать эту функцию для подключения js файлов важно, потому что так вы в дальнейшем сможете без лишних проблем объединять JS файлы в один. Также в некоторых случаях избавитесь от конфликтов скриптов, когда зависимый скрипт подключается до основного (того от которого он зависит).
Функция добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит, зарегистрированы. Зависимые скрипты добавляются автоматически.
ВАЖНО! Это ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет скрипты.
Если скрипт уже зарегистрирован с помощью wp_register_script(), то для его подключения в этой фукнции нужно указать только идентификатор скрипта (в первом параметре).
Функция обычно вызываться во время следующих событий (вешаться на хуки):
Возвращает
Использование
Шаблон использования
Название скрипта (рабочее название). Строка в нижнем регистре.
Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script().
Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения URL:
Уже зарегистрированные в WP скрипты смотрите ниже в этой статье.
Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.
По умолчанию: false
Подключить скрипт в подвал?
Обычно скрипт подключается в документа, если указать true, то скрипт будет подключен перед тегом
Как подключить javascript на странице или посте wordpress
В процессе работы с WordPress, иногда, возникает необходимость подключить javascript в посте или странице WP. Некоторые горе программисты решают эту задачу подключая все файлы яваскрипт в шапке или просто запихнув код в пост, если первый вариант невозможный. Сегодня я расскажу и покажу вам несколько вариантов подключения любого кода javascript на wordpress странице.
Зачем нужно у вордпрессе подключать javascript на странице:
Подключаем wordpress javascript на странице через шорткод
Делается это довольно просто:
1) Открываем файл темы functions.php.
2) В самом начале файла создаем шорткод вот таким способом:
Если нужно подключить отдельный файл javascript:
или же вот такой код, если вам нужно вывести код в странице WordPress:
Вместо alert(«пример»); можно писать свой яваскрипт код, только следите чтоб кавычки были правильные и не конфликтовали. Все ‘ надо закрывать в /’ для яваскрипта внутри этого ПХП.
Более подробно о том, как создать шорткод 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
1) Открываем файл темы header.php.
2) Перед закрывающимся тегом пишем:
или вот так, если нам нужно подключить файл до поста:
или вот так если нужно до категории:
3) Если вам нужно не подключить код, а просто вывести его, то выглядеть это будет по аналогии с пунктом 2:
На этом у меня все, надеюсь эти 3 реализации подключения javascript на странице wordpress помогут вам правильно подключить код или вывести его.
Я не большой любитель WP, но вот заказали на нем сайт, да и сам подумал, что для человека никогда не администрировавшего сайт, cms’ка пойдет. У меня такой вопрос: можно ли массивом добавлять идентификаторы страниц? Влияет ли вложенность страниц на срабатывание скрипта? Буду рад ответу.
Извините, пропустил.
К сожалению статьи про Ajax у меня нет. Частично можно посмотреть в самописной форме обратной связи https://help-wp.ru/obratnaya-svyaz-wordpress-bez-plagina/ она на технологии аякс сделана.
Да, сложно с wp после october, сортировки медиафайлов нет, bootstrap 4 меню, чтобы полностью вывести с depth 3 знатно покрасноглазил (в итоге поменял разметку), для подключения конкретных скриптов и стилей нужен массив с id поста, иное почему-то у меня не прокатило, плагины на бесплатном хостинге, либо отказываются работать, либо работают корректно только их платные версии, в общем я повеселился, поседел и запил)) Благо уже на финишной прямой. Успехов!
Самый простой вариант забросить подключение в шорткод вот так:
(там же можно и основную инфу написать что должен делать и возвращать шорткод через 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 (там где я вывожу карты). Скрипт достаточно тяжелый. Зачем грузить его на все страницы? Шорткодом было бы удобно, но вы говорите это не правильно.
Вот и думаю как сделать так чтобы только на определенных страницах/постах подключался этот скрипт, но, при этом, это было бы правильно реализовано. Через мета поле, как мне кажется, это было бы самым удобным вариантом.
Добрый день. Это конечно хорошо. Скрипт я подключил. Но как блин вызвать функцию из этого скрипта? onClick по кнопке wordpress обрезает. Я уже запарился гуглить.
Подключение скриптов JS и JQuery к WordPress
Для подключения скриптов JavaScript и JQuery в WordPress предусмотрена специальная функция wp_enqueue_script(). И очень важно подключать собственные скрипты используя именно ее. Функция избавит от подключения скрипта несколько раз (если один из плагинов уже использует одноименный скрипт), предотвратит конфликт скриптов и правильно подключит зависящие от библиотеки jQuery скрипты (после подключения библиотеки).Содержание статьи:
Подключение JavaScript к WordPress
Данный код подключает JavaScript в header шаблона WordPress.
Для увеличения скорости загрузки сайта логичнее подключать скрипты в footer сайта, если скрипт не участвует в отрисовке страницы.
Данный код подключает JavaScript в footer шаблона WordPress.
Все то же самое, только добавлено true — команда для подключения JavaScript в footer.
Подключение зависящих от библиотеки JQuery скриптов к WordPress
Подключение аналогично подключению JavaScript, в функции указывается лишь массив JQuery, для правильной работы скрипта.
array(‘jquery’) — указывает зависимость от библиотеки JQuery.
Здесь не указывается, в какую область шаблона подключать скрипт (footer или header), так как он в любом случае будет подключен сразу после библиотеки JQuery, в массиве зависящих от нее скриптов.
Можно указать версию подключаемого скрипта к WordPress
‘1.0.0’ — Строка указывающая версию скрипта, если она у него есть.
Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если версия не проставлена, то WordPress сам присвоет свою версию. Если указать null, то никакая версия не будет добавлена.
Подключение стороннего скрипта к WordPress
В данном примере подключается скрипт bootstrap.min.js с сервера CDN Google.
Подключение аналогично вышеперечисленным примерам, только указан адрес стороннего скрипта. Протокол httpss: не указывается.
Подключение скрипта к дочерней теме WordPress
Важно
При подключении скриптов в дочерней теме важно указывать директорию стилей CSS дочерней темы — get_stylesheet_directory_uri().
Перерегистрация, обновление библиотеки jQery
Иногда нужно поменять библиотеку jQery WordPress на более свежую. Для этого нужно использовать такой код:
Добавление кода JavaScript в WordPress с использованием хуков wp_head и wp_footer
Во-первых, давайте посмотрим, как добавить код в заголовок вашего сайта WordPress. Вам нужно будет добавить следующий код в файл functions.php вашей темы или плагин Code Snippets.
Добавление JavaScript хуком к определенной публикации или странице WordPress
Предположим, вы хотите загрузить этот javascript только в конкретный пост WordPress. Для этого вам необходимо добавить условную логику в код. Взгляните на следующий пример:
Если вы присмотритесь к приведенному выше коду, вы увидите, что мы обернули код javascript вокруг условной логики, чтобы соответствовать определенному идентификатору записи. Вы можете использовать это, заменив 16 своим собственным идентификатором сообщения.
Теперь этот код будет работать для любого типа поста с ID=16, кроме страниц. Давайте рассмотрим другой пример, за исключением того, что он проверяет конкретный идентификатор страницы перед добавлением кода JavaScript в раздел head.
Вместо is_single мы теперь используем is_page для проверки идентификатора страницы.
Мы можем использовать тот же код с небольшими изменениями, чтобы добавить код JavaScript в нижний колонтитул footer вашего сайта. Посмотрите на следующий пример.
Вместо того, чтобы подключать нашу функцию к wp_head, мы теперь подключили ее к wp_footer. Вы также можете использовать его с условными тегами, чтобы добавить Javascript к конкретным сообщениям или страницам.
Подключение JS и jQery в плагине WordPress
При создании собственного плагина иногда требуется подключить JS. Также, если тема обновляется разработчиками, но нужно расширить ее функционал и для этого требуется подключение JS и jQery, нужно воспользоваться нижеприведенным кодом.
Как подключить файлы со стилями и скриптами к теме wordpress
Привет друзья. На этот раз хочу поделиться тем, как подключить собственные стили и скрипты к теме wordpress. Бывает, так что хочется расширить возможности своей темы, и добавить к ней чего то, что изначально не было предусмотрено её разработчиками. К счастью вордпресс – это очень гибкая платформа, и к ней можно подключить jquery плагины, кастомные стили css и всё что вам угодно.
Я нашёл два простых способа как подключить собственные стили и скрипты к wordpress. Первый способ состоит в том что нам нужно зарегистрировать и подключить скрипты по всем правилам в файле functions.php. Второй, подключить их с помощью плагина zia3-css-js. Если вы не захотите возиться с файлом functions.php, то используйте второй способ. Но так вам придется ставить дополнительный плагин. Если же вы уверены в себе, то просто внесите несколько строк кода в functions.php, ведь здесь нет ничего сложного.
Правильный путь подключения файлов css и js к wordpress
Правильный способ подключения стилей и скриптов состоит в том чтобы подключить их через систему регистрации wordpress в файле functions.php. Для этого используется специальная функция для регистрации и подключения стилей и скриптов. Называется она wp_register_style().
Подключенный таким образом стили потом можно легко объединить и сжать в один файл с помощью плагинов кеширования. Ниже приведен пример кода, с помощью которого были зарегистрированы и поставлены в очередь на подключение в header документа файлы со стилями css.
На примере видно что я подключил файл со стилями библиотеки bootstrap и файл custom.css с собственными стилями. Вы можете скопировать этот код, вставить в свой файл functions.php и изменить названия файлов и пути к ним. Так же обязательно измените идентификаторы файлов со стилями. Идентификатор это каждый первый параметр этой функции, например: wp_register_style (‘bootstrap‘). Он должен быть уникальным для каждого файла со стилями иначе wordpress его не увидит. Проверить подключение можно нажав на ctrl+U и посмотреть исходный код страницы. На скриншоте ниже видно что файлы успешно подключены.
Таким же образом подключаю второй файл со скриптами, тольк в этом случае сделаю это с помощью функции
wp_register_script() :
Если в коде страницы скрипты вы не обнаружите значит, они не подключились. Скорее всего, вы совершили какую-то ошибку и нужно внимательно всё посмотреть ещё раз.
Подключаем стили и скрипты дублируя код темы
Также можно подключать файлы с собственными стилями css и скриптами js присоединив их рядом с другими файлами темы. Для этого в своём файле functions.php найдите приблизительно такой комментарий:
* Enqueue scripts and styles.
Здесь написано, что это порядок на загрузку стилей и скриптов вашей темы. Под комментарием идут подключаемые скрипты. Если вы хотите подключить свой файл css со стилями, просто продублируйте код темы и переделывайте его прописав в нём название своих файлов. Например, у меня есть такой код подключающий иконочные шрифты font-awesome:
Здесь видно, что данный код подключает стили со шрифтами font-awesome к моей теме. Они лежат в папке fonts. Переделываем его так:
Здесь мы видим, что был подключён файл custom.css, который лежит в папке css.
Когда вы будете подключать свои стили к теме вордпресс, обязательно пишите правильный путь к файлам и папкам, в которых они лежат, соблюдая вложенность одного каталога в другой, иначе они работать не будут.
Подключаем файлы с скриптами и стилями к теме wordpress с помощью плагина zia3-css-js
Функционал данного плагина позволяет подключить файлы глобально ко всему сайту или только к отдельной странице, или записи блога. Загрузите файлы со стилями и скриптами в соответствующие папки вашей темы wordpress. Вам не нужно ничего прописывать в functions.php, просто установите плагин и активируйте его. Далее идите на любую страницу и прокрутите ее вниз. Там вы увидите список не подключенных и подключенных файлов. Поставьте галочки в чекбоксы напротив файлов, которые следует подключить. Если стили нужно вставить только для какой-то одной страницы, то вставьте их в соответствующее поле. Для ccs будет одно поле, а для java script другое. Обновите страницу
Заключение
Иногда ваши собственные стили могут привести к конфликту со стилями темы, и вёрстка темы может «съехать» и некоторые стили темы переопределиться. Чтобы восстановить всё к первоначальному виду нужно понять какие стили повлияли на вёрстку и изменить порядок подключаемых файлов. Следует помнить, что стили подключаемые в коде ниже имеют высший приоритет и могут переопределить стили темы. Если такое произошло, то поднимите их выше в коде и будет все ок.
Если вам помогла эта статья подключить собственные стили к вордпресс, то сохраните пост на стене и оставьте свои комментарии. Всем удачи!