Стилизуем элементы консоли WordPress

Разработчики WordPress приложили максимум усилий для того, чтобы консоль — административная часть сайта, была функциональна, современна, удобна в использовании и одновременно с этим, проста. Дизайн довольно аскетичный, в нем преобладают серые цвета. На мой взгляд, она наиболее верно подходит своему назначению. Однако, мне всегда не хватало яркого выделения черновиков записей и подсветки кнопки “Новая запись”.

Недавно, в google+ сообществе WordPress проскользнула ссылка на заметку, в которой автор предлагает дооформить консоль по своему вкусу — wp-admin.com.ua/oformlyaem-adminku-dobavlyaem-fon-k-state-po-ee-sostoyaniyu.

Кстати, вот ее первоисточник — wpsnipp.com/index.php/functions-php/change-admin-postpage-color-by-status-draft-pending-published-future-private. Отличная идея!

Внеся небольшие правки в предложенный автором код получим:

add_action('admin_head','status_draft_color');
function status_draft_color(){
echo '<style>
.status-draft .post-state {
  background: #e56061;
  color: #fff;
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px;
  border-radius: 2px;
}
.wrap .add-new-h2 {
  background: #64b856;
  color: #fff;
  text-shadow: 1px 1px 1px #008b06;
}
.wrap .add-new-h2:hover {
  background: #419633;
  color: #fff;
}
</style>';}

Вместо хука admin_footer используем admin_head, что более корректно с точки зрения валидности html и добавим echo.

WordPress dashboard decorate
Обновленная консоль WordPress

С помощью данного примера можно стилизовать любой элемент консоли, а не только указанные, дело за малым — фантазией.

Кстати, одной из моих первых доработок консоли WordPress была идея дополнения админбара полезными и часто используемыми ссылками, прочтите — Статистика в админбаре.

Источники:
codex.wordpress.org/Function_Reference/add_action
codex.wordpress.org/Plugin_API/Action_Reference/admin_head
htmlbook.ru/html/style

Опубликовано

Обратите внимание на предыдущие записи: