03 Ноя
Когда вы разрабатываете собственный плагин для WordPress, вам почти всегда потребуется подключать кастомные стили и JavaScript-файлы. Однако в плагинах нельзя просто вставить <link> или <script> напрямую — WordPress использует специальную систему очередей (enqueue), которая позволяет подключать ресурсы корректно, безопасно и без конфликтов.
В этой статье рассмотрим, как подключать CSS и JS файлы для фронтенда и админки через функции wp_enqueue_style() и wp_enqueue_script() с правильными хуками.
Подготовка структуры плагина
Для удобства создадим следующую структуру папок внутри каталога плагина:
my-plugin/
│
├── assets/
│ ├── admin/
│ │ ├── css/
│ │ │ └── admin.css
│ │ └── js/
│ │ └── script.js
│ ├── front/
│ │ ├── css/
│ │ │ └── style.css
│ │ └── js/
│ │ └── script.js
│ └── libs/
│ └── (библиотеки и сторонние зависимости)
└── my-plugin.php
Папка libs предназначена для сторонних библиотек (например, jQuery-плагинов или внешних JS-компонентов).
Подключение файлов для админки
WordPress имеет отдельный хук для загрузки стилей и скриптов в панели администратора —admin_enqueue_scripts.
Добавим в плагин функцию, которая подключает CSS и JS для админки:
add_action('admin_enqueue_scripts', 'my_plugin_admin_assets');
function my_plugin_admin_assets() {
// Подключаем CSS
wp_enqueue_style(
'myplugin-admin-style',
plugins_url('assets/admin/css/admin.css', __FILE__)
);
// Подключаем JS
wp_enqueue_script(
'myplugin-admin-script',
plugins_url('assets/admin/js/script.js', __FILE__),
['jquery'], // зависимости
'1.0',
true // загрузка в футере
);
}
Функция plugins_url() возвращает корректный URL до файла внутри плагина — это аналог get_template_directory_uri() из тем, только для плагинов.
Не путайте её с plugin_dir_path(), которая возвращает путь на сервере, а не ссылку.
Подключение файлов для фронтенда
Для пользовательской части сайта используется другой хук —wp_enqueue_scripts.
add_action('wp_enqueue_scripts', 'my_plugin_front_assets');
function my_plugin_front_assets() {
// CSS для фронта
wp_enqueue_style(
'myplugin-front-style',
plugins_url('assets/front/css/style.css', __FILE__)
);
// JS для фронта
wp_enqueue_script(
'myplugin-front-script',
plugins_url('assets/front/js/script.js', __FILE__),
['jquery'],
'1.0',
true
);
}
Таким образом, стили и скрипты будут подключаться только на фронте, а не в админке.
Важные детали
- Разделяйте файлы по зонам — админка и фронт должны иметь свои собственные ресурсы. Это помогает избежать конфликтов и лишних загрузок.
- Используйте уникальные префиксы для хэндлов (
myplugin-front-style,myplugin-admin-script), чтобы не пересекаться с другими плагинами. - Подключайте зависимости правильно. Если скрипт зависит от jQuery, добавляйте
['jquery']в массив зависимостей — WordPress сам подгрузит нужные библиотеки. - Загружайте JS в футере. Последний параметр
trueвwp_enqueue_script()помещает код перед</body>— это ускоряет загрузку страницы. - Используйте версионирование. Передавайте номер версии (например,
'1.0') для обновления кеша при изменении файлов.
Проверка подключения
Чтобы убедиться, что всё работает, обновите страницу сайта и откройте исходный код или консоль разработчика (Ctrl+Shift+I).
В блоке <head> или перед закрывающим тегом </body> вы увидите:
<link rel='stylesheet' id='myplugin-front-style-css' href='.../assets/front/css/style.css' type='text/css' media='all' />
<script src='.../assets/front/js/script.js' id='myplugin-front-script-js'></script>
А в админке аналогичные файлы будут загружаться с путями .../assets/admin/....
Заключение
Использование wp_enqueue_style() и wp_enqueue_script() — это правильный и безопасный способ подключения CSS и JS в WordPress плагинах.
Разделяйте фронтенд и админскую часть, задавайте зависимости и версии, используйте хуки wp_enqueue_scripts и admin_enqueue_scripts, а также корректные функции для получения путей (plugins_url() или plugin_dir_url()).
Такой подход обеспечивает совместимость, оптимальную загрузку и чистую структуру кода вашего плагина.
