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

Что такое JavaScript

JavaScript – это язык программирования, с помощью которого создаются интерактивные веб-страницы и приложения. Изначально страницы сайтов были статичные, появление в 1995 году JavaScript (часто можно встретить сокращение JS) позволило создавать сайты с динамическими элементами. Эта возможность сделала новый язык программирования самым популярным в мире.

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

Особенность JavaScript заключается в том, что скрипты JS обрабатываются на стороне клиента, то есть в браузере. Это повышает скорость отдачи контента и увеличивает быстроту работы сайта. При этом остается возможность обработки скриптов на стороне сервера с помощью программной платформы Node.js, этот вариант может понадобиться для разработки приложений, работающих в режиме реального времени. 

Для стабильной и высокой скорости работы сайта выбирайте хостинг, подготовленный для проектов на CMS WordPress.

Как подключить JavaScript на WordPress

Чтобы добавить JS в WordPress можно выбрать один из следующих способов:

  1. Использовать плагин Shortcoder
  2. Использовать функцию wp_enqueue_script
  3. Использовать плагин Code Snippets

Плагин Shortcoder

Чтобы добавить плагин Shortcoder зайдите в административную панель WordPress (WP) и выполните следующие шаги:

  1. Откройте вкладку Плагины в боковом меню панели WP.
  2. Кликните по кнопке Добавить новый.
  3. Когда откроется окно для выбора плагина, в поисковой строке введите название Shortcoder.
  4. Когда появится список плагинов, выберите нужный и нажмите Установить.

  1. Затем активируйте плагин.
  2. После активации перейдите в раздел Shortcoder и выберите меню Create shortcode.

  1. В открывшемся редакторе нажмите на раскрывающийся список и выберите Code editor (эта функция позволяет добавить скрипт).

  1. При добавлении шорткода придумайте ему название, затем добавьте сам код:

<script type="text/javascript">

JavaScript code

</script>

Вы можете сохранить его в качестве черновика, без добавления на страницу (это возможно только после публикации. Если же необходимые скрипты добавлены и вы хотите сохранить шаблон, то кликните по кнопке Опубликовать. 

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

Функция  wp_enqueue_script

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

Чтобы подключить скрипт JS в файл functions.php вашей темы добавьте следующий код:

function mytheme_scripts_method(){

 wp_enqueue_script( 'jquery', get_template_directory_uri() . '/path_to/script_file_name.js');

}

add_action( 'wp_enqueue_scripts', 'mytheme_scripts_method' );

Где jQuery – многофункциональная JavaScript библиотека.

При редактировании файла предполагается, что скрипт JS находится в одной директории с вашей темой.

Плагин Code Snippets

Плагин Code Snippets позволяет добавлять фрагменты PHP кода на сайт WordPress, таким образом, не требуется редактировать файлы функций темы напрямую. Чтобы использовать плагин Code Snippets для подключения JavaScript к вашему сайту WordPress выполните следующие действия:

  1. Установите и активируйте плагин Code Snippets через административную панель WordPress по аналогии с плагином Shortcoder.
  2. Перейдите в раздел Snippets и выберите раздел Add New, чтобы создать новый код.
  3. Введите заголовок вашего фрагмента кода в поле Title.
  4. Затем добавьте код в поле Code и нажмите Save Changes and Activate:

add_action( 'wp_enqueue_scripts', 'my_custom_script' );

function my_custom_script() {

    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true );

}

В этом примере используется функцию wp_enqueue_script(), которая добавляет скрипт в WordPress. Имя скрипта 'my-script', путь к скрипту get_stylesheet_directory_uri() . '/js/custom-script.js', он зависит от jquery array(), версия скрипта '1.0.0' , также указывается, что скрипт добавляется внизу страницы true.

  1. Сохраните фрагмент кода и проверьте сайт, чтобы убедиться, что заданный файл JavaScript был подключен.

JavaScript подключен к вашему сайту WordPress с помощью плагина Code Snippets.

Всё ещё остались вопросы?