Як налаштувати тему WordPress за допомогою CSS

Чи знаєте ви, що ви можете експериментувати зі своїм сайтом WordPress і змінювати його зовнішній вигляд за допомогою CSS? Ви можете додати невеликі естетичні зміни, додати кольори, змінити макет або навіть повністю змінити тему WordPress.

Контроль над зовнішнім виглядом вашого веб-сайту дає вам можливість створити його так, як вам подобається.

Ви можете додати свій особистий штрих до веб-сайту свого бренду, що значно відрізнятиме його від інших людей або компаній, які використовують ту саму тему WordPress!

У цій публікації ми детальніше розглянемо, як можна налаштувати тему WordPress за допомогою CSS.

Що таке CSS?

CSS або Cascading Style Sheets — це веб-мова, яка використовується для представлення веб-сторінок. За допомогою CSS ви можете встановити макет, кольори, шрифт, фон та інші елементи, які можуть зробити наші веб-сторінки презентабельними для користувачів. Ось чому ми називаємо інтерфейс CSS мовою на стороні клієнта, оскільки вона виконується на кінці користувача. CSS використовується в поєднанні з HTML і Javascript, щоб зробити веб-сайти адаптивними. Якщо ви думаєте, що вам потрібно бути запеклим програмістом, щоб вивчити та реалізувати CSS, це не так. Ви можете легко вивчити CSS і використовувати його, щоб змінити презентацію свого сайту, навіть якщо ви раніше не знали програмування.

Що таке WordPress?

WordPress — найпопулярніший і найпростіший спосіб створити свій веб-сайт або блог. Говорячи технічно, WordPress — це система керування контентом з відкритим кодом. Він керує всіма важливими аспектами веб-сайту, такими як вміст, макет, безпека тощо. За допомогою WordPress можна створити будь-який веб-сайт. Наприклад, бізнес-сайти, веб-сайти електронної комерції, портфоліо, резюме, соціальні мережі тощо. WordPress є безкоштовним для використання та постачається з різними темами та плагінами. Можна змінити зовнішній вигляд свого сайту WordPress за допомогою CSS.

CSS і WordPress

Щоб почати редагувати свою тему WordPress, ви повинні спочатку зрозуміти кілька речей – файли шаблонів, теги шаблонів і таблицю стилів CSS. Файли шаблонів керують вашою темою WordPress. Ви можете побачити різні файли, наприклад header.php, archive.php. Це файли шаблонів, які керують вашою темою WordPress. Теги шаблонів використовуються для керування цими файлами та іншими елементами бази даних. Таблиця стилів CSS або style.css – це файл, який потрібно шукати, щоб змінити вигляд вашого веб-сайту. Ви будете редагувати код у style.css, щоб налаштувати свою тему WordPress.

Як налаштувати тему WordPress за допомогою CSS

Перш за все, ви повинні розуміти, що якщо ви хочете налаштувати свою тему WordPress за допомогою CSS, вам потрібно або додати до неї певний код, або відредагувати вже написаний код. Я рекомендую вам принаймні вивчити основи CSS, HTML, JavaScript і PHP, перш ніж почати редагувати свою тему.

Ще одна річ, на яку слід звернути увагу, це те, що якщо ви збираєтеся вносити зміни в таблицю стилів вашої теми WordPress, ці зміни буде видалено після оновлення вашої теми. Тому ви повинні дізнатися про дочірні теми та використовувати дочірню тему для внесення змін за допомогою style.css, functions.php або інших файлів шаблонів теми. Далі в цій статті я говорив про дочірні теми.

Є два способи редагувати або додати CSS до вашої теми

1 Використання інформаційної панелі

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

Створіть дочірню тему, а потім у цій дочірній темі перейдіть до «Вигляду», а потім до «Редактора теми». Коли ви використовуєте дочірню тему, з’явиться спливаюче вікно, але це не про що турбуватися. Просто натисніть «Я розумію», і ви увійдете до таблиці стилів. Якщо ви хочете внести зміни у файли шаблонів, такі як header.php, functions.php тощо, ви повинні спочатку вивчити PHP, а потім спробувати свої навички програмування. В іншому випадку просто дотримуйтесь редагування таблиці стилів.

Що таке дочірня тема в WordPress?

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

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

Однак ви повинні бути дуже обережними, використовуючи дочірні теми. Однією з причин є те, що для цього потрібні навички кодування та досвід. Якщо ви тільки починаєте працювати з CSS, HTML, JavaScript і PHP, спочатку дайте собі трохи часу, щоб стати експертом. В іншому випадку крива навчання може бути досить високою.

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

2 Використання FTP-сервера

Можливо, ви не зможете отримати прямий доступ до інформаційної панелі своєї теми. Іноді використання плагінів вимикає цю можливість. Тому вам потрібно використовувати FTP або протокол передачі файлів для віддаленого доступу до файлів вашого сайту. Почніть із завантаження будь-якої програми FTP-клієнта. Зв’яжіться зі своїм хостом і попросіть облікові дані FTP.

Коли ви введете облікові дані, вам буде дозволено доступ до style.css. Тепер внесіть зміни у файл, збережіть зміни та завантажте їх назад на сервер. Це може бути досить важким методом додавання CSS на ваш сайт, тому використовуйте його, лише якщо у вас немає доступу до панелі інструментів.

Прості способи додати CSS на ваш сайт WordPress

Є два простих способи, за допомогою яких ви можете додати CSS на свій сайт WordPress. Вони включають використання настроювача WordPress або плагіна. За допомогою цих методів буде набагато легше додати свій CSS-код. Додавання CSS за допомогою настроювача WordPress або плагіна також не зникне після оновлення теми. Однак я все одно рекомендую вам зберегти резервну копію вихідного коду веб-сайту на випадок, якщо щось трапиться ненавмисно. Тепер давайте перевіримо два простих способи додати CSS на ваш сайт WordPress.

1 Редагування через WordPress Customiser

Просто увійдіть у свій сервер WordPress. Натисніть «Вигляд», а потім натисніть «Налаштувати». Відкриється екран налаштування. На цьому екрані показано попередній перегляд вашого веб-сайту на той момент, а зліва на екрані буде кілька параметрів для налаштування таких елементів, як кольори, меню чи інші віджети.

У лівій частині екрана ви побачите опцію під назвою «Додатковий CSS». Ось де ви повинні розпорошити свою магію. Коли ви натискаєте Додатковий CSS, відкриється нова сторінка з кодом вашого веб-сайту. Тепер ви можете вносити зміни в код, і якщо ви написали його правильно (без помилок!), ви побачите зміни, відображені у попередньому перегляді.

Код CSS, який ви тут пишете, не зміниться і не зникне після оновлення вашої теми! Але якщо ви перейдете до нової теми, написаний тут код буде стерто. Тому пропонується створити резервну копію CSS перед зміною теми.

2 Використовуйте плагін

У цьому розділі я буду обговорювати чотири різні плагіни, які можна використовувати для редагування CSS для вашої теми WordPress – Advanced CSS Editor, Modular Custom CSS, SiteOrigin CSS і CSS Hero. Якщо ви не знаєте, плагіни WordPress – це невеликі частини програмного забезпечення, які можна приєднати до WordPress, щоб розширити його функціональність. Деякі плагіни доступні безкоштовно, а за деякі вам доведеться заплатити певні гроші, щоб додати їх на свій сайт WordPress. Плагіни можуть допомогти вам редагувати або додавати CSS на ваш сайт WordPress лише за кілька кліків!

Використання плагіна Advanced CSS Editor

Перший плагін, який я б порекомендував, називається Advanced CSS Editor. Цей плагін дозволяє додавати CSS для того, як ваш веб-сайт виглядає на комп’ютері, планшеті та мобільному телефоні. Таким чином ви зможете точно налаштувати свій веб-сайт для кожного пристрою. Щоб почати редагування, встановіть плагін. Перейдіть на інформаційну панель WordPress, натисніть Appearance, а потім Customiser. Ви побачите нову опцію під назвою Розширений редактор CSS. Додайте до нього потрібний настроюваний CSS і збережіть зміни.

Величезною перевагою використання цього плагіна є те, що ви можете контролювати, як ваш веб-сайт виглядає на різних пристроях. Крім того, ви все ще можете використовувати техніку, про яку я розповідав у пункті №1, щоб редагувати свою тему WordPress. Однак для деяких людей, які не звикли до кодування, внесення змін для кожного типу пристроїв може бути великою роботою. Спочатку вони повинні навчитися писати CSS для кожного типу пристроїв.

Використання модуля Modular Custom CSS

Другий плагін, який я б порекомендував, це Modular Custom CSS. Цей плагін допомагає вносити зміни в тему вашого сайту WordPress. Наприклад, якщо ви зараз використовуєте одну тему та вносите зміни в цю тему за допомогою Modular Custom CSS. Потім ви вирішуєте вибрати іншу тему для свого сайту. Отже, зміни, внесені в першу тему, не будуть видалені. Вони залишаться недоторканими в цьому плагіні. Ви також можете додати глобальний CSS за допомогою цього плагіна. Цей CSS залишиться незмінним, незважаючи на зміни теми.

Щоб використовувати цей плагін, спочатку завантажте плагін і додайте його на свій сайт WordPress. Потім клацніть Вигляд -> Настроювач -> Додатковий CSS. Єдиний недолік, який я міг знайти в цьому методі, полягає в тому, що додавання глобального CSS не завжди може бути найкращою ідеєю. Іноді глобальний CSS може не працювати з темою, і це може бути безлад.

Використання плагіна CSS SiteOrigin

Третій плагін, який я рекомендую, відомий як SiteOrigin CSS. Цей плагін надає вам елементи візуального керування, які дозволяють редагувати зовнішній вигляд вашого сайту в реальному часі. Цей плагін підходить як для початківців, так і для досвідчених користувачів CSS. Попередній перегляд у режимі реального часу та візуальні елементи керування допомагають початківцям, а досвідчені користувачі можуть швидко кодувати за допомогою функції автоматичного завершення коду цього плагіна.

Цей плагін відкриває окремий редактор CSS для WordPress. Щоб отримати доступ до цього плагіна, спершу завантажте плагін і додайте його на свій сайт WordPress. Потім клацніть Вигляд -> Спеціальний CSS. Чудовою особливістю цього плагіна є те, що ви можете редагувати будь-який елемент на своєму веб-сайті, просто клацнувши його. Ви можете змінити деякі прості елементи теми без використання CSS. Однак одним із недоліків такої функціональності може бути те, що якщо ви вносите зміни в багато різних елементів теми, може бути важко відстежити їх.

Використання плагіна CSS Hero

Це щось цікаве. Моя третя рекомендація щодо плагіна включає плагін, який допомагає редагувати CSS на вашому сайті WordPress за допомогою перетягування. Він відомий як CSS Hero. Щоб редагувати CSS за допомогою цього плагіна, вам просто потрібно навести курсор миші на елемент, який потрібно змінити, і клацнути на ньому. Потім ви можете налаштувати його як завгодно. Ось кілька дивовижних функцій цього плагіна:

• Цей плагін включає легке редагування стилів шрифтів і топографії. Плагін підтримує шрифти Google Fonts і TypeKit.
• Ви також можете скористатися інструментом вибору кольорів і поекспериментувати зі зміною кольорів і фону в реальному часі. Ви можете легко знайти останні використані кольори.
• Ви можете просто перетягнути повзунок і подивитися, як виглядають поля.
• Плагін також підтримує такі елементи сайту, як градієнт, тіні прямокутника, тіні тексту та інші сучасні властивості CSS.
• За допомогою цього плагіна ви можете зберігати знімки своїх змін. Тому не обов’язково все оформляти живим. Просто продовжуйте працювати та опублікуйте остаточну версію.
• Цей плагін не впливає на ваші файли теми. Тому вам не доведеться турбуватися про те, що оновлення зруйнують ваші зміни.

Порівняння різних способів налаштування теми WordPress за допомогою CSS

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

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

Важливо, як виглядає ваш сайт

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

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

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

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