С выпуском WordPress 3.8 у нас появилась новая функция для тем интерфейса администратора. Это означает, что каждый пользователь может изменить цветовую схему своего администратора независимо от темы, которая используется во внешнем интерфейсе. Чтобы изменить цветовую схему вашего администратора, зайдите в Пользователи> Ваш профиль .
Здесь вы увидите восемь предопределенных тем, которые вы можете выбрать. Выберите любую тему из этих тем, и вы сразу увидите изменения. Когда вы закончите с выбором темы, нажмите кнопку «Обновить профиль».
Но это не так — что если вы хотите добавить свою собственную цветовую схему для администратора? Мы рассмотрим это в этом уроке.
Примечание. Чтобы следовать этому руководству, в вашей системе должны быть установлены Ruby и Sass. Вы можете найти больше инструкций по установке Ruby и Sass здесь .
Основная структура файла:
Мы сделаем наш собственный плагин, чтобы добавить больше цветовых схем в интерфейс администратора. Таким образом, мы будем соответствовать стандартам WordPress, чтобы не смешивать презентацию с функциональностью.
Итак, давайте перейдем к нашей папке плагинов и создадим новый каталог под названием «admin-color-themes». В этом каталоге создайте еще три каталога для наших стилей, изображений и JavaScript. Мы также создадим файл wordpress-admin-themes.php и добавим следующий код:
|
01
02
03
04
05
06
07
08
09
10
|
<?php
/**
* Plugin Name: WordPress Admin Themes
* Plugin URI: http://imbilal.com
* Description: A little plugin to add your own color schemes to WordPress.
* Version: 1.0
* Author: Bilal Shahid
* Author URI: http://imbilal.com
* License: GPL2
*/
|
Теперь, когда мы создали необходимую файловую структуру, мы начнем добавлять стили для наших новых схем пользовательского интерфейса.
Копирование необходимых файлов:
При подготовке пользовательских цветовых схем для добавления в администратор необходимо выполнить два шага:
- Создание таблицы стилей цветовой схемы
- Зарегистрируйте его в WordPress, чтобы он отображался на странице вашего профиля пользователя.
WordPress 3.8 использует файлы Sass для управления цветовыми схемами. Эти файлы Sass расположены в wp-admin> css> colors . Зайдя в этот каталог, вы найдете три файла Sass:
- _variables.scss
- _mixins.scss
- _admin.scss
Вы также заметите, что предопределенные цветовые схемы также находятся в том же каталоге.
Эти файлы Sass содержат необходимые миксины и переменные, которые мы можем использовать для определения наших собственных стилей. Так что скопируйте эти три файла в плагины> admin-color-themes> css .
Нам также нужны некоторые базовые стили, которые WordPress использует для своего администратора. Мы можем найти эти стили в wp-admin> css naming colors.css и colors-rtl.css . Как следует из названия, последний предназначен для языков справа налево. Скопируйте эти два файла в плагины> admin-color-themes> css .
Теперь, когда мы скопировали необходимые файлы, мы готовы настроить их для добавления пользовательских тем пользовательского интерфейса для администратора.
Настройка файлов Sass:
Перейдите к своим плагинам> admin-color-themes> папка css и откройте следующие файлы Sass, используя ваш редактор кода:
- _variables.scss
- _mixins.scss
- _admin.scss
Вот что делает каждый из этих файлов:
- _variables.scss содержит переменные Sass для различных свойств, таких как цвет текста, базовый цвет, цвет выделения, цвет уведомлений и т. д. Здесь мы можем изменить эти свойства, изменив значения их соответствующих переменных.
- _mixins.scss содержит миксин для создания эффекта 3d кнопки на основе основного цвета, который мы определили в нашем файле _variables.scss .
- _admin.scss содержит стили для различных элементов и их состояний взаимодействия. Он также импортирует файлы _variables.scss и _mixin.scss . Именно здесь все эти стили применяются к элементам, которые мы определили в наших переменных и файлах mixins.
Нам нужно создать еще два файла с именами color-схема.scss и цвет-схема-rtl.scss в папке css. В color-sche.scss добавьте следующий код:
|
1
2
|
@import ‘colors.css’;
@import ‘admin’;
|
В то время как в color-схема-rtl.scss , мы будем включать стили для поддержки RTL :
|
1
2
|
@import ‘colors-rtl.css’;
@import ‘admin’;
|
Обратите внимание, что нам не нужно указывать расширение файла `.scss`. Кроме того, мы ссылались на файл, используя admin вместо _admin, потому что он частичный. Если вам нужно больше узнать о Sass `@ import` и партиалах, вы можете прочитать о каждом из них в документации по Sass .
Итак, как видите, мы сгенерируем два файла для любой цветовой схемы. Один будет служить для языков слева направо, а другой — для других, если обнаружен языковой стандарт справа налево.
Теперь откройте _variable.scss и начните заменять значения переменных. Имена переменных достаточно информативны, поэтому у нас не возникнет проблем с их настройкой. Измените значения, как показано ниже:
|
1
2
3
4
5
|
$text-color: #fff !default;
$base-color: #314029 !default;
$highlight-color: #CCBC39 !default;
$notification-color: #4D5C2E !default;
$link: #8F9137 !default;
|
В консоли перейдите в папку css внутри admin-color-themes и введите следующую команду:
sass color-scheme.scss forest-afternoon.css
sass color-scheme-rtl.scss forest-afternoon-rtl.css
Здесь мы сгенерировали два файла css с именами forest -day.css и forest -day-rtl.css . Мы можем открыть эти файлы и увидеть, что Sass объединил _variables.scss , _mixins.scss и _admin.scss в один файл. Эти вновь созданные css-файлы используют обычное правило css @import для импорта файлов colors.css и colors-rtl.css .
Теперь нам нужно зарегистрировать эти таблицы стилей в WordPress, чтобы они отображались в качестве опции на странице профиля пользователя.
Регистрация таблиц стилей с помощью WordPress
В index.php мы сначала определим константу для пути:
|
1
|
define( ‘PATH’, plugins_url( », __FILE__ ) );
|
Теперь мы определим функцию, которая будет выполняться каждый раз, когда пользователь обращается к администратору:
|
1
2
3
|
function add_custom_admin_themes() {
}
add_action( ‘admin_init’, ‘add_custom_admin_themes’ );
|
Внутри функции add_custom_admin_themes мы зарегистрируем наши новые сгенерированные стили, используя функцию wp_admin_css_color :
|
1
2
3
4
5
6
|
wp_admin_css_color(
‘forest-afternoon’,
__( ‘Forest Afternoon’ ),
PATH .
array( ‘#421F22’, ‘#FFC042’, ‘#114F3F’ )
);
|
`Wp_admin_css_color` принимает пять параметров для ключа, имени, URL, цвета и цвета значков. Первые три из них являются обязательными, а два других являются необязательными.
Эти параметры определены ниже:
- Ключ — это уникальный ключ темы. Никакие две темы не могут иметь одинаковый ключ.
- Имя — это то, что появляется на странице профиля /
- URL — это путь к таблице стилей.
- Цвета относится к массиву шестнадцатеричных значений цвета. Он используется, чтобы дать пользователям представление о теме.
Мы также должны принять во внимание поддержку RTL. Итак, в начале объявления функции добавьте следующий код:
|
1
|
$suffix = is_rtl() ?
|
И измените параметр пути в вызове функции wp_admin_css_color следующим образом:
|
1
|
PATH .
|
Этот бит проверит, является ли текущая локаль языком справа налево. Если это так, будет загружена таблица стилей с суффиксом –rtl.
Окончательный код должен быть примерно таким:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
define( ‘PATH’, plugins_url( », __FILE__ ) );
function add_custom_admin_themes() {
$suffix = is_rtl() ?
wp_admin_css_color(
‘forest-afternoon’,
__( ‘Forest Afternoon’ ),
PATH .
array( ‘#421F22’, ‘#FFC042’, ‘#114F3F’ )
);
}
add_action( ‘admin_init’, ‘add_custom_admin_themes’ );
|
На данный момент, мы успешно зарегистрировали новый стиль администратора, мы можем проверить его, перейдя в Пользователи> Ваш профиль (обязательно сначала активируйте плагин):
Активируйте новый стиль, выбрав его и нажав кнопку « Обновить профиль» .
Вы можете создать столько стилей, сколько захотите, просто изменив значения в файле _variables.scss, а затем зарегистрировав их в вашем index.php . Вы можете быстро получить отличные цветовые схемы с помощью Adobe Kuler . Тема, которую мы использовали в этом уроке — « Лесной полдень» .
Вы можете скачать готовый плагин здесь .
Вывод
В этом уроке мы рассмотрели, как мы можем создать и добавить еще несколько цветовых схем для администратора WordPress, используя препроцессор Sass.
Если вы хотите узнать больше о Sass, ниже приведены ресурсы: