Как изменить цвет в админ-панели WordPress

Всем привет!
Еще одна статья, касающаяся темы админ-панель для заказчиков.
В этой статье я расскажу про два способа, с помощью которых можно поменять цвет админки WordPress. Воспользовавшись данной информацией, вы сможете поменять цветовую гамму WordPress по собственному желанию.
Статья небольшая, много времени у вас не заберет.

Способ №1

Откройте файл «functions.php» вашей активной темы и вставьте туда вот такой код ШАБЛОН (перед знаком «?>»):

add_action('admin_head', 'custom_colors');
function custom_colors() {
echo '<style ENGINE="text/css">
/* здесь будут стили css */
</style>';
}

Строка №4 – туда вписывайте стандартным способом CSS стили.
Чтобы узнать класс блока, в браузере нужно навести курсор мышки на блок:

Нажмите на правую кнопку мыши и выберите «Посмотреть код» (для браузера Гугл Хром):

Внизу откроется панель для просмотра кода, там же можно увидеть, какой идентификатор отвечает за стиль верхнего блока «id="wpadminbar"»:

Я думаю, CSS вы знаете. Чтобы сделать верхнюю панель черной, я прописал вот такой CSS стиль (строка №4):

add_action('admin_head', 'custom_colors');
function custom_colors() {
echo '<style type="text/css">
#wpadminbar{background:#000;}
</style>';
}

Если вам нужен не черный цвет, а какой-то другой, посмотрите на странице кода цветов.
Вот таким же способом можно менять цвет к остальным блокам, которые размещены в админ-панели.
Способ №2

В админ-меню слева перейдите по вкладке «Пользователи» => «Ваш профиль». Перед вами откроется «Цветовая схема». Выберите любой из 8 предложенных:

Вот и все!
Но помните, что первый способ намного расширяеет возможности работы с блоками, например, вот так:

Я добавил тень и поменял цвет текста:

add_action('admin_head', 'custom_colors');
function custom_colors() {
echo '<style type="text/css">
#wpadminbar{
background:#000;
box-shadow:1px 5px 15px -2px #7777db;
}
a.ab-item {
color: #7777db !important;
}
</style>';
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress, без плагинов