Javascript подключение в wordpress

JavaScript на WordPress: как добавить

Читайте нашу статью, если хотите узнать, как настроить JS для WordPress. Мы расскажем о преимуществах JavaScript и покажем три способа его подключения на WP.

Что такое JavaScript и как работает

JavaScript — мультипарадигменный язык программирования. С его помощью можно добавить на веб-страницу сложные элементы: динамически обновляемый контент, интерактивные карты, 2D/3D-анимацию, прокрутку видео и другое.

Скрипты JS обрабатываются не на сервере, а прямо в браузере. Чтобы браузер мог прочитать JavaScript и отобразить пользователю нужный контент, в него встроен специальный движок. Именно он обрабатывает JS-скрипты и затем переводит их в машинный код. Самый популярный в настоящее время движок V8 был разработан в 2008 году компанией Google.

Скрипт JS выглядит следующим образом:

Обычно, чтобы на сайте отображались JavaScript-элементы, достаточно добавить этот скрипт в код сайта. Однако на WP этот номер не проходит — после сохранения пользовательского файла все изменения удаляются. Поэтому ниже мы показали альтернативные способы настройки JavaScript на WordPress.

Как подключить JS в WordPress

Добавить JS в WordPress можно одним из трёх способов:

• через файл functions.php,
• с помощью плагина Insert Headers and Footers,
• с помощью плагина Shortcoder.

functions.php — это главный файл темы, который загружается при каждом открытии любой страницы WordPress. В нём задаются свойства, внешний вид и функциональность темы, а также кастомизируются хуки. Через functions.php можно добавить на сайт новые функции без установки плагинов.

1. Войдите в панель управления хостингом.
2. Откройте папку wp-includesв корневом каталоге сайта.
3. Кликните по файлу functions.php, наведите курсор мыши на кнопку Редактировать и выберите Открыть:
4. Добавьте код и нажмите Ok: Готово, скрипты для сайта WordPress добавлены.

Insert Headers and Footers by WPBeginner — это простой в использовании плагин, который позволяет вставить код Google Analytics, JavaScript, пользовательский CSS и другие данные в нужную часть сайта WordPress — шапку, подвал или тело. При этом саму тему редактировать не нужно.

1. Войдите в WordPress.
2. Перейдите раздел Плагины — Добавить новый. Введите «Insert Headers and Footers by WPBeginner» в поисковую строку и кликните Установить:
3. Нажмите Активировать:
4. Перейдите в раздел Настройки — Insert Headers and Footers. Вставьте скрипт в одну из трёх частей сайта:

• в Header (шапка сайта),
• в Body (основная часть сайта),
• в Footer (подвал сайта).

5. После этого нажмите Сохранить изменения: Готово, подключение скрипта для WordPress завершено.

Shortcoder — плагин для создания и вставки шорткода в текст записей. Очень прост в использовании. С его помощью можно добавить на страницы рекламу Я.Директ, любые JS-скрипты, Flash-содержимое и многое другое.

1. Войдите в WordPress.
2. Перейдите раздел Плагины — Добавить новый. Введите «Shortcoder», а затем кликните Установить:
3. Нажмите Активировать:
4. В настройках плагина из раскрывающегося списка выберите режим Code editor:
5. Укажите название и добавьте код. Этот фрагмент нельзя добавить на страницу до публикации, но можно сохранить в качестве шаблона. Чтобы создать черновик шаблона, нажмите Сохранить:
6. Чтобы сохранить готовый шаблон, нажмите Опубликовать: Готово. Теперь вы можете встроить этот шаблон на любую страницу.

Популярные статьи

• Как указать (изменить) DNS-серверы для домена
• Я зарегистрировал домен, что дальше
• Как добавить запись типа A, AAAA, CNAME, MX, TXT, SRV для своего домена
• Что такое редирект: виды и возможности настройки
• Как создать почту со своим доменом

Источник

Как добавить пользовательский JavaScript на WordPress-сайт

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

Добавление пользовательского JavaScript на WordPress

Чтобы добавить собственный JavaScript-код на WordPress- сайт, нужно использовать:

1. Различные типы плагинов.
2. Функции и хуки WordPress в файле functions.php :

• хуки действий wp_head и wp_footer;
• хуки действий wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts;
• функция WordPress wp_enqueue_script().

Чего не нужно делать

Самый простой способ добавить пользовательский скрипт в WordPress – это использовать тег в файл шаблона header.php или footer.php . Но лучше этого не делать. Так как WordPress использует определенную последовательность загрузки ресурсов, которую необходимо соблюдать.

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

Поэтому никогда не добавляйте приведенный ниже код в файл header.php или footer.php :

1. Использование плагина для добавления пользовательского JavaScript-кода

Использование плагина рекомендуется, если:

• не хотите напрямую редактировать исходные файлы CMS.
• Нужно добавить независимый от используемой темы оформления JavaScript-код.

1.1. Плагины для редактирования header.php и footer.php

Первый вариант – использование плагина для редактирования шаблонов header.php и footer.php темы оформления WordPress. Если нужно добавить скрипты, которые загружаются до содержимого страницы, необходимо отредактировать шаблон шапки. Скрипты, которые загружаются после содержимого веб-страницы, добавляются в шаблон футера.

Плагин Insert Headers and Footers позволяет редактировать шаблоны хедера и футера. Он добавляет скрипты к хукам действий wp_head или wp_footer соответственно.

