Настраиваем панель администрирования WordPress – изменяем стиль элементов
Описание урока:
Программное обеспечение: WordPress
Сложность: Средняя
Время на выполнение: 45 минут
Результат: Что вы получите после проведения всех изменений.

Скачать материалы по данному уроку
Это шестая из шести частей цикла "Пользовательская настройка панели администрирования WordPress":
1. Пользовательская настройка панели администрирования WordPress: Форма входа;
2. Пользовательская настройка панели администрирования WordPress: панель управления сайтом;
3. Настраиваем панель администрирования WordPress: пользовательское меню администрирования;
4. Настройка административной панели WordPress: текстовая справка;
5. Настройка панели администрирования WordPress – списки объектов;
6. Настраиваем панель администрирования WordPress – изменяем стиль элементов.
В первых пяти статьях данной серии я показала вам, как настраиваются различные элементы панели администрирования WordPress: в том числе форма авторизации, панель инструментов и окно редактирования записей.
В этом уроке вы узнаете, как оформить окно панели в соответствии с вашим корпоративным стилем и брендом. В частности, я расскажу вам, как:
- изменить стиль и настроить подписи в подвале окна панели администрирования;
- изменить стиль меню администрирования;
- изменить стили ссылок и кнопок.
Для этого я создам отдельный плагин - если у вас уже есть плагин, созданный по материалам предыдущих пяти статей данной серии, вы можете добавить в него код, который мы рассмотрим в этом уроке. Тогда у вас будет единый плагин со всеми настройками для панели администрирования.
Что вам потребуется для выполнения данного урока
Для выполнения урока вам понадобятся:
- Установленная система WordPress;
- Открытые права доступа к папке плагинов сайта, чтобы добавить в нее свой плагин.;
- Текстовый редактор для редактирования кода плагина.
Установки плагина
Так как в числе прочего мне потребуются новые изображения и таблицы стилей, то кроме PHP-файла мне нужно создать отдельные папки для них. Я создаю папку, в которой размещается PHP-файл, содержащий основные функции моего плагина, а также папки для изображений и стилей.
То есть у меня будет папка под названием wptutsplus-customizing-admin6-styling, в которой у меня есть две вложенные папки – с изображениями и CSS – а также PHP-файл.
В начале этого PHP-файла я прописываю следующие строки:
/ *
Название плагина: Customize the Admin Part 6 – изменение стиля панели инструментов
URI плагина: http://rachelmccollin.co.uk
Описание: Этот плагин предназначен для настройки стиля панели администрирования WordPress.
Версия: 1.0
Автор: Рэйчел МакКоллин
URI автора: http://rachelmccollin.com
Лицензия: GPLv2
* /
Начинаем с панели инструментов
Так как в предыдущих уроках данного цикла я уже производила некоторую настройку панели инструментов, то она выглядит не совсем так, как панель инструментов WordPress по умолчанию. На скриншоте ниже показано, с какого момента мы начинаем:

В этом уроке я изменю стиль некоторых элементов (в том числе их цветовую гамму) так, чтобы они соответствовали моему бренду.
1. Установки для таблицы стилей
Прежде всего, я собираюсь создать таблицу нужных нам стилей. Вместо использования хука wp_enqueue_scripts, как это делается для установки стилей самого сайта, я использую функцию admin_enqueue_scripts.
Поэтому добавляем в наш плагин следующий код:
// давайте начнем с корректного отображения стилей
function wptutsplus_admin_styles() {
wp_register_style( 'wptuts_admin_stylesheet', plugins_url( '/css/style.css', __FILE__ ) );
wp_enqueue_style( 'wptuts_admin_stylesheet' );
}
add_action( 'admin_enqueue_scripts', 'wptutsplus_admin_styles' );
Вам также потребуется создать в директории /CSS папки вашего плагина собственные таблицы стилей. С их помощью вы будете задавать стили для элементов, описанных ниже в этом уроке.
2. Вносим изменения в подписи нижней части страницы
По умолчанию текст внизу страницы гласит: «Спасибо за использование WordPress». Если вы используете multisite или разрабатываете сайт для клиентов, вы можете использовать здесь подписи, связанные с вашим брендом. Это легко можно сделать с помощью фильтра admin_footer_text.
Я собираюсь изменить сам текст, а также добавить к нему еще и логотип. Поэтому создаю в папке с изображениями моего плагина файл, откуда логотип будет загружаться. А в сам код плагина я добавляю следующие строки:
//изменяем подписи в нижней части страницы
function wptutsplus_admin_footer_text () {
echo '<img src="' . plugins_url( 'images/wptutsplus-icon.png' , __FILE__ ) . '">This tutorial is brought to you by <a href="http://wp.tutsplus.com">wptutsplus</a>.';
}
add_filter( 'admin_footer_text', 'wptutsplus_admin_footer_text' );
В результате подписи внизу страницы будут выглядеть так, как это показано на скриншоте ниже:

