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

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

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

Якщо вам зручніше дивитися, а не читати, ось наочний процес від встановлення до публікації:

💡 Швидкий огляд:

• Встановіть XAMPP, локальний сервер для тестування WordPress на комп’ютері
• Розгорніть WordPress на локальній машині через phpMyAdmin і редагування wp-config.php
• Виберіть тему, сумісну з односторінковою структурою (ми візьмемо SiteOrigin North)
• Встановіть два безкоштовні плагіни SiteOrigin: Page Builder і Widgets Bundle
• Зберіть сторінку з готових макетів, призначте якірні ID та прив’яжіть їх до пунктів меню

Навіщо взагалі односторінковий сайт

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

Коли це працює

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

Мобільні пристрої та швидкість

Односторінковий сайт завантажується один раз. Далі, тільки прокручування. Відвідувач може втратити інтернет посеред читання, і все одно догортає до кінця: сторінка вже в пам’яті. На мобільному екрані це сприймається як застосунок, а не як сайт. Google давно підтвердив: mobile-first індексація, стандарт з 2018 року.

Коли не варто

Сотня статей у блозі, складний інтернет-магазин, багаторівнева структура, односторінковий сайт не потягне. Прокручування стане нескінченним, а SEO постраждає: пошуковики люблять окремі URL під кожен кластер смислів.

Крок 1: Встановлення XAMPP на Windows

XAMPP — це безкоштовний кросплатформний набір: Apache (вебсервер), MariaDB (база даних), PHP і Perl. Простіше кажучи, він перетворює ваш комп’ютер на локальний хостинг, де WordPress працює без інтернету та без оплати. Ідеально для тестів і навчальних збірок.

Порядок встановлення на Windows:

• Зайдіть на сайт Apache Friends і завантажте останню версію XAMPP для вашої системи.
• Запустіть інсталятор. На екрані привітання натисніть Next.
• На етапі вибору компонентів залиште позначки на MySQL і phpMyAdmin, для WordPress цього достатньо. Решту можна зняти: за потреби додасте пізніше через панель керування.

• Виберіть папку для встановлення (за замовчуванням C:\xampp, можна залишити).
• На екрані Bitnami зніміть позначку «Learn more about Bitnami for XAMPP», WordPress поставимо вручну. Натисніть Next.
• Дочекайтеся розпакування файлів. Залиште позначку «Запустити панель керування» та натисніть Finish.

Якщо панель керування відкрилася без червоних помилок, а Apache і MySQL підсвічені зеленим, сервер працює. Відкрийте браузер і перейдіть за адресою http://localhost/. Побачили вітальну сторінку XAMPP, усе налаштовано правильно.

Якщо Apache не стартує, перевірте, чи не зайнятий порт 80 іншою програмою. Skype та IIS, часті винуватці. У налаштуваннях Apache (Config → Apache → httpd.conf) можна змінити порт з 80 на 8080.

Крок 2: Створення бази даних і встановлення WordPress

WordPress зберігає все, сторінки, налаштування, користувачів, у базі даних MySQL. Створимо її через phpMyAdmin.

• У панелі керування XAMPP натисніть кнопку Admin у рядку MySQL. Відкриється phpMyAdmin.
• Перейдіть на вкладку Бази даних у верхньому лівому меню.
• Введіть ім’я бази, наприклад wordpress, і натисніть Створити.

База готова. Тепер сам WordPress:

• Завантажте останню версію WordPress та розпакуйте архів у папку C:\xampp\htdocs\wordpress (можете назвати папку інакше — це буде частиною локальної URL-адреси).
• У папці знайдіть wp-config-sample.php, перейменуйте на wp-config.php.
• Відкрийте файл у будь-якому текстовому редакторі та знайдіть блок налаштувань MySQL:

1
define('DB_NAME', 'wordpress');
2
define('DB_USER', 'root');
3
define('DB_PASSWORD', '');
4
define('DB_HOST', 'localhost');

• Збережіть файл і закрийте редактор.
• У браузері відкрийте http://localhost/wordpress/. Виберіть мову, придумайте ім’я користувача та пароль, натисніть Встановити WordPress.

Готово. Ви увійшли в адмінку WordPress на локальній машині. Перший рубіж узято.

Крок 3: Вибір теми

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

Встановлення: Зовнішній вигляд → Теми → Додати нову → введіть SiteOrigin North → Встановити → Активувати. Тему розробила команда SiteOrigin, ті самі люди, що роблять плагін Page Builder. Конфліктів не буде.

Крок 4: Плагіни SiteOrigin, Page Builder та Widgets Bundle

