куда по умолчанию подключаются скрипты в wordpress
Подключение скрипта к 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 сделала по образцу и подобию, но ничего не происходит, ссылка на «печать», к сожалению, не появляется в записи(((
Все подключается, только почему-то не работает. Нужно разбираться. Время нет на это.
Как добавить пользовательский JavaScript на WordPress-сайт
Существует несколько способов добавления пользовательского JavaScript в WordPress. В этом руководстве мы рассмотрим каждый из них.
Добавление пользовательского JavaScript на WordPress
Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:
Чего не нужно делать
Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег
1. Использование плагина для добавления пользовательского JavaScript-кода
Использование плагина рекомендуется, если:
1.1. Плагины для редактирования header.php и footer.php
Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если нужно добавить скрипты, которые загружаются до содержимого страницы, необходимо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.
Плагин Insert Headers and Footers позволяет редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.
1.2. Плагины для добавления пользовательского JavaScript
1.3. Скрипты, специфичные для плагинов
Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления своих скриптов. Подобные плагины поставляется со встроенными параметрами конфигурации для конкретной JavaScript-библиотеки.
Например, плагин GA Google Analytics позволяет интегрировать Google Analytics на сайт прямо из панели администрирования WordPress. Он поставляется со встроенными функциями, специфичными для скрипта Google Analytics.
2. Редактирование файла functions.php дочерней темы оформления
Также можно использовать встроенные в WordPress функции и хуки действий. В этом случае необходимо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения ваших настроек.
Затем добавьте PHP-код, который ставит в очередь или выводит пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.
2.1. Добавление собственных скриптов в очередь с помощью функции wp_enqueue_script()
С помощью wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функция размещает скрипты в раздел страницы.
Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать функцию get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.
Функция WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это разные методы.
Функцию wp_enqueue_script() можно использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные параметры:
Для добавления зависимости, которая не зарегистрирована в WordPress, нужно использовать собственный дескриптор. Но перед этим необходимо зарегистрировать его и поставить зависимость в очередь с помощью функции wp_enqueue_script().
2.2. Вывод встроенного скрипта с помощью хуков действий wp_head и wp_footer
Пример использования хука wp_head для вывода скрипта в шаблоне хедера:
Пример использования wp_footer для вывода скрипт в шаблоне футера:
Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, необходимо использовать хуки действия admin_head и admin_footer в функции add_action().
Заключение
Использование плагина для добавления пользовательского JavaScript является рекомендуемым методом. Эти плагины гарантируют, что скрипты будут загружаться в правильном порядке.
Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, подписки, лайки!
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, то скрипт будет подключен перед тегом
Правильное подключение скриптов и стилей в WordPress с помощью постановки в очередь
Многие из нас используют стили, чтобы изменить внешний вид своих веб-сайтов, а также скрипты для улучшения функциональности. Стоит заметить, что способ, которым вы подключаете скрипты в WordPress, играет такую же важную роль, как и контент этих файлов. Вместо того, чтобы просто бросать их в заголовок или в футер, вам нужно использовать функциональность постановки в очередь в WordPress.
В этой статье я расскажу вам, как грамотно добавить скрипты и стили к вашим темам и плагинам, вне зависимости от того, проектируете ли вы что-то во фронтэнде или в бэкэнде.
Что значит «поставить в очередь»?
Постановка в очередь – это дружественный к CMS способ добавления скриптов и стилей для WordPress-сайтов. Многочисленные плагины, которые вы имеете, могут использовать jQuery и другие общие скрипты. Если каждый плагин будет отдельно связываться с этими файлами, произойдет хаос, и весь ваш JavaScript-код может перестать работать.
При помощи постановки скриптов в очередь вы говорите WordPress о том, какие файлы вы хотите добавить, и система уже позаботится о подключении их в хэдере или футере. Вы даже можете определять зависимости ваших скриптов и стилей, и WordPress добавит их в правильном порядке.
Система берет их них всю необходимую информацию, которая требуется ядру, теме или плагину, создает список необходимых скриптов и стилей, и затем выводит их в подходящем месте.
Суть метода
Не важно, как именно вы подключаете свои скрипты, конечный результат всегда будет представлен в виде тегов script или link где-то в HTML-коде вашего сайта. В примере ниже показаны три скрипта и две стилевых таблицы, которые загружаются на сайте:
В плане функциональности это хорошо, но давайте вспомним о том, что WordPress выполняет гораздо больше задач, чем то, что показано выше. На сайте может быть гораздо больше разных скриптов и стилевых таблиц. Поскольку порядок подключения скриптов и стилей играет важную роль, ручное подключение их в хэдере или футере быстро приведет к тому, что вы попросту запутаетесь.
Также стоит сказать, что большинство этих скриптов не отображаются в PHP-коде вашей темы. Все скрипты, которые нужны WordPress и плагинам, должны подключаться через функции wp_head() и wp_footer().
Грамотная постановка в очередь
Постановка в очередь – способ сообщить WordPress о ваших скриптах и их зависимостях. На основе этого WordPress определяет расположение скрипта для вас. Все это выполняется в коде, поэтому вам не нужно волноваться об изменении порядка скриптов при добавлении к ним нового. Давайте возьмем скрипты из предыдущего раздела и поставим их в очередь:
Код должен быть помещен в файл functions.php вашей темы, дочерней темы или в файл плагина. Обратите внимание, что и скрипты, и стили ставятся в очередь путем подцепления функции к хуку wp_enqueue_scripts.
Первое, что я сделал – поставил в очередь наши стили. Сначала я определил стили темы, хотя они и зависят от сбрасываемых стилей (reset). Это не проблема, поскольку я определил эту зависимость в третьем параметре. Первый параметр – это уникальное имя файла, второе – это его расположение.
Далее я добавил скрипт Owl Carousel. В третьем параметре я определил jQuery в качестве зависимости. Мне не нужно подключать библиотеку jQuery самостоятельно, поскольку она уже встроена в WordPress. Взгляните в кодекс WordPress, чтобы увидеть список встроенных скриптов.
Наконец, я добавил скрипт темы. Наш скрипт зависит от jQuery и Owl Carousel. В действительности вы могли бы просто определить Owl Carousel в качестве зависимости. Поскольку jQuery – зависимость для Owl Carousel, она будет добавлена до скрипта темы в любом случае. Однако мне нравится указывать все зависимости полностью, поскольку это позволяет мне понять больше при рассмотрении кода.
Последняя задача для нас – убедиться в том, что наш скрипт темы загружается в футере. Сделать это можно, определив пятый параметр как true. Четвертый параметр (необязательный) – номер версии скрипта, который я установил в 1.0.
Постановка в очередь в деталях
Теперь, когда вы рассмотрели пример, пришло время немного испачкать руки и залезть «под капот». Давайте посмотрим на все функции и параметры, доступные нам.
Мы использовали две функции: wp_enqueue_script() и wp_enqueue_style(). Обе они принимают пять параметров, первые четыре из которых одинаковы:
Надеемся, что объяснение параметров сделало наш пример, приведенный в предыдущем разделе, более ясным. Теперь вы можете играться с собственными скриптами и стилями.
Регистрация файлов
Есть два шага по добавлению какого-либо файла (библиотеки, скрипта, стилевой таблицы и т.д.), однако функция постановки в очередь может это сделать сама и сразу. В техническом плане скрипты и стили сначала регистрируются, а потом уже ставятся в очередь. Регистрация позволяет WordPress узнать о ваших файлах, в то время как постановка в очередь фактически добавляет их к странице. Вот альтернативный способ добавления нашего Owl Carousel:
Итак, почему это делают в два шага, когда достаточно всего одного? Ответ таков: в некоторых случаях вам не нужно регистрировать скрипт в том же самом месте, где вы его вызываете. Хороший пример – шорткоды. Предположим, что шорткод, который вы создаете, требует подключения некоторого JS-скрипта. Если вы поставите скрипт в очередь при помощи подцепления к хуку wp_enqueue_scripts, он будет загружаться при каждом запросе, даже если шорткод не будет использоваться.
Выход следующий: регистрировать скрипт, используя wp_enqueue_scripts, однако ставить его в очередь уже в функции шорткода. Соответственно, он будет загружаться только в том случае, когда шорткод действительно используется. Даже если шорткод используется многократно, скрипт у нас будет подключаться только один раз.
Функции wp_register_scripts() и wp_register_styles() имеют те же самые параметры, что и их собратья по постановке в очередь. Единственная разница между ними состоит в том, что функции постановки в очередь позволяют вам определять только дескриптор, если этот дескриптор был зарегистрирован.
Удаление скриптов и стилей
В WordPress можно исключать из очереди и отменять регистрацию стилей и скриптов, что делается при помощи следующих функций:
Эти функции позволяют удалять файлы модульно. Следующий пример показывает, как можно легко удалить jQuery и заменить эту библиотеку на более свежую ее версию.
Однако обычно менять jQuery на новую версию не стоит, поскольку WordPress создана так, чтобы максимально гладко работать с той версией, которая добавлена к системе по умолчанию.
Заключение
Надеемся, что теперь вы видите, почему постановка в очередь – это очень важный процесс. Она позволяет снять с ваших плеч бремя управления зависимостями, дает вам возможность добавлять свои скрипты модульным и очень удобным способом. Постановка в очередь рекомендуется для всех плагинов и тем WordPress. Ваш продукт (бесплатный или платный) не будет принят в хранилище WordPress и на многие премиум-рынки без этого. Постановка в очередь формирует правила «хорошей игры», и потому она должна использоваться всеми разработчиками.
Как правильно подключить jQuery и другие скрипты к Вордпресс
Разгребая чужой код, иногда нарываешься на такие «интересные» решения, что буквально впадаешь в ступор. Недавно на одном сайте видел, как jQuery подключался несколько раз на странице. Думаю, нужно рассказать, как это правильно делается в Вордпресс.
У разработчика не было злого умысла, он пошел на это скорее всего по своей неопытности — используемая им карусель jQuery Roundabout 2.4.2 очень старая, и со свежей версией jQuery некорректно работала анимация. Точнее, не работала совсем. К сожалению, он не нашел ничего лучшего, как перед загрузкой карусели прямо в коде загрузить старую версию jQuery 1.7.1. Про консоль браузера, в которую посыпалась куча ошибок, этот горе-разработчик видимо не слышал. Многие ошибки были критические и положили часть функционала сайта. Именно по этой причине, сайт попал ко мне в работу.
Как подключить jQuery к Вордпресс
Итак, прежде чем подключать jQuery, откроем HTML-код страницы и убедимся, что jQuery не подключен ранее активной темой или каким-то из плагинов. Все подключаемые скрипты в Вордпресс должны регистрироваться и загружаться с помощью функции wp_enqueue_script() для того, чтобы плагины были в курсе о подключении той или иной библиотеки, знали о зависимостях и не загружали повторно одинаковые скрипты.
Если в HTML-коде сайта нет упоминаний о jQuery, значит инициируем его подключение в файле functions.php активной темы. jQuery в Вордпресс подключается проще всего, т.к. он зарегистрирован по умолчанию, его можно загрузить сразу по имени-ярлыку ‘jquery’.
Как подключить к Вордпресс другой jQuery
Рассмотрим другую ситуацию, когда jQuery уже подключен в теме или плагине, а нужна его другая версия или необходимо загрузить jQuery из другого источника, например, с CDN.
Сначала нужно дерегистрировать ранее загруженный jQuery.
А затем зарегистрировать новый. Например, так:
Как подключить к Вордпресс другие скрипты
С другими скриптами тоже ничего сложного нет. Допустим, у нас есть некий скрипт script.js, который лежит в директории /js/ активной темы. Он подключается аналогично в functions.php, указываем путь и придумываем уникальный ярлык ‘myscript’, например.
В заключение
Никогда не подключайте в Вордпресс скрипты напрямую, обязательно регистрируйте их. Даже если кажется, что всё работает, после установки очередного плагина, могут посыпаться ошибки.
И возвращаясь к jQuery Roundabout. Чтобы карусель работала со свежими версиями jQuery, в коде Roundabout нужно найти такую строку:
и заменить её на такой код:
Делаю сайты на Вордпресс с 2008 года, занимаюсь их оптимизацией, беру на поддержку, делюсь опытом в блоге и соцсетях (ссылки ниже, подпишитесь)