Як безпечно додавати кастомниє css стилі для плагінів і тим на wordpress
З вами колись таке траплялося? Ви встановили плагін, у нього були всі потрібні вам функції. Але ... він негарно виглядав. Навіть після того, як ви поміняли все настройки, він все одно не вписується в стиль вашої теми. І навіть якщо він ідеально працює, ви трохи засмутилися або почали шукати інший плагін.
Якщо траплялося, то ви напевно могли б виправити ситуацію, використавши кастомниє CSS стилі для вашого плагіна. Кастомниє CSS стилі дозволяють вам змінювати зовнішній вигляд ваших плагінів, навіть якщо розробники не передбачили таку опцію.
Кастомний CSS - більше контролю над дизайном плагінів
Кастомниє CSS стилі дозволяють вам змінювати зовнішній вигляд плагінів. Зараз стиль більшості преміум плагінів можна редагувати, але в безкоштовних плагинах часто немає цієї функції.
Візьмемо, наприклад, один з найбільш популярних плагінів Contact Form 7. Його стиль можна змінити тільки злегка. Але використовуючи кастомний CSS, ви можете повністю змінити кожен аспект його відображення на екрані.
До того ж, навіть плагіни з передбаченою можливістю зміни зовнішнього вигляду не дозволять змінити кожен елемент.
Так що, вивчивши трохи CSS і як його безпечно додати до вашої теми, ви вийдете на новий рівень відображення плагінів Новомосковсктелям.
Чому важливо додати кастомний CSS правильно
Ви не хочете абияк додати CSS стилі до плагіну. Є правильний і неправильний спосіб додати CSS на WordPress.
Коли ви додаєте CSS стилі правильно, вони завжди будуть працювати коректно, навіть якщо ви відновите вашу тему. Ви зможете просто скопіювати і вставити їх в нову тему, якщо ви коли-небудь вирішите змінити дизайн.
З іншого боку, додавши їх неправильно, ви ризикуєте втратити стилі при оновленні або зміні теми.
А зараз ми розповімо вам, як правильно додавати CSS стилі плагінів для Divi і інших тем WordPress.
Куди додавати CSS стилі в темі Divi
Для початку розглянемо процес додавання кастомних стилів CSS на прикладі теми Divi.
Для безпечного додавання CSS стилів для ваших плагінів в Divi, зайдіть у вкладку «Theme Options» в вашому меню Divi:
Потім у вкладці «General» потрібно перегорнути сторінку до кінця вниз. Там ви знайдете віконце «Custom CSS»:
Технічно, все, що вам потрібно зробити, це ввести ваш кастомний код CSS і натиснути «Save Changes». Але оскільки ми хочемо зробити так, щоб можна було легко переміщати і копіювати стиль нашого плагіна, то давайте зробимо ще один крок.
/ * Plugin CSS Styles Start Here * /
Куди додавати CSS стилі для інших тем
Переконайтеся, що ви редагуєте вірну дочірню тему. Вам потрібно зайти в style.css. Для цього просто натисніть на цей пункт.
/ * Plugin CSS Styles Start Here * /
Далі додайте ваш кастомний CSS стиль під цим рядком:
Оскільки ви працюєте з дочірньою темою, ваші стилі завжди будуть у безпеці, навіть якщо ви відновите тему.
Реальний приклад: Contact Form 7
Давайте розглянемо реальний приклад. Уявімо, що ви хочете змінити стиль форми зворотного зв'язку Contact Form 7. Ви встановите плагін і отримаєте схожу форму:
Після збереження таблиці стилів та безпека вашої форми зворотного зв'язку, ви повинні побачити це:
Тепер кордону полів введення виділені чорною рамкою.
Якщо ви використовуєте Divi, то ваш код буде таким же, тільки додається він в іншому місці:
Звичайно, це просто експеримент, оскільки вам не потрібен плагін форми зворотного зв'язку в Divi. Але цей метод спрацює з будь-яким плагіном!
Додавання користувача CSS стилів в WordPress є досить простим процесом. Найважче дізнатися, який CSS код потрібно додати або змінити. Ви не станете експертом в CSS за одну ніч, але є простий трюк.
Щоб підглянути, які стилі вам потрібно змінити для того чи іншого елемента на вашому сайті, відкрийте Developer Tools в Chrome (натисніть F12) і наведіть мишкою на що цікавить вас об'єкт. Ви відразу ж побачите, які стилі використовує цей елемент.
// або додати скрипт в 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 #');
Зберегти файл на сервер, потім додати в папку 2 файли run-script.js для свого js файлу і style.css для своїх параметрів стилів, туди можна прописувати параметри через! Important; a img.adaptive-image
