Как добавить новую цветовую схему в админке wordpress

shemacolor9

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

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

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

shemacolor2

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

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

<?php
/*
Plugin Name: moicolorshem
Plugin URI: http://mnogoblog.ru/
Description: Своя цветовая схема админки.
Version: 1.0
Author: Mnogoblog
Author URI: http://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\

shemacolor1

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

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

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

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

shemacolor3

Здесь используются 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}

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

shemacolor4

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

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

shemacolor5

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

shemacolor6

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

shemacolor7

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

html{background:#f1f1f1}

меняем на

html{background:#f1f1f1}

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

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

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

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

shemacolor9

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>