Ноя

Добавляем CSS стили в WordPress админку (2 метода + советы)

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

Наиболее простой пример использования этого приема – когда у вас в одном из установленных плагинов есть десятки разных полей, но для пользователя реально нужны только некоторые из них. Например, я как-то ставил модуль по недвижимости, где среди всевозможных параметров объекта по типу площади квартиры, адреса, этажей, балконов и т.д., заказчику нужно было 2-3 значения. Я просто выделил соответствующие заголовки красным цветом с подчеркиванием дабы они бросались в глаза в первую очередь и человек знал, что редактировать нужно только их. Разумеется, пояснения по этому поводу я также добавил в документацию по сайту.

Но вернемся к нашему вопросу – тут есть 2 варианта реализации.

Добавляем отдельные стили в админ панель

Допустим, вам нужно внедрить какие-то незначительные изменения, которые вполне реально описать несколькими CSS-правилами. В таком случае в файл functions.php вставляем строки:

add_action('admin_head', 'my_custom_styles');
function my_custom_styles() {
  echo '<style>
    div#sidebar-left h2, div#footer-bar-left-sidebar h2, div#wc-left-sidebar h2 {
    color: red;
    text-decoration: underline;
	}
  </style>';
}

В данном примере заголовки некоторых полей виджетов будут красными с подчеркиванием. Внутри тегов style можете добавлять любые другие стили. Хук admin_head вызывает функцию только в бэкенде.

Кстати, этим же способом можно попытаться скрыть кнопку Настройка экрана в админ панели WordPress хотя, думаю, правильнее реализовать все через фильтр.

Добавление файла стилей CSS в админку WordPress

Когда требуется сделать значительные изменения внешнего облика бэкенда, то лучше вынести все оформление в отдельный CSS-файл, например – myadmin.css. Загружаете его в директорию со своим установленным шаблоном, после чего в файле функций functions.php вставляете код:

function my_admin_style() {
  wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/myadmin.css');
}
add_action('admin_enqueue_scripts', 'my_admin_style');

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

Дополнения по теме

1. Код, приведенный в предыдущем фрагменте работает 100%, только что его тестировал. Но мне вспоминается алгоритм подключения jQuery в WordPress и других скриптов, где тот или иной JS-скрипт сначала регистрируется через wp_register_style(), а затем вызывалась функция wp_enqueue_style(). Однако в описании последней функции сказано, что если предварительно стиль не зарегистрирован, то это будет автоматически сделано (то есть, по идее, достаточно только ее одной).

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

function change_plugin_styles() {
	wp_register_style( 'newcss-plugin', plugins_url( 'НАЗВАНИЕ_ПЛАГИНА/new_plugin.css' ) );
	wp_enqueue_style( 'newcss-plugin' );
}
add_action('admin_enqueue_scripts', 'change_plugin_styles');

Во всех найденных в интернете сниппетах применяется конструкция с двумя совместными функциями регистрирования и подключения стилей, поэтому, думаю, с плагинами есть смысл поступать именно так. ВАЖНО! Перед использованием подставьте в данном коде название модуля, куда вы предварительно загрузили файл new_plugin.css (или другой).

3. Также в одном обсуждении увидел совет, что если ваш CSS-код зависит от другого файла стилей, то следует юзать функцию wp_add_inline_style() с тем же хуком admin_enqueue_scripts. Она позволяет добавить дополнительные правила, когда основные CSS-стили уже загружены. Вот пример из codex.wordpress.org:

function my_styles_method() {
	wp_enqueue_style(
		'custom-style',
		get_template_directory_uri() . '/css/custom_script.css'
	);
        $color = get_theme_mod( 'my-custom-color' ); 
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'admin_enqueue_scripts', 'my_styles_method' );

4. Кстати, если захотите изменить вид страницы логина, то вместо admin_enqueue_scripts используйте:

add_action('login_head', 'my_admin_style');

Либо может сработать (не тестил):

add_action('login_enqueue_scripts', 'my_admin_style');

P.S. Пару слов по поводу моего примера применения данной задачи, озвученного в начале статьи. Многие серьезные веб-разработчики могут сказать, что подсвечивать поля вместо их удаления не совсем корректно, но тут есть определенные нюансы. Во-первых, как правило, клиент предпочитает экономить бюджет, поэтому, как мне кажется, ему предпочтительнее выбирать «подсвеченные красным» параметры нежели доплачивать за максимальную модификацию плагина. Во-вторых, в ходе правки модуля вы рискуете добавить лишних ошибок или возникнет сложность с его дальнейшим обновлением. В-третьих, иногда клиенту может понадобится вернуть то, что вы удалили и т.п.

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