У цьому практичному посібнику ми вивчимо швидке налаштування CSS для зміни зовнішнього вигляду власних тем оформлення WordPress. Пост стане в нагоді навіть тим, хто не має навичок у виправленні таблиці стилів, і хто при цьому хоче отримати відмінний дизайн для свого веб-ресурсу.
Дивіться також:
Перед початком робіт знадобиться...
- тема з опціями для налаштування CSS або плагін для налаштування таблиці стилів
- доступ до редагування таблиці стилів style.css
- дочірня тема
Якщо ви самі не знаєте, що це таке і як його знайти, в цьому пості ми детально розберемо, як знайти і налаштувати всі необхідні нам компоненти для подальшої кастомізації. Якщо ваш сайт вже запущений і працює, непогано було б перевести його в режим тимчасових технічних робіт і поставити заглушку для користувачів, поки ми все з вами не налаштуємо як треба.
Альтернативним рішенням може стати запуск віртуальної копії сайту на локальному сервері з подальшими роботами та правками на цій машині, а вже після налаштування готову копію ви можете завантажити на свій основний сервер. Який із варіантів краще вибрати – вирішувати вам.
Виправлення стилів усередині налаштувань теми
Деякі теми мають опції для CSS, які можна активувати в режимі адміністрування сайту через панель адміністратора. Для цього треба перейти у підменю Зовнішній вигляд → Налаштувати.
Іноді такі параметри внесені окремим пунктом меню, інколи ж як заголовок "Edit CSSу спеціальному розділі.
Плагін для налаштування CSS
Якщо у вашої теми немає такого розділу з налаштуваннями, використовуйте плагін під назвою Jetpack. У нього є вбудований редактор таблиці стилів. Прийде або підключити цей плагін до існуючого облікового запису на WordPress.com, або створити новий облік, щоб скористатися цим інструментом.
Плагін зберігає різні версії правок, дозволяє "відкотитися" до попередньої версії та зберігати будь-які зміни.
Після встановлення та активації плагіна редагувати зовнішній вигляд можна у розділі Зовнішній вигляд → Edit CSS.
Створюємо дочірню тему
Якщо ви плануєте масштабні зміни у зовнішньому вигляді свого блогу, найкращим варіантом буде створення дочірньої теми. Так будь-які кастомізації можуть бути зроблені безболісно, і при цьому не доведеться руйнувати весь блог заради невеликої зміни в дизайні.
Також за допомогою дочірньої теми легше та зручніше відстежувати будь-які виправлення та коректність роботи створеного нового дизайну.
Можна також створити папку для дочірньої теми та назвати її ім'ям основної теми з приставкою дочірньої теми, помістити туди файл style.css та імпортувати код основної таблиці стилів:
@import url("../THEMENAME/style.css");Для робіт із новою дочірньою темою почитайте практичне керівництво. Після налаштування всіх параметрів перейдемо до редагування коду.
1. Змінюємо колір тла
Для зміни фонового зображення на вашому сайті спочатку вивчіть загальний стиль та параметри фону. Чи застосовується тут суцільний фоновий колір або картинка, вбудована у кадр?
Не всі теми налаштовуються інтуїтивно, тому перед початком редагування обраної теми ретельно вивчіть структуру пов'язаних файлів та стилів у вашій темі.
Для без оформлення в повну ширину в тіло сторінок вбудовується простий колір фону:
body {
background-color: #477C67;
}Для визначення потрібного кольору використовуйте інструмент під назвою W3Schools HTML color picker або встановіть розширення для Chrome або Firefox.
Для свого прикладу я вибрав колір тла #477C67:
Якщо цей сніпет не змінює фоновий колір, то швидше за все у вас використовується набір порожніх контейнерів для заповнення фону.
Якщо ви бажаєте налаштувати фонове зображення для блогу, завантажте спочатку потрібну вам картинку. Переконайтеся, що роздільна здатність зображення та параметри блогу збігаються. Шлях до фонового зображення може бути таким: "wp-content/uploads/2014/01/IMAGE.jpg"
body {
background: url(location/img.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}У результаті має вийти ось що:
Картинка залишається статичною навіть при прокручуванні.
2. Поліпшуємо читання тексту
Іноді вам трапляється чудова тема, але з нею є невелика проблема. Шрифт у неї надто маленький. Але ми зараз це виправимо.
body {
font-size: 16px;
color:#000
}Використовуйте цей код у файлі style.css та проблеми зі шрифтом вирішаться.
Відповідний розмір шрифту для вашого блогу – 14-16 пікселів. Уникайте 12 пікселів для шрифту. Великий шрифт зробить ваш контент більш читаним та професійним. Поправити в коді треба ось що:
body {
font-family: Arial, Helvetica, sans-serif;
}У результаті отримуємо такий код:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000
}3. Змінюємо зовнішній вигляд посилань
Зміна кольору посилань – наступний крок, і налаштувати це можна за допомогою таких параметрів:
a {
color: #BA2323;
}Беремо наприклад колір № BA2323 і ось що отримуємо:
Ось ще кілька налаштувань для стилістичного оформлення посилань. Наприклад, можна вибрати колірне підсвічування посилань при наведенні курсору. Зазвичай використовується підкреслення, але можливі варіанти з кольоровим підсвічуванням:
a:hover {
color: #222;
background-color:#BA2323;
}Ось як можна перетворити підсвічування тексту та виділити відвідані посилання для сайту:
a:visited {
color: #004A4A;
}4. Змінюємо зовнішній вигляд заголовків
Заголовок типово ставиться h1, а підзаголовки - h2. Якщо вам потрібно поставити колір і параметр для заголовка, можна внести кілька правок для конкретного посту. Для цього налаштування треба вказати додатково параметр, і ось як.
Знаходимо стиль, що відповідає нашому заголовку.some-style". Редагувати треба наступну частину коду:
.entry-title {
color: #WANTEDCOLOR;
font-size: WANTEDSIZEpx;
}
.entry-title a {
color: #WANTEDCOLOR;
}Змінюємо на блакитний #5CBDBD:
Для редагування стилів треба правити параметр замість some-style на h1{} або h2{} або h3{}.
5. Змінюємо колірну схему віджетів
Один із найпростіших способів редагувати віджет – доповнення квітами. Правити треба секцію, що починається з widget-title. Тут можна встановити колір віджету в дочірній темі:
.widget {
background: #COLOR;
}
.widget-title {
background-color: #COLOR;
}
Висновок
На перший погляд, може здатися, що для редагування сайтів доведеться вивчити код CSS. Але цей пост показує, що достатньо використовувати базову функціональність — і можна досягти дуже багато чого.
Джерело:code.tutsplus.com
Коментарі до запису: 0