Настраиваем панель администрирования WordPress – изменяем стиль элементов

Описание урока:

Программное обеспечение: WordPress

Сложность: Средняя

Время на выполнение: 45 минут

Результат: Что вы получите после проведения всех изменений.

Скачать материалы по данному уроку

Содержание

Это шестая из шести частей цикла "Пользовательская настройка панели администрирования WordPress":

1. Пользовательская настройка панели администрирования WordPress: Форма входа;

2. Пользовательская настройка панели администрирования WordPress: панель управления сайтом;

3. Настраиваем панель администрирования WordPress: пользовательское меню администрирования;

4. Настройка административной панели WordPress: текстовая справка;

5. Настройка панели администрирования WordPress – списки объектов;

6. Настраиваем панель администрирования WordPress – изменяем стиль элементов.

В первых пяти статьях данной серии я показала вам, как настраиваются различные элементы панели администрирования 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' );
Защитите панель администрирования WordPress с помощью .htaccess пароля

Вам также потребуется создать в директории /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;
}

Теперь изображение имеет нужный размер:

Вносим изменения в подписи нижней части страницы - 2

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;
}
Пользовательская настройка панели администрирования WordPress: панель управления сайтом

В результате цветовая гамма меню панели администрирования у нас теперь совсем другая:

  • фон темно-серого цвета;
  • вложенные пункты белого цвета с серым текстом;
  • ссылки белые;
  • активная страница имеет красный фон.

Самым сложным здесь является изменение стиля стрелки, которая указывает на активный пункт меню или вложенные уровни навигации – для того, чтобы задать ее стиль используются элементы .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);
}

В результате основной цвет кнопок и цвет каемки – когда элемент выбран и когда он неактивен – будут отличаться от цветов по умолчанию. На первом скриншоте мы можем видеть, какие цвета имеют данные элементы по умолчанию:

5 . Изменение стиля кнопок

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

5 . Изменение стиля кнопок - 2

Теперь все изменения дизайна, которые я хотела произвести, завершены!

Итог

В этой серии статей я показала вам шесть приемов для изменения различных элементов панели администрирования WordPress.

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

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

РедакцияПеревод статьи «Customizing the WordPress Admin – Adding Styling»