Інструкція зі створення сайту на WordPress

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

Підходить WordPress для невеликих проектів: інтернет-магазину до 2000 товарів, сайту-візитку для бізнесу, школи або компанії, онлайн-журналу або корпоративного блогу, портфоліо або лендінгу для курсу/заходу.

У цьому посібнику розповімо, як зробити сайт на WordPress з нуля — докладно та по кроках. Всередині ви знайдете посилання на додаткові статті, які допоможуть детальніше вивчити ті чи інші аспекти.

План

1. Купити домен та хостинг
2. Встановити WordPress
3. Увійти до панелі керування WordPress
4. Змінити налаштування WordPress
5. Обрати тему
6. Встановити плагіни
7. Створити сторінки
8. Створити блог
9. Створити товари
10. Створити шапку та підвал
11. Додаткові матеріали

Встановити WordPress

Робиться це в панелі керування хостингом. Ми покажемо процесс на прикладі cPanel — популярної панелі, яку використовуємо у себе на хостінгу ми та багато інших провайдерів.

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

Як встановити WordPress на локальний сервер

Якщо купляли хостінг у нас, відкрийте головну сторінку нашого сайту та натисніть у верхньому правому куті кнопку «Панель клієнта». На наступній сторінці знайдіть у списку продуктів хостинг та натисніть кнопку «Контрольна панель».

У новій вкладці відкриється cPanel. На її головній сторінці будуть програми для роботи з хостингом, які для зручності розбиті на кілька блоків. Знайдіть у самому низу блок «Softaculous Apps Installer» і клацніть по логотипу WordPress.

На наступній сторінці натисніть синю кнопку «Установка».

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

Встановлення WordPress на хостинг

У блоку «Настройки сайта» вкажіть назву та опис сайту — це текст, який відображатиметься у вкладці браузера, якщо навести на неї курсор миші. Також цей текст потім можна буде додати до шапки та підвалу сайту.

У блоку «Аккаунт администратора» вкажіть ім’я користувача, пароль та пошту для важливих повідомлень. За замовчуванням в опції «Email адміністратора» буде вказана пошта на основі вашого домену. Зі старту вона не працюватиме, її треба створювати окремо. То ж або поміняйте пошту на звичайну або створіть адресу на своєму домені за допомогою інструкції:

Як створити пошту на своєму домені в cPanel

У блоку «Выберите язык» йдеться про мову, якою буде відображатися консоль WordPress.

Інші налаштування не настільки важливі, їх можна пропустити. Прокрутіть сторінку вниз та натисніть кнопку «Установка». Під нею ви також можете вказати пошту, на яку Softaculous надішле звіт про встановлення.

Процес встановлення займе близько хвилини. Наприкінці з’явиться така сторінка:

Увійти до консолі WordPress

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

Щоб потрапити в консоль, введіть у вашому браузері ваш домен і допишіть після нього /wp-admin. Повинно вийти так: https://vashdomen.com/wp-admin.

Щоб не вводити цю адресу знову, не закривайте вкладку з консоллю, а краще закріпіть її в браузері або додайте в закладки.

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

Як відновити пароль від WordPress

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

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

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

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

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

Налаштувати WordPress

Деякі стандартні налаштування WordPress — на зразок часового поясу, формату часу та дат, зовнішнього вигляду посилань — не підходять для України. Їх варто змінити одразу після встановлення.

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

Налаштування WordPress після встановлення на хостинг

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

Після цього не забудьте внизу натиснути кнопку «Зберегти зміни».

Також варто змінити структуру посилань. Для цього перейдіть в розділі «Налаштування» в підрозділ «Постійні посилання». У ньому нас цікавить перша ж опція — «Загальні налаштування». Вона відповідає за те, яка інформація буде присутня в URL сторінках та записах.

За замовчуванням буде обрано параметр «День і назва». Це означає, що в URL буде присутня дата публікації, через що вона буде довша і менш читальна. Рекомендуємо вибрати варіант «Назва запису».

Після цього не забудьте внизу натиснути кнопку «Зберегти зміни».

Базові налаштування змінили, тепер опишемо етапи створення сайту WordPress.

Обрати тему

Тема — це шаблон із готовим дизайном сайту та функціоналом, який дає можливість змінювати дизайн. Переглянути встановлені теми та додати нові можна у розділі «Вигляд — Теми».

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

Дизайн активної теми змінюють у розділі «Вигляд – Налаштувати». У різних темах у цьому розділі будуть різні опції. Через це сайт, який вдалося зробити на одній темі, може не вийти зробити на інший.

Наприклад, в одній темі може бути можливість закріпити шапку сайту і зробити її прозорою, а в іншій ні. Або в одній темі у розділі з параметрами шапки буде лише кілька простих опцій на кшталт логотипу та розташування меню, а в іншій — цілий конструктор із можливістю створювати шапку з кількох рівнів. І так із будь-яким іншим функціоналом.

Щоб додати нову тему, натисніть велику кнопку з плюсом під встановленими темами у розділі «Вигляд – Теми» або кнопку «Додати» у верхній частині сторінки під її заголовком.

Відкриється бібліотека із тисячами безкоштовних тем. Якщо натиснути біля одного з них кнопку «Встановити», вона збережеться у розділі «Вигляд – Теми». Щоб увімкнути її для сайту, потрібно натиснути «Активувати».

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

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

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

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

Огляд теми Astra

Встановити плагіни

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

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

За замовчуванням після встановлення WordPress тут вже буде два плагіни. Вони не дуже корисні, тому їх сміливо можна позбутися, щоб не займали місце. Для цього біля кожного є кнопка «Видалити».

Інший варіант — поставити біля кожного плагіна галочку, потім обрати в меню «Групові дії» над таблицею варіант «Видалити» і натиснути поруч «Застосувати».

Щоб додати новий плагін, натисніть кнопку «Додати новий» угорі біля заголовка розділу або перейдіть у боковому меню до розділу «Плагіни – Додати новий».

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

Як і у випадку з темами, якщо натиснути біля якогось плагіна «Встановити», він збережеться у розділі «Плагіни – Встановлені». Потім так само потрібно натиснути «Активувати», щоб плагін почав працювати.

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

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

Спочатку вам може здатися, що в WordPress не вистачає багатьох функцій, але це не так — якщо функціонал дійсно популярний, з ймовірністю 99% для нього вже є плагін. Головне вміти його знайти.

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

Добірка корисних плагінів для WordPress

Створити сторінки

Перейдіть у консолі WordPress до розділу «Сторінки». Після встановлення WordPress тут вже буде дві сторінки: демонстраційна сторінка з назвою Sample Page і сторінка політики конфіденційності з назвою Privacy Policy.

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

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

Редактор блоків Gutenberg

Одразу після створення нової сторінки відкриється стандартний візуальний редактор WordPress — Gutenberg. Ліворуч у ньому буде зона для роботи з вмістом за допомогою заготовлених заздалегідь блоків, а праворуч — властивості сторінки або вибраного блоку.

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

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

Як користуватись редактором блоків Gutenberg

Конструктор сторінок Elementor

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

Найпопулярніший конструктор для WordPress має назву «Elementor». У ньому дуже багато тонких налаштувань, за відчуттями навіть більше, ніж у Gutenberg. Хоча зробити гарний сайт на WordPress можна і там і там.

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

Як користуватись конструктором сторінок Elementor

Одна з особливостей Elementor — готові блоки та цілі сторінки, які можна імпортувати собі на сайт, а потім передати вміст під свої потреби. Це робить створення сайту на WordPress з нуля набагато простішим, тому що можна не вигадувати дизайн самостійно, а користуватися готовими варіантами.

Властивості сторінки

Знаходяться на бічній панелі редактора Gutenberg на вкладці «Сторінка». У них можна змінити URL-адресу сторінки, вказати титульне зображення сторінки, увімкнути для неї коментарі. Докладно про кожну опцію читайте у нашому посібнику по роботі з Gutenberg:

Стандартні властивості сторінки у редакторі Gutenberg

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

Подібні унікальні властивості має і тема Astra, яку ми рекомендували використовувати вище. Читайте про них у посібнику по роботі з темою:

Додаткові властивості сторінки у темі Astra

Налаштування головної сторінки

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

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

Так само можна створити окрему домашню сторінку для блогу та вказати її у рядку «Сторінка записів».

Створити блог

Перейдіть до консолі в розділі «Записи». Після встановлення WordPress тут вже буде один демонстраційний запис під назвою «Hello World!».

Як і розділ зі сторінками, якщо навести курсор на запис, з’являться опції: редагувати, змінити властивості, видалити та перейти/переглянути. І так само запис при видаленні спочатку потрапить у кошик, звідки його ще можна буде відновити. А після видалення з кошика відновити запис можна буде лише з резервної копії сайту, якщо вона є.

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

Редактор блоків Gutenberg

Одразу після створення нового запису, як і у випадку зі сторінками, відкриється редактор Gutenberg. І так само: ліворуч у ньому буде зона для роботи з вмістом, праворуч — властивості сторінки або обраного блоку. Докладніше про роботу в цьому редакторі читайте у нашому посібнику:

Як користуватись редактором блоків Gutenberg

