Какой лучший способ использовать Bootstrap внутри административной панели?

На чтение 3 мин Опубликовано 03.01.2025

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Дополнительные рекомендации
Заключение

Вопрос или проблема

Мне нужно использовать Bootstrap CSS для улучшения пользовательского интерфейса в wp-admin, но если я подключаю bootstrap.css, это влияет на стандартный интерфейс админа, изменяя цвета фона и т.д.

Как я могу использовать bootstrap.css внутри wp-admin?

Как сказал @N00b, если селектор совпадает между bootstrap и wordpress и является более специфичным, то он будет перезаписан, и вы увидите изменения.

Если вы добавляете страницы через add_menu_page или add_submenu_page и вам нужно применить CSS только там, эти функции возвращают хук, который вы можете использовать вместе с действием load-$your_hook. С помощью этого хука вы можете загружать CSS только на этой конкретной странице. Например:

add_action( 'admin_menu', 'register_page');

function register_page()
{
  $my_hook = add_menu_page( 'tab title', 'page title', 'manage_options', 'my-page-slug', 'callback_function', 'dashicons-cloud', 1 );

  add_action( 'load-'.$my_hook, load_scripts );
}


function load_scripts ()
{
  add_action( 'admin_enqueue_scripts', 'enqueue_bootstrap' );
}

function enqueue_bootstrap()
{
  $path = plugins_url( 'my_plugin/inc/css/bootstrap.min.css' ); //используйте ваш путь, конечно
  $dependencies = array(); //добавьте любые зависимости в массив
  $version = false; //или используйте версию int или string
  wp_enqueue_style( 'myplugin-bootstrap', $path, $dependencies, $version );
}

Ответ или решение

Чтобы внедрить Bootstrap CSS в интерфейс админ-панели WordPress без изменения стандартного внешнего вида, необходимо подходить к задаче выборочно, минимизируя воздействие на элементы WordPress. Рассмотрим более лучший способ интеграции стилей Bootstrap, основываясь на указанных деталях.

Проблема

Основная проблема заключается в том, что стили в bootstrap.css могут конфликтовать с предопределенными стилями WordPress, изменяя, например, фоны и другие стилистические элементы админ-панели. Это происходит из-за схожих селекторов, где более специфичные стили Bootstrap перезаписывают стандартные стили WordPress.

Решение

Целевая инклузия стилей: Чтобы минимизировать воздействие на весь интерфейс, стили Bootstrap должны загружаться только на тех страницах админ-панели, где это необходимо. Это можно сделать с помощью функции add_menu_page или add_submenu_page, которая даёт возможность добавить страницу меню и вернуть хук для ее настройки.
Использование хуков WordPress: В приведенном примере описан процесс регистрации новой страницы в админ-панели с отдельной загрузкой стилей только для этой страницы:
- Регистрация страницы: Сначала создаём новую страницу в админ-панели с помощью add_menu_page.
- Загрузка стилей: Используем полученный $my_hook для определения хука load-{$my_hook} и вешаем на него функцию загрузки стилей.
- Инклузия Bootstrap: В функции, добавленной к admin_enqueue_scripts, выполняем загрузку стили Bootstrap через wp_enqueue_style.

Изолированная инклузия стилей:

add_action( 'admin_menu', 'register_page' );

function register_page() {
 $my_hook = add_menu_page( 'Название вкладки', 'Заголовок страницы', 'manage_options', 'my-page-slug', 'callback_function', 'dashicons-cloud', 1 );

 add_action( 'load-' . $my_hook, 'load_scripts' );
}

function load_scripts() {
 add_action( 'admin_enqueue_scripts', 'enqueue_bootstrap' );
}

function enqueue_bootstrap() {
 $path = plugins_url( 'my_plugin/inc/css/bootstrap.min.css' ); // измените на ваш путь
 wp_enqueue_style( 'myplugin-bootstrap', $path, array(), false );
}

Дополнительные рекомендации

Избегайте перезаписи стандартных стилей: При необходимости, используйте более уникальные CSS-классы или ID, чтобы переопределять только нужные элементы.
Использование SASS/SCSS: Модифицируйте стили Bootstrap с помощью препроцессоров, чтобы импортировать только необходимые компоненты.
Проверка браузерной совместимости и UX: Тестируйте изменения в разных браузерах и с различными сценариями использования, чтобы не ухудшить пользовательский опыт.

Заключение

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