Одностраничный сайт, это когда весь контент живёт на одной странице, а меню не ведёт на другие 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 берёт на себя всю вёрстку.