Конструктор сторінок Elementor

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

Інструкція по роботі з конструктором сторінок Elementor

Властивості запису

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

Дізнатися докладніше про основні властивості запису ви можете у нашому посібнику по роботі з редактором Gutenberg:

Стандартні властивості запису в редакторі WordPress

Якщо використовуєте тему Astra, для записів будуть доступні такі ж додаткові властивості, які доступні для сторінок. Читайте про них у посібнику з роботи з цією темою:

Додаткові властивості теми Astra

Категорії та позначки

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

Допустимо, ви торгуєте музичним обладнанням і вирішили вести про нього блог. Категорії можна створити для різних форматів матеріалів: огляди, поради, налаштування, ремонт та обслуговування. А позначки — для назв виробників.

Створюються категорії та позначки однаково, але у різних підрозділах. Перейдіть у відповідний підрозділ у розділі «Записи», придумайте назву категорії або позначки, потім впишіть URL латинськими літерами, потім, якщо потрібно, складіть опис та натисніть внизу кнопку «Додати».

Після створення категорії або позначки, їх потрібно присвоїти тій чи іншій статті. Для цього в розділі «Записи – Всі записи» наведіть курсор на потрібну статтю та виберіть «Властивості», після чого ви побачите поля з категоріями та позначками.

Щоб привласнити категорію одразу декільком статтям, поставте галочки біля них у розділі «Записи – Всі записи», виберіть у списку «Групові дії» у верхній частині таблиці варіант «Змінити», потім оберіть потрібну категорію.

Створити товари

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

Є багато плагінів, які додають на сайт функціонал створення товарів, але найпопулярніший з них — WooCommerce. Це офіційний плагін від розробників WordPress. Його використовують більшість магазинів.

Після встановлення WooCommerce у консолі WordPress з’явиться розділ «Товари». У ньому буде багато функцій, а у самих товарів багато різних параметрів. Подібно до рубрик і міток можна буде створювати атрибути та категорії. Для товарів можна буде створювати варіації: кольори чи розміри.

Робота з товарами — об’ємна і складна тема, двома словами про неї не розповіси, тому ось окрема стаття, яка допоможе у всьому розібратися:

Інструкція по роботі з WooCommerce

Створити шапку та підвал

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

Редактор Gutenberg

У редакторі Gutenberg шапки з підвалом налаштовуються в розділі «Вигляд – Налаштувати». Функціонал і навіть назва розділу, який відповідає за налаштування, відрізнятимуться залежно від теми, яку ви встановили.

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

Докладніше про конструктора шапки та підвалу в темі Astra читайте у нашому посібнику з налаштування теми:

Як створити шапку та підвал у темі Astra

Конструктор Elementor

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

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

Щоб вам було простіше розібратися, ось посилання на інструкцію зі створення шапки у посібнику по роботі з Elementor:

Як створити шапку та підвал у конструкторі Elementor

Навігаційне меню

У якому редакторі ви не робили б сайт, створювати меню потрібно окремо в розділі «Вигляд – Меню». Потім ви просто вказуєте його при створенні шапки або підвалу і сторінки, що відібрані для нього, починають відображатися.

У розділі «Вигляд – Меню» спочатку потрібно створити меню, а потім додати до нього сторінки. Щоб створити нове меню, введіть назву в єдине порожнє поле на сторінці, а потім натисніть «Створити меню» внизу.

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

Якщо якась сторінка не відображається, переконайтеся, що знаходитеся на вкладці «Все». За замовчуванням буде відкрито вкладку «Останні».

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

Наприклад, у стандартній темі WordPress за 2021 рік зони лише дві: для шапки та для підвалу. А в темі Astra таких зон п’ять — крім шапки та підвалу можна створити окреме меню для сайдбару та користувачів, які авторизувалися на сайті.

Подивитися кількість областей для меню можна на вкладці «Управління областями» у розділі «Вигляд – Меню». Там же можна призначити меню для кожної з областей.

На цьому все. Ми розглянули основні функції WordPress і розповіли, як зробити сайт на цьому движку своїми руками. Тепер поділимося посиланнями на додаткові матеріали, які допоможуть покращити роботу сайту.

Додаткові матеріали для навчання

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

• 75 безкоштовних тем для WordPress
• Як налаштувати оплату на сайті
• 10 плагінів для налаштування SEO

Вікі. Тут є посібники по роботі з кожним розділом панелі керування хостингом та відповіді на загальні питання. Ось декілька статей для прикладу:

• Як зробити резервну копію сайту на WordPress
• Як прискорити сайт на WordPress
• Як підключити та налаштувати Cloudflare

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