Здравствуйте, сегодня создадим плагин, который позволит нам добавить новую цветовую схему для админки wordpress.
Скачать исходники для статьи можно ниже
По умолчанию в админке wordpress, в пункте “Пользователи”, подпункт “Ваш профиль”, можно выбрать одну из нескольких цветовых схем:
Давайте создадим еще одну свою собственную.
1. Создадим php файл нашего плагина:
<?php
/*
Plugin Name: moicolorshem
Plugin URI: https://mnogoblog.ru/
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(https://mnogoblog.ru/wp-content/uploads/2015/12/newyearsnow-500x281.jpg) repeat ;}
Тогда ваша админка будет выглядеть так: