Как установить скрипт на Вордпресс?
Как правильно добавить скрипты и стили в 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. Для вопросов и комментариев пишите нам в комментарии.
www.coma.lv
Как подключить скрипт в WordPress
Нередко у разработчиков сайта на платформе WordPress возникает необходимость установки своих css/js скриптов для решения каких-либо специфических задач. Допустим, понадобится библиотека Jquery UI для создания анимации, которая не предусмотрена шаблоном, либо необходимо доработать статью с использованием таблицы, не стилизованной по вашей теме.
Наиболее распространённый способ предусматривает установку специального плагина. Но, в силу того, что чрезмерное использование плагинов на WordPress может вызвать торможение и без того переполненного расширениями сайта, лучше этого избежать. В данной статье рассмотрим 2 способа как подключить скрипт в WordPress без плагина.
Подключение скрипта в WordPress – файл functions.php
Для этого вставьте в файл functions.php, который лежит в корневом каталоге темы, следующий код, только не забываем прописать свои значения в тело функций.
В папке темы должен быть каталог js. Если его нет, создайте его и поместите свои файлы в папку. Чтобы убедиться в том, что файлы прилинкованы, достаточно зайти на главную страницу сайта и просмотреть html код страницы.
Тут все гораздо проще, открываем файл headers.php, который находится в корне темы, и вставляем строчку между тегами:
Если ваш скрипт не влияет на страницу на этапе загрузки, то наиболее оптимально его подключать в footer между тегами , чаще всего это отдельный файл в корневом каталоге вашей темы footer.php.
Надеюсь, вам стало понятно, как подключить скрипт в WordPress, если нет, задавайте вопросы, не стесняйтесь.
seoblognik.ru
Бесконфликтное подключение скриптов и стилей в WordPress
Здравствуйте, друзья! В этой статье речь пойдет о подключении скриптов и стилей в WordPress. Разберем, как избежать конфликт скриптов, и рассмотрим варианты подключения библиотеки jQuery.
Для чего это нужно, если и так все работает?
Бесконфликтный метод необходим по нескольким причинам: предотвращает конфликт при подключении одного скрипта разными плагинами. При таком подключении метод позволяет объединить несколько js файлов в один и отдавать в сжатом виде браузеру для оптимизации скорости загрузки страницы. Так же при правильном подключении скриптов процесс обновления будет проходить безболезненно.
Начнем с библиотеки jQuery. Часто библиотеку подключают стандартным способом, прописав в .
Первый вариант правильно подключить jQuery средствами самого WordPress.
При таком подключении библиотека будет подключена один раз и точно не создаст конфликтов. Данный код нужно вставить в functions.php, а стандартное подключение удалить из header.php.
Я рекомендую второй вариант: воспользоваться CDN Google. При таком подключении jQuery есть преимущества: во-первых, файл подгружается в отдельный поток и весит меньше, так как отдается в сжатом виде, а во-вторых, если пользователь посещал перед вашим сайтом другой сайт, на котором библиотека jQuery подключается таким же способом, то она вообще не будет загружаться, так как уже присутствует в его кэше. Код подключения выглядит вот так:
Подключаем скрипты и стили
Также в файл functions.php после подключения библиотеки jQuery подключаем все скрипты и стили.
Теперь разберем код.
- my_scripts() – пользовательская функция, которую мы регистрируем с помощью add_action() и цепляем на хук-действие wp_enqueue_scripts
- wp_enqueue_style() – правильно добавляет файл стилей, перед этим регистрируя его, если он не был зарегистрирован ранее
- get_template_directory_uri() – получает URL текущей темы, к которому добавляется оставшейся путь к файлу . ‘/style.css’
- wp_enqueue_script() – правильно подключает js файлы
Давайте подробнее разберем параметры функции подключения скриптов – wp_enqueue_script()
zyubin.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.
hostenko.com
Как добавить скрипт на страницу 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 в нужном месте страницы.
Необходимость в скриптах на страницах WordPress стала появляться у меня сравнительно недавно. И, как полагается, я перепробовал все возможные варианты их добавления. Но именно последний метод срабатывал всегда, я им активно пользуюсь и в настоящее время. Приведу пару примеров добавления скрипта в WordPress, реализованных в предыдущей записи Регистрация в каталогах сайтов. На этой странице выводится две конструкции вида
На многих сайтах для реализации контактной формы раньше я с успехом использовал популярный плагин Contact Form 7, легкий в настройках, простыми манипуляциями в котором создать продвинутую форму обратной связи, а затем добавить шорткод в тело записи или страницы, не составляло большого труда. На этом сайте Contact Form 7 нормально работать отказался, как и форма от Вебмани. Проблема была решена с помощью iframe.
Последовательность действий при вставке скрипта в запись WordPress:
- Создаем в текстовом редакторе типа Notepad++ пустую страницу, добавляем в нее необходимый код (скрипты для решения самых разных задач на сайте есть в свободном доступе в сети).
- Сохраняем страницу с расширением html в кодировке UTF-8 без BOM.
- Забрасываем эту страницу к себе на сервер, в папку с сайтом (или внутреннюю папку на сайте).
- Выводим в нужном месте статьи (редактирование в режиме Текст) ссылку на наш файл.
Я использовал готовый шаблон формы обратной связи, реализованный на двух файлах (оба файла через FTP сохраняются в папку с сайтом):
1) contacts.html
2) contacts.php
Привожу содержимое этих файлов здесь, возможно, кому-то пригодится тоже. Не забудьте изменить адрес электронной почты и путь к вашему файлу contacts.php, делается это простым редактированием страниц.
Дальше необходимо открыть запись WordPress и в режиме Текст добавить ссылку на первый файл:
— где параметры width и height отвечают за размеры вставки, параметр frameborder тега указывает на толщину (в данном случае — отсутствие) границы фрейма, а параметр scrolling — на отсутсвие или наличие полосы прокрутки во фрейме.
vervekin.ru
Как на сайте WordPress быстро вставить любой скрипт в статью?
Часто бывает необходимо где-то на странице вставить HTML-теги ли какой-либо скрипт на языке JavaScript (например, рекламный блок или какой-нибудь информер). Конечно, переключив визуальный редактор в режим Текст, вставленный код будет без проблем выполнен. Но если один и тот же блок необходимо вставить в нескольких местах поста да еще и на сотне страницах, то в таком случае нужно искать более быстрое решение этой задачи.
Что такое JavaScript?
JavaScript – это скриптовый язык программирования, который работает не на вашем сервере, а в браузере пользователя. Это позволит, не замедляя работу сайта, добавлять много разных возможностей. Например, если необходимо встроить видеопроигрыватель, калькулятор или какую-либо другую стороннюю услугу, то для этого достаточно будет скопировать и вставить фрагмент кода JavaScript на ваш сайт.
Типичный фрагмент кода JavaScript может выглядеть следующим образом:
Теперь, если вы добавите фрагмент кода в контентную часть записи или страницы WordPress, он будет удален при сохранении.
Как быстро вставить любой скрипт в статью?
Каких либо стандартных инструментов для облегчения вставки кода в контент WordPress не предоставляет. Поэтому будем использовать сторонние решения. Рассмотрим наиболее простые способы.
Способ 1. Плагин Shortcoder
Бесплатный плагин Shortcoder позволит одним нажатием кнопки вставлять сохраненный лишь однажды код в текст записи или страницы. Для этого, после установки и активации дополнения, необходимо в админ-панели перейти в раздел Настройки -> Shortcoder.
Для начала нам нужно добавить необходимый код и сохранить его для будущей вставки. Для этого нажимаем кнопку Create a new shortcode.
В поле Name следует указать имя сохраняемого кода, а в большом текстовом блоке собственно вставить сам код.
Настройка Disable this Shortcode for administrators позволяет запретить показ кода для администратора. Кроме того, в блоке Visibility Вы сможете указать, для каких устройств будет отображаться код. Доступны следующие варианты: только на мобильных (опция On mobile devices alone), только на десктопах (On desktops alone) и для всех устройств (On both desktop and mobile devices). Для сохранения следует нажать кнопку Create shortcode. Все, Ваш код сохранен. Теперь его можно вставлять в контент. Для этого необходимо открыть на редактирование запись или страницу и поставить курсор в то место, где ожидается вставка кода.
Теперь, чтобы вставить код, нужно нажать появившуюся на панели инструментов кнопку. Во всплывающем окне Вы увидите список сохраненных кодов (в нашем случае – это Clearfy banner). Для его вставки необходимо нажать кнопку Quick insert.
В итоге в тексте статьи появится специальный шорткод.
После обновления страницы или записи (кнопка Обновить), вставленный Вами код будет исполнен и отображен.
Отметим, что один и тот же код можно добавлять сколько угодно раз. Вы таким образом сможете добавить необходимое количество нужных кодов и вставлять их где это будет необходимо.
Иногда вам будет необходимо скопировать и вставить фрагмент кода JavaScript на свой сайт, чтобы добавить сторонний инструмент.