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

Скачать исходники для статьи можно ниже

По умолчанию в админке wordpress, в пункте “Пользователи”, подпункт “Ваш профиль”, можно выбрать одну из нескольких цветовых схем:

Давайте создадим еще одну свою собственную.

1. Создадим php файл нашего плагина:

<?php
/*
Plugin Name: moicolorshem
Plugin URI: /
Description: Своя цветовая схема админки.
Version: 1.0
Author: Mnogoblog
Author URI: https://mnogoblog.ru
*/

function add_color_schemes() {

wp_admin_css_color(
'mnogoblog',
'Mnogoblog Color Scheme',
$dir . plugins_url( '/colors.min.css', __FILE__ ),
array('#b43c38','#cf4944','#dd823b','#ccaf0b')
);
}
add_action('admin_init', 'add_color_schemes');
?>

Здесь в строчке array() – указываются основные цвета, используемые в схеме.

2. Создадим файл стилей для нашей новой цветовой схемы админки.

Для этого скопируем файл стилей одной из уже имеющихся цветовых схем – они хранятся в папке: wp-admin\css\colors\

выбираем один из цветов, заходим в его папочку и копируем файл – colors.min.css в папку нашего плагина.

Для примера возьмем цветовую схему – sunrice (рассвет).

3. После меняем цвета в коде файла colors.min.css.

Вот основные цвета у схемы Рассвет:

Здесь используются 4 цвета, вот их код:
#b43c38
#cf4944
#dd823b
#ccaf0b

Этот код легко узнать, используя инструмент “Пипетка” – для этого можете установить:
– Бесплатное расширение для браузеров ColorZilla или аналоги.
– Бесплатную программу GIMP (gimp.ru).
и др.

Для редактирования кода файла стилей данной цветовой схемы можно использовать бесплатный редактор Notepad++, скачать который можно здесь – “notepad-plus-plus.org”

Находим вышеуказанные основные цвета схемы – Рассвет – и изменяем их на свои!

Чтобы изменить цвет пунктов меню при наведении мышки измените следующий код:

a.menu-top:focus{color:#fff;background-color:#dd823b}

Например, меняем его на жёлтый:

a.menu-top:focus{color:#fff;background-color:#f1f403}

Вот, например, если вы хотите добавить вот такую цветовую схему:

То установите вот этот плагин – moicolorshem.

После того как вы установите данный плагин – вы сможете редактировать цветовую схему админки перейдя в пункт “Плагины”, найдите плагин с названием “moicolorshem” и нажмите на ссылку “Изменить”:

Справа – в списке файлов плагины вы сможете найти как php, так и css файл:

Давайте, например, ещё изменим нашу цветовую схему админки – и сделаем фон админки – жёлтым:

Для этого переходим в файл “moiadmincolor/colors.min.css” и меняем код (расположен в самом начале кода файла):

html{background:#f1f1f1}

меняем на

html{background:#f1f1f1}

Также вместо цвета можно использовать фоновое изображение!

Вот например поменяем вышеуказанный код на:

html{background:#f1f1f1 url(/wp-content/uploads/2015/12/newyearsnow-500x281.jpg) repeat ;}

Тогда ваша админка будет выглядеть так: