Опис уроку:

Програмне забезпечення: WordPress

Складність: Середня

Час проведення: 45 хвилин

Результат: Що ви одержите після проведення всіх змін.

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

Завантажити матеріали по даному уроку

Це шоста з шести частин циклу «Користувацька настройка панелі адміністрування WordPress»:

1. Користувацька настройка панелі адміністрування WordPress: Форма входу;

2. Користувацька настройка панелі адміністрування WordPress: панель управління сайтом;

3. Налаштовуємо панель адміністрування WordPress: користувальницьке меню адміністрування;

4. Налаштування адміністративної панелі WordPress: текстова довідка;

5. Настройка панелі адміністрування WordPress – списки об’єктів;

6. Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів.

У перших п’яти статтях цієї серії я показала вам, як налаштовуються різні елементи панелі адміністрування WordPress: у тому числі форма авторизації, панель інструментів і вікно редагування записів.

У цьому уроці ви дізнаєтеся, як оформити вікно панелі у відповідності з вашим корпоративним стилем і брендом. Зокрема, я розповім вам, як:

  • змінити стиль і налаштувати підпису в підвалі вікна панелі адміністрування;
  • змінити стиль меню адміністрування;
  • змінити стилі посилань і кнопок.

Для цього я створю окремий плагін — якщо у вас вже є плагін, створений за матеріалами попередніх п’яти статей цієї серії, ви можете додати в нього код, який ми розглянемо в цьому уроці. Тоді у вас буде єдиний плагін з усіма налаштуваннями для панелі адміністрування.

Що вам буде потрібно для виконання даного уроку

Для виконання уроку вам знадобляться:

  • Встановлена система WordPress;
  • Відкриті права доступу до папки плагінів сайту, щоб додати свій плагін.;
  • Текстовий редактор для редагування коду плагіна.

Установки плагина

Так як в числі іншого мені потрібні нові зображення і таблиці стилів, то крім PHP-файлу мені потрібно створити окремі папки для них. Я створюю папку, в якій розміщується PHP-файл, що містить основні функції мого плагіна, а також папки для зображень і стилів.

Тобто у мене буде папка під назвою wptutsplus-customizing-admin6-styling, в якій у мене є дві вкладені папки з зображеннями і CSS – а також PHP-файл.

На початку цього PHP-файл я прописую наступні рядки:

/ *
Назва плагіна: Customize the Admin Part 6 – зміна стилю панелі інструментів
URI плагіна: http://rachelmccollin.co.uk
Опис: Цей плагін призначений для налаштування стилю панелі адміністрування WordPress.
Версія: 1.0
Автор: Рейчел МакКоллин
URI автора: http://rachelmccollin.com
Ліцензія: GPLv2
* /

Починаємо з панелі інструментів

Так як в попередніх уроках даного циклу я вже виробляла деяку налаштування панелі інструментів, то вона виглядає не зовсім так, як панель інструментів WordPress за замовчуванням. На скріншоті нижче показано, з якого моменту ми починаємо:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

У цьому уроці я зміню стиль деяких елементів (у тому числі їх колірну гаму так, щоб вони відповідали моєму бренду.

1. Установки для таблиці стилів

Насамперед, я збираюся створити таблицю потрібних нам стилів. Замість використання хука wp_enqueue_scripts, як це робиться для установки стилів самого сайту, я використовую функцію admin_enqueue_scripts.

Тому додаємо в наш плагін наступний код:

// давайте почнемо з коректного відображення стилів
function wptutsplus_admin_styles() {
wp_register_style( ‘wptuts_admin_stylesheet’, plugins_url( ‘/css/style.css’, __FILE__ ) );
wp_enqueue_style( ‘wptuts_admin_stylesheet’ );
}
add_action( ‘admin_enqueue_scripts’, ‘wptutsplus_admin_styles’ );

Вам також потрібно створити в директорії /CSS папки вашого плагіна власні таблиці стилів. З їх допомогою ви будете задавати стилі для елементів, описаних нижче в цьому уроці.

2. Вносимо зміни до підпису нижній частині сторінки

За замовчуванням текст внизу сторінки говорить: «Спасибі за використання WordPress». Якщо ви використовуєте multisite чи розробляєте сайт для клієнтів, ви можете використовувати тут підпису, пов’язані з вашим брендом. Це легко можна зробити за допомогою фільтра admin_footer_text.

Я збираюся змінити сам текст, а також додати до нього ще й логотип. Тому створюю в папку з зображеннями мого файл плагіна, звідки логотип буде завантажуватися. А сам код плагіна я додаю наступні рядки:

//змінюємо підписи внизу сторінки
function wptutsplus_admin_footer_text () {
echo ‘Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементівThis tutorial is brought to you by wptutsplus.’;
}
add_filter( ‘admin_footer_text’, ‘wptutsplus_admin_footer_text’ );

В результаті підписи внизу сторінки будуть виглядати так, як це показано на скріншоті нижче:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

Однак саме зображення занадто велике, хоча я отже зменшила його при завантаженні. До того ж воно розташоване дуже близько до тексту. Щоб виправити ситуацію, необхідно додати деякі стилі в таблицю стилів, яку ми вже створили.

У таблицю стилів вашого плагіна, додайте наступні рядки:

/* стилі для підписів внизу сторінки */
#wpfooter #footer-left img {
height: 1.2 em;
width: auto;
margin-right: 0.5 em;
}

Тепер зображення має потрібний розмір:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

3. Зміна стилю меню панелі адміністрування

У третій частині цього циклу статей я показала вам, як налаштувати вміст меню панелі адміністрування — зараз я покажу, як налаштувати його стиль. Я збираюся кардинально змінити колір елементів – результат вам може сподобатися, а може і немає, але зате ви будете знати, як це робиться!

У таблицю стилів ми додаємо наступні рядки:

/* змінюємо стиль меню панелі адміністрування */
/* фон і колір тексту */
#adminmenuback, #adminmenuwrap {
background-color: #58595b;
border-color: #fff;
}
#adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top #adminmenu li > a.menu-top:focus {
background-color: #58595b;
color: #d54e21;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
#adminmenu li.wp-menu-separator {
background: #fff;
border-color: #fff;
}
/* стиль посилань */
#adminmenu a,
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
color: #fff;
}
#adminmenu a:hover,
#adminmenu a:active {
color: #fff;
text-decoration: underline;
}
#adminmenu .wp-submenu a {
color: #58595b;
}
/* змінюємо колір стрілок в підменю */
#adminmenu li.wp-not-current-submenu .wp-menu-arrow,
#adminmenu li.wp-not-current-submenu .wp-menu-arrow div {
background: #58595b;
}
/* активний екран сторінки – змінюємо фон і колір стрілок */
#adminmenu li.wp-has-current-a submenu.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
.folded #adminmenu li.wp-has-current-submenu,
.folded #adminmenu li.current.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head {
background: #9e4059;
}
#adminmenu li.wp-has-current-submenu .wp-menu-arrow,
#adminmenu li.wp-has-current-submenu .wp-menu-arrow div {
background: #9e4059;
}

В результаті колірна гамма меню панелі адміністрування у нас тепер зовсім інша:

  • фон темно-сірого кольору;
  • вкладені пункти білого кольору з сірим текстом;
  • посилання білі;
  • активна сторінка має червоний фон.

Найскладнішим тут є зміна стилю стрілки, що вказує на активний пункт меню або вкладені рівні навігації – для того, щоб задати її стиль використовуються елементи .wp-menu-arrow element і the .wp-menu-arrow div.

Однак з іншого боку здорово, що WordPress використовує для відображення даного об’єкта чистий CSS, а не картинку. Тому що вам достатньо всього визначити цільовий елемент і поправити код, а не змінювати зображення з допомогою графічного редактора.

Наша панель інструментів тепер виглядає таким чином:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

4. Зміна стилю посилань

Я хочу, щоб мої посилання відображалися в тих кольорах, які я використовувала для меню панелі інструментів — зокрема, я хочу, щоб посилання ставали червоного кольору, коли на них наведено курсор миші або коли елемент вибраний.

Додаємо в таблицю стилів наступні рядки:

/* links elsewhere */
a:hover, a:active {
color: #9e4059;
}

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

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

5 . Зміна стилю кнопок

Останнє, що я хочу змінити в дизайні панелі адміністрування – це стиль кнопок. Я збираюся змінити їх кольору — коли вони активні і неактивні. Тут я використовую ту ж колірну гаму, що і для інших елементів панелі:

У таблицю стилів додаємо наступний код:

/* кнопки */
.wp-core-ui .button-primary {
background: #4b8938;
background-image: -webkit-gradient(linear,left, top,left bottom,from(#7ea367),to(#4b8938));
background-image: -webkit-linear-gradient(top,#7ea367,#4b8938);
background-image: -moz-linear-gradient(top,#7ea367,#4b8938);
background-image: -ms-linear-gradient(top,#7ea367,#4b8938);
background-image: -o-linear-gradient(top,#7ea367,#4b8938);
background-image: linear-gradient(to bottom,#7ea367,#4b8938);
border-color: #4b8938;
color: rgba(255,255,255,0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.wp-core-ui .button-primary.active,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:active {
background: #9e4059;
background-image: -webkit-gradient(linear,left, top,left bottom,from(#ba7582),to(#9e4059));
background-image: -webkit-linear-gradient(top,#ba7582,#9e4059);
background-image: -moz-linear-gradient(top,#ba7582,#9e4059);
background-image: -ms-linear-gradient(top,#ba7582,#9e4059);
background-image: -o-linear-gradient(top,#ba7582,#9e4059);
background-image: linear-gradient(to bottom,#ba7582,#9e4059);
border-color: #9e4059;
color: rgba(255,255,255,0.95);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

В результаті основний колір кнопок і колір облямівки – коли елемент вибраний і коли він неактивний – будуть відрізнятися від кольорів за замовчуванням. На першому скріншоті ми можемо бачити, які кольори мають дані елементи за замовчуванням:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

А це кольори, які мають активні і неактивні елементи після мого рестайлінгу:

Налаштовуємо панель адміністрування WordPress – змінюємо стиль елементів

Тепер всі зміни дизайну, які я хотіла зробити, завершені!

Підсумок

У цій серії статей я показала вам шість прийомів для зміни різних елементів панелі адміністрування WordPress.

Будемо сподіватися, це дало необхідне натхнення для того, щоб ви зробили свої власні зміни.
WordPress – воістину прекрасна система управління сайтом.

З допомогою певних налаштувань ви можете створити для ваших користувачів або клієнтів можливість більш зручно працювати з сайтом, а також задати дизайн різних елементів, який відповідає вашому бренду.

Переклад статті «Customizing the WordPress Admin – Adding Styling» був підготовлений дружною командою проекту Сайтостроение від А до Я.

RELATED ARTICLESMORE FROM AUTHOR