Как добавить пользовательский JavaScript в WordPress (3 метода)
Один из лучших способов улучшить функциональность интерфейса вашего веб-сайта — добавить пользовательский JavaScript в WordPress. Однако выяснить, как это сделать, может быть сложно, особенно если вы привыкли работать с настройщиком для вставки пользовательского CSS.
К счастью, вы можете использовать несколько различных стратегий в зависимости от вашего уровня опыта и того, чего вы пытаетесь достичь. Как только вы узнаете, какие у вас есть варианты, вы сможете выбрать индивидуальное решение JavaScript, которое наиболее подходит для вас.
В этом посте мы расскажем вам о трех методах, которые вы можете использовать для добавления пользовательского JavaScript на свой сайт WordPress, а также обсудим плюсы и минусы каждого варианта. Вот три метода, которые мы рассмотрим — вы можете щелкнуть, чтобы перейти прямо к определенному методу:
- Используйте плагин Head & Footer Code (самый простой вариант для нетехнических пользователей)
- Добавьте код в файл functions.php
- Добавьте код в шапку (используя функцию wp_enqueue_script или хук wp_head)
Давайте прыгать!
1. Установите плагин, например Head & Footer Code.
Использование плагина — один из самых простых способов добавить пользовательский JavaScript WordPress на ваш сайт. Например, Head & Footer Code — хороший инструмент:
Этот бесплатный плагин позволяет вставлять код различными способами. Вы можете использовать его для Facebook Pixel, Google Analytics, пользовательского CSS и многого другого.
Для начала добавьте плагин на свой сайт, перейдя по ссылке Плагины → Добавить новый из панели администратора, затем выполните поиск «Код верхнего и нижнего колонтитула».
Как только вы нажмете на Установите сейчас и Активировать кнопки, вы можете найти настройки плагина, перейдя в Инструменты → Код верхнего и нижнего колонтитула. На этом экране есть три поля для разделов заголовка, нижнего колонтитула и тела:
Вы можете ввести свой пользовательский JavaScript WordPress в любое из этих полей. Когда вы закончите, выберите Сохранить изменения кнопку внизу экрана. Затем код будет загружаться на каждую страницу вашего сайта.
Плюсы и минусы использования плагина
Основным преимуществом использования плагина является то, что он удобен для начинающих. Вам не нужно беспокоиться о редактировании файлов вашей темы. Плагин Head & Footer Code также может пригодиться, если вы ищете простой способ добавления других типов кода и пользовательских CSS.
Однако недостатком этого метода является то, что он предполагает установку стороннего плагина, которого некоторые владельцы сайтов стараются избегать. Если вы хотите свести свои расширения к минимуму, вам может быть лучше использовать один из других методов. Кроме того, плагин предназначен для изменения JavaScript на всем сайте, а не на отдельных страницах или сообщениях.
2. Используйте свой файл functions.php
Другой метод добавления пользовательского JavaScript WordPress на ваш веб-сайт — использование встроенных функций и хуков для редактирования functions.php файл. Этот подход предполагает ручную загрузку скриптов на ваш сервер.
Прежде чем приступить к работе, мы рекомендуем создать дочернюю тему. Этот шаг помогает убедиться, что вы по-прежнему сможете безопасно обновлять родительскую тему. Вы также должны сделать резервную копию своего сайта на случай, если что-то пойдет не так.
Этот метод предполагает использование IS_PAGE функция. Вы можете добавить условную логику, чтобы применить свой собственный JavaScript к отдельной публикации или странице.
Для начала найдите и откройте свой functions.php файл, затем скопируйте и вставьте следующий фрагмент кода:
function ti_custom_javascript() { ?> Этот код добавит JavaScript в ваш заголовок. Чтобы применить его к одному сообщению, вы можете использовать следующее:
function ti_custom_javascript() { if (is_single (‘3’)) { ?> Обратите внимание, что вам нужно будет заменить 3 в приведенном выше примере на идентификационный номер сообщения, к которому вы хотите добавить код. Чтобы найти этот номер, перейдите к сообщению на панели администратора, а затем нажмите Редактировать. В URL-адресе панели браузера идентификационный номер — это число рядом с «post=»:
Сохраните файл после замены идентификационного номера и добавления собственного JavaScript в указанную область. Вы также можете повторить этот же процесс для одной страницы WordPress.
Плюсы и минусы редактирования вашего файла functions.php
Преимущество редактирования вашего functions.php файл заключается в том, что вам не нужно устанавливать другой плагин. Вы также можете использовать эту технику для добавления функций и возможностей как в вашу тему, так и в сам WordPress. Например, этот метод может вставлять JavaScript в один пост или страницу или во все страницы.
Единственным недостатком этого метода является то, что он включает в себя работу с кодом и редактирование файлов вашего сайта. Поэтому это может быть не лучший вариант, если у вас нет опыта в этом отделе.
Существует способ добавить пользовательский JavaScript для WordPress, вставив тег Обратите внимание, что wp_head hook срабатывает только на передней части вашего сайта. Это означает, что любой пользовательский код JavaScript, который вы добавляете с помощью этого метода, не будет отображаться в области администрирования или входа в систему. Однако, если вы хотите добавить JavaScript в эти области, вы можете использовать admin_head и login_head крючки действия соответственно.
Плюсы и минусы добавления JavaScript в заголовок
wp_enqueue_script разработчики предпочитают эту функцию, потому что она предотвращает конфликты, которые могут возникнуть с другими параметрами, такими как прямое добавление скриптов в ваш заголовок.php файл. Кроме того, использование этого метода не создает никаких зависимых сценариев.
Основная проблема с добавлением собственного WordPress JavaScript в заголовок вашего сайта заключается в том, что это может вызвать проблемы с другими плагинами, которые загружают свои собственные скрипты. Эта настройка также может привести к многократной загрузке нескольких сценариев, что может снизить общую скорость и производительность вашего веб-сайта.
Начните работу с пользовательским JavaScript для WordPress
По умолчанию WordPress не позволяет вставлять фрагменты кода JavaScript на ваши страницы и сообщения. К счастью, некоторые обходные пути могут добавить ваш пользовательский JavaScript WordPress, не нарушая работу вашего сайта. Лучший метод зависит от вашего уровня комфорта при редактировании файлов вашего сайта и от того, где вы хотите применить сценарии.
Как мы обсуждали в этом посте, есть три способа добавить пользовательский JavaScript WordPress на свой сайт:
- Установите плагин, такой как Head & Footer Code.
- Используй свой functions.php файл, чтобы добавить пользовательский JavaScript на одну страницу или сообщение.
- Добавьте JavaScript в свой заголовок, используя либо wp_enqueue_script функция или wp_head крюк.
Теперь, когда вы знаете, как добавить собственный JavaScript в WordPress, вам может быть интересно другое наше руководство по добавлению пользовательского CSS в WordPress.
У вас есть вопросы о добавлении пользовательского JavaScript WordPress на ваш сайт? Дайте нам знать в комментариях ниже!
Бесплатное руководство
4 основных шага к ускорению
Ваш сайт WordPress
Следуйте простым шагам из нашей мини-серии из 4 частей.
и сократить время загрузки на 50-80%. 🚀