Однако само изображение слишком велико, хотя я итак уменьшила его при загрузке. К тому же оно расположено слишком близко к тексту. Чтобы исправить ситуацию, необходимо добавить некоторые стили в таблицу стилей, которую мы уже создали.
В таблицу стилей вашего плагина, добавьте следующие строки:
/* стили для подписей внизу страницы */
#wpfooter #footer-left img {
height: 1.2em;
width: auto;
margin-right: 0.5em;
}
Теперь изображение имеет нужный размер:

3. Изменение стиля меню панели администрирования
В третьей части этого цикла статей я показала вам, как настроить содержимое меню панели администрирования - сейчас я покажу, как настроить его стиль. Я собираюсь кардинально изменить цвет элементов – результат вам может понравиться, а может и нет, но зато вы будете знать, как это делается!
В таблицу стилей мы добавляем следующие строки:
/* изменяем стиль меню панели администрирования */
/* фон и цвет текста */
#adminmenuback, #adminmenuwrap {
background-color: #58595b;
border-color: #fff;
}
#adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus {
background-color: #58595b;
color: #d54e21;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
#adminmenu li.wp-menu-separator {
background: #fff;
border-color: #fff;
}
/* стиль ссылок */
#adminmenu a,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
}
#adminmenu a:hover,
#adminmenu a:active {
color: #fff;
text-decoration: underline;
}
#adminmenu .wp-submenu a {
color: #58595b;
}
/* изменяем цвет стрелок в подменю */
#adminmenu li.wp-not-current-submenu .wp-menu-arrow,
#adminmenu li.wp-not-current-submenu .wp-menu-arrow div {
background: #58595b;
}
/* активный экран страницы – изменяем фон и цвет стрелок */
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background: #9e4059;
}
#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
#adminmenu li.wp-has-current-submenu .wp-menu-arrow div {
background: #9e4059;
}
В результате цветовая гамма меню панели администрирования у нас теперь совсем другая:
- фон темно-серого цвета;
- вложенные пункты белого цвета с серым текстом;
- ссылки белые;
- активная страница имеет красный фон.
Самым сложным здесь является изменение стиля стрелки, которая указывает на активный пункт меню или вложенные уровни навигации – для того, чтобы задать ее стиль используются элементы .wp-menu-arrow element и the .wp-menu-arrow div.
Однако с другой стороны здорово, что WordPress использует для отображения данного объекта чистый CSS, а не картинку. Потому что вам достаточно всего определить целевой элемент и поправить код, а не изменять изображение с помощью графического редактора.
Наша панель инструментов теперь выглядит таким образом:

4. Изменение стиля ссылок
Я хочу, чтобы мои ссылки отображались в тех цветах, которые я использовала для меню панели инструментов - в частности, я хочу, чтобы ссылки становились красного цвета, когда на них наведен курсор мыши или когда элемент выбран.
Добавляем в таблицу стилей следующие строки:
/* links elsewhere */
a:hover, a:active {
color: #9e4059;
}
Теперь мои ссылки будут красного цвета, когда на них наведен указатель мыши. Так, как это показано на скриншоте ниже:

5 . Изменение стиля кнопок
Последнее, что я хочу изменить в дизайне панели администрирования – это стиль кнопок. Я собираюсь изменить их цвета - когда они активны и неактивны. Здесь я использую ту же цветовую гамму, что и для других элементов панели:
В таблицу стилей добавляем следующий код:
/* кнопки */
.wp-core-ui .button-primary {
background: #4b8938;
background-image: -webkit-gradient(linear,left top,left bottom,from(#7ea367),to(#4b8938));
background-image: -webkit-linear-gradient(top,#7ea367,#4b8938);
background-image: -moz-linear-gradient(top,#7ea367,#4b8938);
background-image: -ms-linear-gradient(top,#7ea367,#4b8938);
background-image: -o-linear-gradient(top,#7ea367,#4b8938);
background-image: linear-gradient(to bottom,#7ea367,#4b8938);
border-color: #4b8938;
color: rgba(255,255,255,0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:active {
background: #9e4059;
background-image: -webkit-gradient(linear,left top,left bottom,from(#ba7582),to(#9e4059));
background-image: -webkit-linear-gradient(top,#ba7582,#9e4059);
background-image: -moz-linear-gradient(top,#ba7582,#9e4059);
background-image: -ms-linear-gradient(top,#ba7582,#9e4059);
background-image: -o-linear-gradient(top,#ba7582,#9e4059);
background-image: linear-gradient(to bottom,#ba7582,#9e4059);
border-color: #9e4059;
color: rgba(255,255,255,0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
В результате основной цвет кнопок и цвет каемки – когда элемент выбран и когда он неактивен – будут отличаться от цветов по умолчанию. На первом скриншоте мы можем видеть, какие цвета имеют данные элементы по умолчанию:

А это цвета, которые имеют активные и неактивные элементы после моего рестайлинга:

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