Ядро нашої збірки, два безплатні плагіни з репозиторію WordPress:

• SiteOrigin Page Builder (siteorigin-panels), drag-and-drop конструктор із сіткою, макетами та вбудованою функцією односторінкового прокручування (з версії 2.3). Живі попередні перегляди, чистий вивід HTML, 500 000+ активних встановлень.
• SiteOrigin Widgets Bundle (so-widgets-bundle), набір віджетів: кнопки, зображення, слайдери, мапи, ціни та ще два десятки елементів. Усе, чим наповнюються макети.

Встановлення: Плагіни → Додати новий → по черзі знайдіть SiteOrigin Page Builder і SiteOrigin Widgets Bundle → Встановити → Активувати обидва. Саме зв'язка з двох плагінів дасть і конструктор, і наповнення для макетів. Функція прокручування за якорями вбудована в Page Builder, додаткові плагіни для односторінковості не потрібні.

Крок 5: Збирання сторінки в SiteOrigin Page Builder

Створіть нову сторінку (Сторінки → Додати нову). Над стандартним редактором з'являться вкладки, перемкніться на Page Builder.

SiteOrigin Page Builder постачається з бібліотекою готових макетів. Натисніть кнопку Layouts над редактором.

Відкриється каталог пресетів, від Fitness Gym до Agency. Виберіть потрібний (ми взяли Fitness Gym), натисніть Insert. Якщо на сторінці вже був контент, плагін запитає: вставити до, після чи замінити. Для порожньої сторінки різниці немає.

Збережіть сторінку та відкрийте її. Перемкніться в **Live **Editor, посилання на нього з'явиться у верхній адмін-панелі WordPress.

У Live Editor ви наводите курсор на будь-який елемент і одразу бачите, який віджет за нього відповідає. Можна редагувати текст, змінювати зображення та перетягувати блоки, все в реальному часі.

Крок 6: Якірні ID та навігаційне меню

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

У Live Editor наведіть курсор на перший рядок після Hero-блоку, клацніть по іконці інструмента (wrench) і виберіть Edit Row. Перейдіть на вкладку Attributes і в полі Row ID впишіть ідентифікатор, наприклад activities. Натисніть Done.

Повторіть для кожного рядка з унікальним ID: services, потім pricing, потім contact і так далі. Збережіть сторінку.

Тепер меню: Зовнішній вигляд → Меню. Створіть нове меню. Додавайте пункти через Довільні посилання: у полі URL введіть #activities, у полі назви, «Діяльність». Повторіть для кожного ID.

Важливий нюанс: решітка # обов’язкова в URL пункту меню (це HTML-формат якоря), але в Row ID всередині Page Builder решітку ставити не потрібно, конструктор сам розуміє, що це ідентифікатор.

Детальніше про створення меню у WordPress розказано в нашому посібнику з налаштування навігації.

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

⁉️🤔 Часті запитання

Чи обов’язково використовувати XAMPP, чи можна одразу на хостингу?

XAMPP потрібен для локального тестування. Якщо у вас уже є хостинг із WordPress, пропускайте кроки 1 і 2, переходьте одразу до теми та плагінів. Якірна логіка працює однаково і на локалці, і на живому сервері.

Чи можна взяти іншу тему замість SiteOrigin North?

Так, практично будь-яка сучасна тема WordPress підтримує односторінкову структуру. Головне, щоб тема не конфліктувала з SiteOrigin Page Builder. Розробники Page Builder гарантують сумісність із більшістю тем із репозиторію WordPress.

Чи працює ця зв’язка на Mac або Linux?

XAMPP кросплатформний, версії є під Windows, macOS і Linux. На Mac можна також використовувати MAMP (безкоштовна версія). Встановлення WordPress і плагінів після підняття локального сервера ідентичне на всіх ОС.

Що робити, якщо Apache не запускається?

Дві найчастіші причини: порт 80 зайнятий іншою програмою (Skype, IIS, інший вебсервер) або антивірус блокує мережеву активність. Розв’язання: змініть порт Apache на 8080 у httpd.conf або завершіть процес, що заважає, через netstat -ano | findstr :80 у командному рядку.

Чи можна додати більше секцій пізніше?

Так. У будь-який момент заходьте в Page Builder, додавайте новий рядок, задавайте йому Row ID і створюйте пункт меню з таким самим якорем. Конструктор не обмежує кількість секцій.

Що ви отримали за годину

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

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

Якщо матеріал виявився корисним, спробуйте зібрати свій перший односторінковий сайт просто сьогодні. XAMPP і WordPress завантажуються за п’ять хвилин, а конструктор SiteOrigin бере на себе всю верстку.