З вами колись траплялося таке? Ви встановили плагін, у нього були всі необхідні функції. Але… він негарно виглядав. Навіть після того, як ви змінили всі налаштування, він все одно не вписується у стиль вашої теми. І навіть якщо він ідеально працює, ви трохи засмутилися або почали шукати іншу плагін.
Якщо траплялося, то ви, напевно, могли б виправити ситуацію, використовуючи кастомні CSS стилі для вашого плагіна. Кастомні CSS стилі дозволяють змінювати зовнішній вигляд ваших плагінів, навіть якщо розробники не передбачили таку опцію.
Дивіться також:
- Як створити дочірню тему WordPress — Правильний спосіб
- Редагуємо CSS-стилі вашої теми WordPress на льоту за допомогою плагіну CSS Hero
- Як додати JavaScript і CSS у WordPress тему або плагін
- Завантажуємо свої стилі оформлення CSS на WordPress правильно
- 5 правок у CSS, які допоможуть новачкові покращити зовнішній вигляд свого блогу
Ця стаття покаже вам, як правильно додавати такі стилі, щоб вони завжди були в безпеці, навіть якщо ви змінюєте або оновлюєте тему.
Кастомний CSS - більше контролю над дизайном плагінів
Кастомні CSS стилі дозволяють змінювати зовнішній вигляд плагінів. Зараз стиль більшості преміум плагінів можна редагувати, але у безкоштовних плагінах найчастіше немає цієї функції.
Візьмемо, наприклад, один із найпопулярніших плагінів Contact Form 7. Його стиль можна змінити лише трохи. Але використовуючи кастомний CSS, можна повністю змінити кожен аспект його відображення на екрані.
До того ж навіть плагіни з передбаченою можливістю зміни зовнішнього вигляду не дозволять змінити кожен елемент.
Так що, вивчивши трохи CSS і як його безпечно додати до вашої теми, ви вийдете на новий рівень відображення плагінів читачам.
Чому важливо додати кастомний CSS правильно
Ви не хочете абияк додати CSS стилі до плагіна. Є правильний та неправильний спосіб додати CSS на WordPress.
Коли ви додаєте CSS стилі правильно, вони завжди працюватимуть коректно, навіть якщо ви оновите вашу тему. Ви зможете просто скопіювати та вставити їх у нову тему, якщо ви коли-небудь вирішите змінити дизайн.
З іншого боку, додавши їх неправильно, ви ризикуєте втратити стилі під час оновлення або зміни теми.
А зараз ми розповімо вам, як правильно додавати CSS стилі плагінів для Divi та інших тем WordPress.
Куди додавати CSS стилі у темі Divi
Спочатку розглянемо процес додавання кастомних стилів CSS з прикладу теми Divi.
Для безпечного додавання CSS стилів для ваших плагінів у Divi, зайдіть у вкладку «Тема параметри» у вашому меню Divi:
Потім у вкладці «Загальне» потрібно перегорнути сторінку до кінця вниз. Там ви знайдете віконце «призначені для користувача CSS'
Технічно все, що вам потрібно зробити, це ввести ваш кастомний код CSS і натиснути «зберегти зміни». Але оскільки ми хочемо зробити так, щоб можна було легко переміщувати та копіювати стиль нашого плагіна, то давайте зробимо ще один крок.
Ви, напевно, вже додали кастомні Divi CSS сніпети, вони допомагають налаштувати кастомний CSS у цьому вікні. Для цього ви можете додати коментар типу "Плагін CSS стилів починається тут". Тоді додайте ваш CSS код під цим рядком.
Щоб додати такий коментар, потрібно скопіювати та вставити цей код:
/ * Plugin Стилі CSS Початок тут * /
Коментар ні на що не вплине, але допоможе організувати різні кастомні стилі CSS. Divi допоможе зберегти ваші користувацькі CSS стилі в безпеці під час оновлень так, що вам не потрібно боятися втратити їх.
Куди додавати CSS стилі для інших тем
Якщо ви використовуєте іншу тему, то ви напевно захочете додати свої CSS стилі до таблиці стилів вашої дочірньої теми. Якщо ви не використовуєте дочірню тему, або не знаєте що це, ми радимо створити її і почати використовувати.
Припустимо, що ви встановили дочірню тему, ви можете міняти її в консолі WordPress, зайшовши в Зовнішній вигляд → Редактор:
Переконайтеся, що ви редагуєте дочірню тему. Вам потрібно зайти в style.css. Для цього просто натисніть цей пункт.
Потім вам потрібно просто додати ваш кастомний CSS так само, як ми це зробили у Divi. Для початку, додайте коментар:
/ * Plugin Стилі CSS Початок тут * /
Далі додайте свій кастомний CSS стиль під цим рядком:
Оскільки ви працюєте з дочірньою темою, ваші стилі завжди будуть у безпеці, навіть якщо ви оновите тему.
Реальний приклад: Contact Form 7
Розгляньмо реальний приклад. Уявимо, що ви хочете змінити стиль форми зворотного зв'язку Contact Form 7. Ви встановите плагін та отримаєте схожу форму:
Тепер ви хочете пожвавити її трішки, додавши чорні межі в полях форми. Ви можете зайти в таблицю стилів вашої дочірньої теми та додати цей код під коментарем, який ви зробили:
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { border: 1px solid #000000; }
У редакторі ваш CSS має виглядати так:
Після збереження таблиці стилів і оновлення форми зворотного зв'язку, ви повинні побачити це:
Тепер межі полів введення виділено чорною рамкою.
Якщо ви використовуєте Divi, то ваш код буде таким самим, тільки додається він в іншому місці:
Звичайно, це просто експеримент, оскільки вам не потрібен плагін форми зворотного зв'язку в Divi. Але цей метод спрацює з будь-яким плагіном!
Підсумки
Додавання власних CSS стилів у WordPress є досить простим процесом. Найважче дізнатися, який CSS код потрібно додати або змінити. Ви не станете експертом у CSS за одну ніч, але є простий трюк.
Щоб побачити, які стилі вам потрібно змінити для того чи іншого елемента на вашому сайті, відкрийте Інструменти для розробників в Chrome (натисніть F12) і наведіть мишкою на об'єкт, що вас цікавить. Ви відразу побачите, які стилі використовує цей елемент.
Просто пам'ятайте – завжди зберігайте кастомний CSS в окремій області, відокремленій коментарем. Тож ви завжди зможете його швидко знайти.
А у вас є поради щодо кастомних CSS стилів? Розкажіть нам у коментарях!
Коментарі до запису: 4
найкраще свій плагін написати і туди складати css і js інші плагіни js які треба для сайту так при оновленні теми та інших плагінів не буде перетирання і можна бути впевненим, що менше ймовірність втратити якісь налаштування для сайту.
Плагін простий в папку /wp-content/plugins/ створити папку з назвою яким-небудь плагіна будь-яке це не так важливо головна унікальна назва плагіна щоб не перетерти його іншими сторонніми, всередині папки яку створите створити файл index.php туди вставити цей текст що нижче:
Зберегти файл на сервер, потім додати до папки 2 файлу run-script.js для свого js файлу та style.css для своїх параметрів стилів, туди можна прописувати параметри через !important; a img.adaptive-image{ width: 100% !impotant; height: auto !important; } це вже щоб вже точно перекрити попередні параметри або починати це від кореня, наприклад body a img.adaptive-image{ width: 100%; height: auto; } або на крайній випадок html body a img.adaptive-image{ … тоді більша ймовірність того, що параметри інших в інших css файлах і на самій сторінці перепризначаються на ваші. Так можна складати в папку окремі js плагіни та css пачками та розподіляти по папках.
/*
Plugin Name: Додаткові css та js для сайту
Plugin URI: #
Description: Там деякі необхідні функції для сайту.
Версія: 1.0
Author: Розробник сайту
Author URI: #
*/
function WP_myScripts_init(){
//додати скрипт у head
//wp_enqueue_script( 'magnific-popup', plugins_url('/js_plugins/magnific_popup/jquery.magnific-popup.min.js', __FILE__), array( 'jquery' ), '1.0', true );
//або додати скрипт до footer
wp_register_script( 'WP_Scripts_run-script', plugins_url('run_script.js', __FILE__), array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'WP_Scripts_run-script');
wp_enqueue_style( 'WP_Scripts_Style_css', plugins_url('/style.css', __FILE__) );
}
add_action( 'wp_enqueue_scripts', 'WP_myScripts_init');
Доброго дня!
При оновленні теми все, що написано після коментаря — злетить же?
Зміни в CSS краще писати в style.css дочірньої теми, а не основний?
І ще питання, куди зберігаються зміни, які ми вносимо через адмінку Зовнішнього вигляду як додаткові стилі css?
Добрий день.
Якщо виправляти стилі у файлах основної теми, після оновлення цієї теми всі зміни пропадуть. З іншого боку, якщо ви внесете CSS зміни лише в дочірню тему, то оновлюватиметься лише батьківська тема. Усі ваші зміни залишаться в дочірній темі та не втратяться. Також, при зміні стилів із редактора стилів через Зовнішній вигляд — Налаштування — Додаткові стилі можна оновлювати основну тему, це не призведе до скидання стилів.