• Facebook
  • LinkedIn
  • EN EN EN en
  • LV LV LV lv
  • RU RU RU ru
[email protected] | +371 29394520
Coma Web Development
  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
    • Обслуживание сайтов на WordPress
    • LiteSpeed WordPress хостинг
    • Amazon Cloud Services
    • Чистка от вирусов
  • Работы
    • Сайты-визитки
    • Корпоративные сайты
    • Интернет-магазины
  • О нас
    • Преимущества
    • Вакансии
  • Цены
  • FAQ
  • Отзывы
  • Контакты
  • Menu Menu
WordPress, Туториалы

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

javscript-1

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

Ошибка

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

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

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

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

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

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

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

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

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Пояснение:

Мы начали регистрацию нашего скрипта через функцию 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()

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

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

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

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

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

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

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

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

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

  • wp_enqueue_script
  • wp_register_script
  • wp_enqueue_scripts

 


Наша специальность – разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации – [email protected], +371 29394520


Aug 28, 2016/2 Comments/by Vadim Pavlovich
Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
  • Share on Vk
  • Share by Mail

Search

Новые работы в портфолио

  • The Raven 1The RavenJan 15, 2021 - 19:05
  • Skyn 2SkynDec 22, 2020 - 17:11
  • Tetra Hemp Company 3Tetra Hemp CompanyDec 22, 2020 - 17:07
  • CAT&Lou 4CAT&LouDec 22, 2020 - 16:57
  • Paycasso 5PaycassoDec 22, 2020 - 16:48

О нас

Мы разрабатываем сайты на WordPress. Для нас очень важны красота, скорость, удобство использования и качественный код созданных нами проектов.

Каждый проект планируется, оценивается, разрабатывается и поддерживается индивидуально.

coma_logo_small

Контакты

Мы полностью удалённая команда. Своей базой мы считаем Ригу и можем при необходимости встретиться с вами.

+371 29394520
[email protected]

SIA YUVA
Reģ. Nr.: 42403034996
PVN reģ. Nr.: LV42403034996
Банк: A/S Swedbank
Счёт: LV16HABA0551038070386

Навигация

  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
  • О нас
  • FAQ
  • Отзывы
  • Блог
  • Контакты
Developed in coma.lv (естественно). Работаем с 2010 года.
  • Facebook
  • LinkedIn
Scroll to top