Как подключить JavaScript и CSS в тему или плагин WordPress

Всем привет!
В сегодняшней статье я расскажу, как подключить  JavaScript и CSS в тему или плагин WordPress.
Статья будет полезна для всех, кто учится разрабатывать плагины и темы движка WordPress.
Ведь неправильное подключение этих файлов может вызвать конфликт с темой, в лучшем случае, плагин просто не заработает правильно.

Код нужно вставлять в самый главный файл плагина (см. вот эту статью)

Начнем с подключения JavaScript.

function wptuts_scripts_important()
{
// Регистрируем скрипт в системе (для плагина):
wp_register_script( 'custom-script', plugins_url( 'scrolling-scroll.js', __FILE__ ) );
// или
// Регистрируем скрипт в системе (для темы):
wp_register_script( 'custom-script', get_template_directory_uri() . 'scrolling-scroll.js' );
// Для любого плагина или темы вы можете поставить в очередь на сценарий:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_important');
//add_action( 'admin_enqueue_scripts', 'wptuts_scripts_important' );
//add_action( 'login_enqueue_scripts', 'wptuts_scripts_important' );

Строка  № 4 и №7- «'custom-script'» –  уникальное имя (можете придумать свое), «'scrolling-scroll.js'» – путь и название файла со скриптом.

Обратите внимание на строку № 11! Вы можете установить скрипт не только для самого сайта, но и для админ-панели и страницы входа, как по отдельности, так и ко всему сразу:

• wp_enqueue_scripts – для внешней части сайта;
• admin_enqueue_scripts – для админ-панели;
• login_enqueue_scripts – для страницы входа.

Подключаем стили CSS:

functio nwptuts_styles_with_the_lot()
{
// Регистрируем файл стилей в системе (для плагина):
wp_register_style( 'custom-style', plugins_url( 'custom-style.css', __FILE__ ));
// или
// Регистрируем стиль в системе (для темы):
wp_register_style( 'custom-style', get_template_directory_uri() . 'custom-style.css');
// После регистрации мы можем ставить в очередь вызов файла стилей для любого плагина или темы:
wp_enqueue_style( 'custom-style' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );
//add_action( 'admin_enqueue_scripts', 'wptuts_styles_with_the_lot' );
//add_action( 'login_enqueue_scripts', 'wptuts_styles_with_the_lot' );

Строка  № 4 и №7 «'custom-style'» – уникальное имя (можете придумать свое), «'custom-style.css'» – путь и название файла со стилями:

В строке  № 11 вы можете установить скрипт не только для самого сайта, но и для админ-панели и страницы входа, как по отдельности, так и ко всему сразу:

• wp_enqueue_scripts – для внешней части сайта;
• admin_enqueue_scripts – для админ-панели;
• login_enqueue_scripts – для страницы входа.

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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress