Сторінка WordPress Admin: зміна стилів CSS

20

Від автора: вірите чи ні, але я дуже багато часу приділяю коментарям у себе в блозі, пов’язані з виправленням орфографічних помилок, форматування коду і т. д; так, ті самі коментарі з старої версії 2007 року. В основному я стежу за якістю тексту, стежу, щоб текст був легкий для моїх читачів, особливо коментарі до коду.

В адмінці WordPress (сторінка WordPress admin) мене дратує одна річ – дуже важко визначити, де починається текст з тегом pre, особливо в шматках коду, які взагалі записані в один рядок. І я подумав: «А було б круто, якщо б я міг додати свої стилі інтерфейс панелі адміністратора». Саме це, дійсно, круто, я вирішив зробити це. І ось воно, нижче я покажу, як можна додати власний CSS-код в адмінку WordPress!

Крок 1: Створіть свій CSS файл

Помістіть його в будь-яке місце; я вирішив помістити файл у папці з темою. Мій CSS файл виглядає так:

.wp-admin .comment pre {
background: pink;
font-size: 16px;
border: 1px solid #ccc;
}
.wp-admin .comment pre[class] {
background: #fff;
}

Стилі вище роблять тег pre більш помітним, також будь тег PRE без класу став кидатися в очі. Такі елементи прямо просять підправити їх, додавши клас.

Крок 2: Додайте ваш CSS файл в панель адміністратора через файл functions.php

WordPress використовує спеціальний тип add_action у функції admin_enqueue_scripts для додавання стилів:

// Оновити CSS в адмінці
function admin_style() {
wp_enqueue_style(‘admin-styles’, get_template_directory_uri().’/admin.css’);
}
add_action(‘admin_enqueue_scripts’, ‘admin_style’);

У get_template_directory_uri зберігається шлях до поточної теми. До кінця шляху просто потрібно додати ім’я вашого файлу. Якщо вам, як і мені набридло оформлення панелі адміністратора в WordPress, приєднуйтесь, і давайте змінимо його. Мій приклад був дуже простий; якщо ви хочете серйозно підійти до цієї справи, щоб ваші клієнти подумали, що їм повністю налаштували систему під їх потреби, то вперед!