Лучшие способы для загрузки скриптов в WordPress. Как добавить скрипт в wordpress

Как добавить скрипт на страницу WordPress

Столкнувшись с необходимостью вставить исполняемый скрипт на странице WordPress-сайта, многие начинающие вебмастера нередко сталкиваются и с определенными затруднениями. Как обычно поступает вебмастер, упираясь в задачу, реализацией которой до этого ему заниматься не приходилось. Правильно, ищет информацию по теме в сети. Но здесь-то его (вебмастера) и подстерегают неприятные сюрпризы. Впрочем, обо всем – по порядку!

Поскольку с движком WordPress мое знакомство, как и у многих, происходит по принципу «решаем проблемы по мере их поступления», к суперпродвинутым пользователям этой постоянно развивающейся CMS я себя причислять не решаюсь. Поэтому тоже всегда прежде изучаю и прорабатываю (проверяю) информацию, изложенную на заслуживающих доверия ресурсах. Если по каким-то причинам в открытом доступе информация отсутствует, а решение проблемы затягивается, обращаюсь за советом к специалистам с форумов. Например, многие непонятные с первого захода вопросы по другому популярному движку для создания интернет-магазинов PrestaShop, мне удалось прояснить лишь общением в специализированных форумах, посвященных этой CMS. Как говорят, правильно сформулированный вопрос – уже половина ответа ))

Сегодня я хочу познакомить вас с простым способом добавления скрипта в записях WordPress. Основные моменты («сюрпризы»), с которыми сталкивается новичок при поиске информации в интернет, и о которых я упоминал в самом начале – это:

Отсутствие актуальной информации по теме. В ТОПе выдаче Яндекса мне сплошь и рядом попадались статьи, датированные и 2010-м и даже 2007-м годом. Увы, многое из того, что работало раньше, уже не работает.
Недостаток знаний у владельца сайта для применения некоторых решений. Преодолеть этот барьер наскоком не всегда удается. Некоторые барьеры и вообще кажутся непреодолимыми на определенном этапе.
Недостаток времени. А реализовать задуманное требуется сегодня или, в крайнем случае, завтра.

Кроме того, сейчас блоги на WordPress достаточно индивидуальны. А вызвано это различными установленными версиями движка и плагинов, специфической комбинацией плагинов, настройками на хостинге, в конце концов… По этим причинам вебмастеру приходится искать наиболее простые решения, которые работают не зависимо от версии, установленных плагинов и настроек хостера.

Зачем вообще добавлять скрипты в записи блога (сайта) на WordPress? Причины прозаичны: нужен скрипт оплаты на странице, скрипт обратной связи, код рекламной сети, вывод интерактивной карты и т. п. В WordPress предусмотрена вставка скриптов в футере (путем редактирования файла footer. php) и сайдбаре – с помощью виджетов. Но простая и понятная вставка скриптов в тело записи средствами движка почему-то не предусмотрена. Скрипт, добавляемый в пост в режиме редактирования html, не отображается на странице, попросту пропадает. Вот и приходится искать обходные пути – самые разные.

Так вот. О том, как добавить скрипт на страницу WordPress, информации в сети предостаточно. Интернет предлагает нам следующие пути решения проблемы:

Использование функции wp_enqueue_script. используемой для регистрации нужных скриптов в WordPress. Наиболее распространенный способ – вызов функции в файле шаблона. Реализуется разными способами. Требует понимания принципа работы движка, знания его структуры.

Правка файла functions. php. Необходимо знание того, куда и что нужно добавить, чтобы и скрипт запускался, и тема продолжала работать как прежде.
Использование Произвольных полей WordPress. Относительно простое, но не всегда работающее решение. Возможно, вам повезет и на вашем сайте скрипт, внедренный в запись WordPress с помощью произвольных полей, заработает. У меня на паре сайтов произвольные поля напрочь отказывались работать со скриптами.
Использование плагинов, добавляющих на сайт шорткоды (shortcode). Элегантное решение, заключающееся в следующем. Для исполнения различных скриптов простым добавлением в предлагаемую плагином форму создаются сниппеты кода. Плагин реализует вызов встроенных в движок функций самостоятельно, вебмастеру же остается добавить в запись конструкцию типа [short_code], вызывающую исполнение необходимой функции. Достоинство метода в том, что нет привязки к шаблону, шорткоды можно применять в любой теме WordPress. Примеры плагинов для создания шорткодов: Shortcoder, Shortcode Exec PHP, Shortcodes Ultimate. К сожалению, тоже не на всех шаблонах и не у всех вебмастеров этот метод срабатывает.

Использование конструкции iframe вида <iframe width=” ” height=” ” src=”http://sajt. ru/stranica. html” frameborder=” ” scrolling=” “></iframe> Это позволяет выводить в теле страниц (записей) блога содержимое из внешних файлов. Все, что нужно вебмастеру – загрузить файл со скриптом на хостинг – в корень или в специально отведенную для этого папку, затем прописать в процессе редактирования записи вывод содержимого этого файла с помощью iframe в нужном месте страницы.

Необходимость в скриптах на страницах WordPress стала появляться у меня сравнительно недавно. И, как полагается, я перепробовал все возможные варианты их добавления. Но именно последний метод срабатывал всегда, я им активно пользуюсь и в настоящее время. Приведу пару примеров добавления скрипта в WordPress, реализованных в предыдущей записи Регистрация в каталогах сайтов . На этой странице выводится две конструкции вида <script>. форма обратной связи и форма оплаты Webmoney.

На многих сайтах для реализации контактной формы раньше я с успехом использовал популярный плагин Contact Form 7. легкий в настройках, простыми манипуляциями в котором создать продвинутую форму обратной связи, а затем добавить шорткод в тело записи или страницы, не составляло большого труда. На этом сайте Contact Form 7 нормально работать отказался, как и форма от Вебмани. Проблема была решена с помощью iframe.

Последовательность действий при вставке скрипта в запись WordPress :

Создаем в текстовом редакторе типа Notepad++ пустую страницу, добавляем в нее необходимый код (скрипты для решения самых разных задач на сайте есть в свободном доступе в сети).
Сохраняем страницу с расширением html в кодировке UTF-8 без BOM.
Забрасываем эту страницу к себе на сервер, в папку с сайтом (или внутреннюю папку на сайте).
Выводим в нужном месте статьи (редактирование в режиме Текст ) ссылку на наш файл.

Я использовал готовый шаблон формы обратной связи, реализованный на двух файлах (оба файла через FTP сохраняются в папку с сайтом):

Привожу содержимое этих файлов здесь, возможно, кому-то пригодится тоже. Не забудьте изменить адрес электронной почты и путь к вашему файлу contacts. php, делается это простым редактированием страниц.

Дальше необходимо открыть запись WordPress и в режиме Текст добавить ссылку на первый файл:

— где параметры width и height отвечают за размеры вставки, параметр frameborder тега указывает на толщину (в данном случае — отсутствие) границы фрейма, а параметр scrolling — на отсутсвие или наличие полосы прокрутки во фрейме.

Надеюсь, эта статья была полезной для вас.

iprowebber.ru

Лучшие способы для загрузки скриптов в WordPress

Существует несколько способов загрузить скрипты для WordPress. Выбор в пользу одного из них надо делать, ориентируясь на свои задачи: нужно ли вам, чтобы скрипт выполнялся для всей темы, только для отдельных постов или только для конкретных страниц. В этой статье речь пойдет о том, как использовать и загружать скрипты JavaScript либо jQuery в темах WordPress путем простой вставки в настраиваемые мета-боксы.

Смотрите также :

В целом, можно использовать 2 сценария загрузки скриптов:

Загружать скрипты для всего сайта или темы

Загружать скрипты с определенным условием для конкретных постов или страниц

Загрузка скриптов для использования на всём сайте

Есть по меньшей мере 2 способа для добавления файлов JavaScript или других скриптов, чтобы в последствии использовать их на сайте. Вот как добавляются скрипты для “шапки” или “подвала” сайта в панели администратора практически в любой современной теме:

Эти боксы в основном используются для добавления скриптов вроде Google Analytics или скриптов онлайн-чата. Если в вашей теме таких боксов нет, можно внести правки в код файла functions. php :

Примечание: После однократной регистрации скрипта нет необходимости регистрировать его повторно; его можно вызывать в зависимости от указанных условий в функции wp_register_script :

Загрузка скриптов только для определенных страниц или постов

Качественные платные фреймворки и темы наподобие Genesis облегчают задачу по настройке WordPress путем вызова необходимых скриптов для каждой отдельной страницы или определенного типа постов. Под каждой страницей или постом вы найдете отдельный бокс для добавления скриптов.

Если в вашей теме таких боксов нет, кликните по вкладке “Настройки экрана” справа вверху и активируйте отображение боксов для скриптов на экране в режиме редактирования:

Если в вашей теме вообще не предусмотрены отдельные боксы для добавления скриптов, добавьте следующий код в конце файла functions. php. При этом не забудьте заменить значение ‘007’ на нужный вам page_id и указать верный путь расположения. js-файла для приведения скрипта в рабочее состояние:

Загрузка скриптов для дочерней темы

Единственная разница между загрузкой скриптов для родительской и дочерней темы заключается в следующем:

get_template_directory_uri() — используйте эту функцию для родительской темы.
get_stylesheet_directory_uri() — используйте эту функцию для дочерней темы.

Приведенный ниже код следует применять для загрузки скриптов в зависимости от указанных условий в родительской теме:

Загрузка скриптов при помощи кода

Просто создаем новую папку “js ” в дочерней теме в корневой папке и туда помещаем наши файлы с расширением. js. По приведенному коду подразумевается, что ваш файл скрипта носит название your-script. Если вы назвали файл иначе, то и пути к файлу, а также имена файлов в коде тоже надо изменить.

Загрузка скриптов для настраиваемого фона

А вот код для популярной темы Metro. созданной StudioPress. Этот код также можно применять для дочерних тем на основе Genesis, чтобы добавить адаптивное фоновое изображение на сайте:

Загрузка скриптов для плагинов вручную

Большинство плагинов, включающих в себя скрипты, также содержат и код для загрузки скриптов, так что от вас никаких дополнительных действий не потребуется. Но если вам попался плагин, который содержит только сам код или только PHP-скрипт, то вам пригодится вот этот метод для загрузки jQuery-скриптов в плагинах:

Для загрузки скриптов применяется метод, аналогичный загрузке таблиц стилей CSS, включая функции wp_register и wp_enqueue для корректной обработки и взаимодействия с файлом style. css .

Плагин Simple Scripts

Если в вашей теме нет отдельных полей для добавления скриптов, можно просто установить вот этот плагин под названием Simple Scripts.

iprowebber.ru

Как правильно добавить скрипты и стили в WordPress

Недавно мы рассматривали код для одного из плагинов, что прислал один из наших пользователей. Плагин работал отлично, но разработчик не учёл некоторых аспектов при загрузке с внешних источников JavaScript. WordPress имеет систему очереди для добавки внешних скриптов и стилей, что помогает предотвратить конфликты плагинов. Так как большинство держит более одного плагина на своём сайте, то будет полезным прочитать данную статью. Мы покажем вам, когда правильно добавлять JavaScript и стили в WordPress. Это будет крайне полезно всем, кто начал осваивать разработку плагинов и тем для WordPress.

У WordPress есть функция wp_head , которая позволяет загрузить что угодно в шапку вашего сайта. Для добавления своих скриптов, многие используют данный код:

Хоть это и просто, но это неверный способ добавления скриптов в WordPress. Для примера, если вы загружаете jQuery вручную и другой плагин тоже грузит jQuery, то получается, что jQuery загружается дважды. Также две разные версии могут инициировать конфликт.

Давайте посмотрим, как нужно делать.

Зачем ставить скрипты в очередь?

У WordPress имеет большое сообщество разработчиков. Тысячи людей по всему миру придумывают темы и пишут плагины для WordPress. Чтобы убедиться, что всё работает верно и никто не наступает друг другу на ногу, WordPress имеет специальную функцию очереди для скриптом. Функция предоставляет систематическую загрузку JavaScript и стилей. Используя функцию wp_enqueue_script , вы говорите WordPress когда нужно грузить скрипт, где грузить и при каких условиях.

Это позволяет всем использовать встроенные библиотеки JavaScript, которые идут в комплекте с WordPress, а не загружать одни и те же скрипты по нескольку раз. Это также позволяет сократить время загрузки страницы и избежать конфликтов с остальными темами и плагинами.

Как правильно вставить скрипты в очередь в WordPress

Правильная загрузка скриптов в WordPress крайне проста. Внизу дан пример, который вы можете скопировать в файл плагина или в файл темы functions. php. чтобы правильно загружать скрипты в WordPress.

Мы начали регистрацию нашего скрипта через функцию wp_register_script(). Данная функция принимает 5 параметров:

$handle – Удерживать уникальное имя вашего скрипта. Мы назвали наш скрипт “my_amazing_script”
$src – src это местоположение вашего скрипта. Мы используем функцию plugins_url чтобы получить правильный URL папки нашего плагина. Как только WordPress найдёт его, он также найдёт скрипт с названием amazing_script. js в этой папке.
$deps – deps это для зависимостей. Так как наш скрипт использует jQuery, то мы добавили jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если он ещё не был загружен.
$ver – Это номер версии нашего скрипта. Параметр необязателен.
$in_footer – Мы хотим загрузить наш скрипт в нижний колонтитул, потому нам надо поставить это значение на true. Если вы хотите загрузить скрипт в шапку, то поставьте false.

После расставления всех параметрво в wp_register_script, вы можете просто вызвать скрипт, который всё сделает: wp_enqueue_script()

Некоторые особо любознательные могут спросить, почему мы сначала зарегистрировали скрипт, а потом поставили в очередь? Это позволяет другим владельцам сайта снять с регистрации ваш скрипт.

Как правильно поставить в очередь стили

Так же как и скрипты, вы можете поставить в очередь свои стили. Посмотрите на пример:

Заметьте, что мы использовали один и тот же приём wp_enqueue_scripts. чтобы подцеплять и скрипты и стили. Несмотря на имя, функция работает для них обоих.

В примерах выше мы использовали plugins_url для уточнения местоположения скрипта или стиля, который мы хотим поставить в очередь. Однако, если вы используете функцию для очередей в вашей теме, то используйте get_template_directory_uri(). Если вы работаете с дочерней темой, то используйте get_stylesheet_directory_uri(). Вот пример:

Мы надеемся эта статья помогла вам научиться правильно добавлять JavaScript и стили в темы и плагины WordPress. Для вопросов и комментариев пишите нам в комментарии.

Дополнительные ресурсы:

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — vadim@coma. lv. +371 29394520

iprowebber.ru