Вы можете вставить любой скрипт в два поля ввода. Затем включить скрипты с помощью тега . Вы также можете использовать этот плагин для добавления пользовательского CSS кода в шаблон заголовка, заключив его в тег .

1.2. Плагины для добавления пользовательского JavaScript

Также можно использовать плагины добавления пользовательского JavaScript . Большинство из них также используют хуки действия wp_head и wp_footer. Но они предоставляют больше параметров конфигурации.

Например, плагин Simple Custom CSS and JS позволяет определять постоянную ссылку для пользовательских файлов JavaScript, сохранять их в папку wp-content/ , управлять скриптами как пользовательским типом записей и многое другое.

1.3. Скрипты, специфичные для плагинов

Создатели популярных JavaScript-библиотек часто публикуют бесплатные плагины в репозитории WordPress.org для добавления своих скриптов. Подобные плагины поставляется со встроенными параметрами конфигурации для конкретной JavaScript-библиотеки.

Например, плагин GA Google Analytics позволяет интегрировать Google Analytics на сайт прямо из панели администрирования WordPress. Он поставляется со встроенными функциями, специфичными для скрипта Google Analytics.

2. Редактирование файла functions.php дочерней темы оформления

Также можно использовать встроенные в WordPress функции и хуки действий. В этом случае необходимо отредактировать файл functions.php и вручную загрузить скрипт на используемый сервер. Также желательно создать дочернюю тему оформления для сохранения ваших настроек.

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

Затем добавьте PHP-код, который ставит в очередь или выводит пользовательский JavaScript-код, в functions.php дочерней темы оформления. Это можно сделать через меню Внешний вид> Редактор тем в панели администрирования WordPress.

2.1. Добавление собственных скриптов в очередь с помощью функции wp_enqueue_script()

WordPress Theme Handbook рекомендует использовать для добавления JS-скриптов функцию wp_enqueue_script() . Она ставит пользовательские скрипты в очередь на загрузку в правильном порядке.

С помощью wp_enqueue_script() можно добавить собственный JavaScript в шаблоны хедера и футера. По умолчанию функция размещает скрипты в раздел страницы.

Чтобы добавить скрипт в хедер, нужно определить собственный дескриптор (‘custom’ в примере, приведенном ниже) и путь к скрипту. А также использовать функцию get_stylesheet_directory_uri() для получения URI каталога дочерней темы оформления.

функция add_action() добавляет пользовательскую функцию tutsplus_enqueue_custom_js() в хук действия wp_enqueue_scripts . Он ставит в очередь пользовательские скрипты.

/* Пользовательский скрипт без зависимостей, включенный в хедере */ add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js'); function tutsplus_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js'); >

Функция WordPress wp_enqueue_script() и хук действия wp_enqueue_scripts имеют почти одинаковые имена. Но это разные методы.

Функцию wp_enqueue_script() можно использовать для добавления пользовательского JavaScript-кода в шаблон футера. Для этого потребуется определить дополнительные параметры:

1. зависимости: array(), так как у нас пока нет никаких зависимостей;
2. версия скрипта: false, так как мы не хотим добавлять номера версий;
3. true, так как мы переключаемся на шаблон футера, который не является параметром по умолчанию.

/* Пользовательский скрипт без зависимостей, включенный в футере */ add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js'); function tutsplus_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array(), false, true); >

Если пользовательский скрипт имеет зависимости, необходимо добавить их в параметр array() функции wp_enqueue_script(). Есть несколько популярных скриптов и библиотек , которые уже зарегистрированы ядром WordPress. Их можно добавить, используя зарегистрированный дескриптор (‘jquery’ в примере ниже).

/* Пользовательский скрипт с jQuery в качестве зависимости, включенный в футере */ add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js'); function tutsplus_enqueue_custom_js() < wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', array('jquery'), false, true); >

Для добавления зависимости, которая не зарегистрирована в WordPress, нужно использовать собственный дескриптор. Но перед этим необходимо зарегистрировать его и поставить зависимость в очередь с помощью функции wp_enqueue_script().

Чтобы запустить скрипт в панели администрирования, используйте хук действия admin_enqueue_scripts в функции add_action(). Для страницы входа в систему необходимо использовать хук login_enqueue_scripts . Он добавляет пользовательские скрипты в очередь только для страницы входа.

2.2. Вывод встроенного скрипта с помощью хуков действий wp_head и wp_footer

Также можно добавить скрипты на WordPress-сайт с помощью хуков действий wp_head и wp_footer . Они выводят пользовательские шрифты только в шаблоне хедера или футера. Эти хуки можно использовать для добавления встроенных скриптов, но не для внешних.

Пример использования хука wp_head для вывода скрипта в шаблоне хедера:

Пример использования wp_footer для вывода скрипт в шаблоне футера:

Скрипты, добавленные с помощью этих хуков, не будут загружаться в панели администрирования и на странице входа. Чтобы запускать пользовательские скрипты в панели администрирования WordPress, необходимо использовать хуки действия admin_head и admin_footer в функции add_action().

Чтобы запускать скрипты на странице входа в систему, используйте хуки действия login_head и login_footer .

Рассмотренные плагины Insert Headers and Footers и Simple Custom CSS and JS позволяют использовать wp_head и wp_footer не только для встроенных скриптов, но и для внешних файлов .js . Но эти плагины запускают дополнительные проверки, обеспечивающие соблюдение последовательности загрузки WordPress. Чтобы добавить скрипты вручную, лучше использовать функцию wp_enqueue_script().

Заключение

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

Источник