подключение скрипта на определенной странице wordpress
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
Бывают такие ситуации, что подключение всех скриптов к отдельной странице совсем не к чему. Ладно если это статический HTML сайт. Тут все предельно ясно, размещаешь скрипты только на нужных страницах. А как же тогда подключить или наоборот, отключить скрипт или файлы стилей на определенной странице или в записи WordPress?
Подгрузка скриптов и стилей влияет на скорость загрузки сайта в целом. Об этом подробнее в статье Скорость загрузки сайта
Итак, давайте по порядку.
Подключение скриптов и стилей к отдельной странице или записи WordPress
Здесь все предельно просто, только нужно узнать ID страницы или записи, в которой нужно отключить, подключить файл скрипта или файл стилей. Для этого зайдите в админку во вкладку все записи или страницы и наведите курсор на ссылку записи, страницы. На мониторе слева вылезет что-то типа
2780 — это и есть ID записи.
Подключение скрипта
‘/js/izotope.js’ — папка, в которую помещен скрипт и сам скрипт. Обязательно в директории темы.
‘izotope’ — уникальное название скрипта. Оно нам пригодится ниже, для отключения скрипта.
Подключение стилей
Здесь комментировать нечего, кроме хука, в первом случае
wp_enqueue_script
wp_enqueue_styles — не заморачивайтесь, просто отметьте для себя, если грузите скрипт, то первый вариант, если стили, то второй.
Комбинируем подключение скриптов и стилей
Иногда нужно подключить несколько скриптов и стилей к одной странице, тогда можно совместить подключение скриптов и стилей, собрать их в одну функцию, чтобы код в файле functions.php был покороче.
Отключение скриптов и стилей в определенной странице или записи WordPress
Все почти что аналогично.
Отключение скрипта
Пояснения :
Все аналогично подключению.
‘social’ — уникальное имя. Чтобы отключить скрипт или стили, нужно знать уникальное имя скрипта, стилей. Смотрите где они подключаются. Это могут быть файлы плагинов — смотрите в плагинах, или скрипты и стили темы, в файле functions.php
Отключение стилей
Может пригодится статья Увеличение скорости загрузки сайта, перенос jQuery в footer WordPress за счет замены вшитой в WordPress версии библиотеки jQuery на аналогичную взятую с официального сайта jQuery
Лучший способ отблагодарить автора
Похожие по Тегам статьи
WordPress может использоваться для создания широкого спектра веб-сайтов. Вы можете создать портфолио сайты, новостные…
Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо…
В данной статье мы разберемся, что такое дочерний шаблон WordPress, для чего он нужен…
Vavik 96
Интернет дайджест для вебмастеров и фотографов
Подключение и отключение скриптов и стилей на отдельной странице, записи WordPress
Бывают такие ситуации, что подключение всех скриптов к отдельной странице совсем не к чему. Ладно если это статический HTML сайт. Тут все предельно ясно, размещаешь скрипты только на нужных страницах. А как же тогда подключить или наоборот, отключить скрипт или файлы стилей на определенной странице или в записи WordPress?
Итак, давайте по порядку.
Подключение скриптов и стилей к отдельной странице или записи WordPress
Здесь все предельно просто, только нужно узнать ID страницы или записи, в которой нужно отключить, подключить файл скрипта или файл стилей. Для этого зайдите в админку во вкладку все записи или страницы и наведите курсор на ссылку записи, страницы. На мониторе слева вылезет что-то типа
2780 — это и есть ID записи.
Подключение скрипта
‘/js/izotope.js’ — папка, в которую помещен скрипт и сам скрипт. Обязательно в директории темы.
‘izotope’ — уникальное название скрипта. Оно нам пригодится ниже, для отключения скрипта.
Подключение стилей
Здесь комментировать нечего, кроме хука, в первом случае
wp_enqueue_script
wp_enqueue_styles — не заморачивайтесь, просто отметьте для себя, если грузите скрипт, то первый вариант, если стили, то второй.
MnogoBlog
как создать сайт на wordpress, настроить и оптимизировать wordpress
Как подключить скрипт к определенной странице, посту, записи в wordpress
Здравствуйте, сегодня попробуем подключить скрипт к определенной странице (записи, посту, категории, шаблону и т.д.) на сайте wordpress.
Скачать исходники для статьи можно ниже
В одной из моих предыдущих статей – “Мой снежный плагин” – с помощью кода мы подключили к wordpress скрипт “Снега” на сайте wordpress – скрипт (/moisnow.js) подключался с помощью следующего кода:
А теперь если мы добавим к данному коду условие с помощью оператора “if”, то сможем подключать скрипт к любой категории, записи, странице или к шаблонам сайта, например так:
В данном примере мы использовали условный тег is_single() – то есть шаблон записи, таким образом скрипт (/moisnow.js) будет работать только на записях сайта – на главной странице или же на других страницах сайта wordpress скрипт работать не будет.
Еще один пример – если вы хотите подключить скрипт только к конкретной странице:
О всех возможных условных тегах в wordpress можете прочитать здесь: “codex.wordpress.org/Conditional_Tags”
Похожие записи:
Как подключить скрипт к определенной странице, посту, записи в wordpress : 1 комментарий
Можно также воспользоваться бесплатным плагином – jQuery in Posts Pages.
Сайт плагина: «wordpress.org/plugins/jquery-in-posts-pages/»
Добавить комментарий Отменить ответ
Для отправки комментария вам необходимо авторизоваться.
Как подключить 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 обрезает. Я уже запарился гуглить.