Простое пошаговое руководство по созданию сайта визитки на CMS WordPress своими руками. Включает установку необходимых плагинов, настройку сайта, создание контента и тестирование. Подходит для начинающих пользователей.
Содержание:
- Введение
- План действий
- Плагины для сайта
- Главная страница
- Настройка сайта
- Страницы сайта
- Форма обратной связи
- Тема оформления сайта
- Тестирование сайта
- Заключение
Введение
Для самостоятельного создания простого сайта на CMS WordPress потребуется хостинг (платный или бесплатный), на котором установлен WordPress, компьютер или ноутбук, и доступ в интернет. Никакие особые знания по программированию не требуются, кроме общего представления о том, как устроена веб-страница (об этом можно прочитать в статье Устройство веб-страницы).
Мы подробно, шаг за шагом, разберём все вопросы создания сайта визитки на CMS WordPress на примере небольшой выдуманной компании, которая занимается переездами, предоставляя услуги грузчиков и грузовой транспорт. Компания называется Перевозчик, и она работает в условном Городе. Состав страниц и их контент собраны в текстовом документе. Текст документа уже отформатирован при помощи подзаголовков и списков. Это форматирование мы будем использовать для создания веб-страниц сайта.
План действий
Общий порядок создания простого сайта визитки на CMS WordPress:
- Устанавливаем на CMS WordPress необходимые плагины.
- Создаём Главную страницу.
- Настраиваем сайт.
- Создаём веб-страницы и наполняем их контентом.
- Выбираем и настраиваем тему оформления сайта.
- Тестируем сайт.
Плагины для сайта
Плагины устанавливаются через консоль административного интерфейса: Консоль → Плагины → Добавить плагин.
Чтобы найти нужный плагин, необходимо ввести в поиск его название.
Найденный плагин нужно установить и активировать. В некоторых случаях может потребоваться настройка плагина.
Все плагины, которые далее будут установлены, являются бесплатными или условно бесплатными. Условно бесплатные плагины имеют бесплатный и платный функционал. Во всех случаях нам будет достаточно бесплатного функционала.
При установке обращайте внимание на совместимость плагинов с вашей версией CMS WordPress.
Плагин Rank Math SEO
Автор: Rank Math SEO
Мощный SEO плагин. Добавляет description к каждой странице, создает карту сайта и многое другое.
Плагин Relevanssi
Автор: Mikko Saari
Плагин для создания умного поиска на сайте.
После установки и активации плагина необходимо создать индекс. Это делается так: переходим в настройки плагина: Консоль → Настройки → Relevanssi → Индексация → Создать индекс. После создания индекса нажимаем на кнопку Сохранить настройки, расположенную внизу вкладки. Теперь все создаваемые страницы станут доступны для этого плагина.
Плагин Spectra
Автор: Brainstorm Force
Плагин расширяет редактор страниц новыми эффективными блоками.
Плагин WP Armour – Honeypot Anti Spam
Автор: Dnesscarkey
Описание: Плагин для защиты от спама (медовая ловушка).
Плагин WPForms Lite
Автор: WPForms
Плагин для создания форм обратной связи.
Главная страница
Страницы добавляются через консоль административного интерфейса: Консоль → Страницы → Добавить страницу.
Процесс добавления страниц описан в справочном руководстве.
Создадим Главную страницу. Отклоним выбор паттернов (ими мы займемся позже), и создадим просто пустую страницу.
Вставляем название страницы и её содержимое из текстового файла вместе со всем форматированием.
Задаем имя (ярлык) страницы и нажимаем на кнопку Опубликовать.
Настройка сайта
Переходим к общим настройкам сайта: Консоль → Настройки → Общие.
Задаем название и краткое описание сайта. Так же тут можно задать favicon сайта.
Внизу вкладки нажимаем на кнопку Сохранить изменения.
Далее переходим: Консоль → Настройки → Чтение.
Тут задаем что показывать на главной странице сайта. Страницу, где публикуются записи блога, оставляем без определения, потому что на нашем сайте не будет блога.
Внизу вкладки нажимаем на кнопку Сохранить изменения.
Далее переходим: Консоль → Настройки → Постоянные ссылки.
В качестве URL страниц задаем использовать их названия (это важно для SEO).
Внизу вкладки нажимаем на кнопку Сохранить изменения.
Страницы сайта
Добавляем все остальные страницы сайта: Услуги, Контакты, Советы по переезду и упаковке.
Описание работы редактора страниц можно найти здесь.
При желании, вставляем на страницы сайта картинки. Блоки плагина Spectra позволяют делать замечательные фото-галереи и лайтбоксы, например: блок Image Gallery вместо стандартной галереи. Посмотрите готовые галереи на странице нашего сайта: https://angartop.ru/услуги/.
Форма обратной связи
Для страницы Контакты нам потребуется форма обратной связи, которую можно создать в настройках плагина WPForms Lite. Переходим к ним: Консоль → WPForms → Добавить.
Задаем название формы (Оставить заявку) и в качестве основы выбираем простую контактную форму.
Далее добавляем ей необходимые поля и задаем для них описание. Встроенная в плагин справка позволит быстро разобраться, как это делать.
По умолчанию форма присылает данные на e-mail администратора сайта. Это можно изменить в разделе уведомлений.
Сохраняем изменения. Для вставки этой формы на страницу Контакты потребуется шорт-код (короткий код).
В начале на страницу вставляется блок Вставка шорткода, в который вставляется полученный шорт-код. После этого на странице будет показываться созданная форма.
Плагин позволяет несколько форм. Используя шорт-коды, ими можно пользоваться на всех страницах сайта.
К каждой форме автоматически прикрепляется плагин WP Armour – Honeypot Anti Spam. Этот плагин создаёт в формах дополнительное обязательное поле, которое видно ботам, а человеку не видно. Поэтому реальные пользователи это поле не заполняют, а спам-боты заполняют. Таким образом плагин выявляет спам и не пропускает его.
Тема оформления сайта
Тем для CMS WordPress существует великое множество, среди которых есть и платные, и бесплатные, и условно бесплатные. Чтобы найти и установить новую тему, нужно перейти: Консоль → Внешний вид → Темы → Добавить новую тему.
Вместе с CMS WordPress предустановлены несколько тем: Twenty Twenty-Five (2025), Twenty Twenty-Four (2024), Twenty Twenty-Three (2023), Twenty Twenty-Two (2022). В WordPress каждый год появляется новая тема, которая отражает все развитие WordPress за год.
Мы не будем искать новые темы, а воспользуемся темой Twenty Twenty-Four и настроим её так, как нам нужно.
Эта тема состоит из шаблонов и паттернов, и настраивается блоками по принципу конструктора веб-страниц. Блочные темы позволяют более гибко и проще настроить сайт.
Подробная информация о настройке шаблонов и паттернов тем содержится в справочном руководстве.
Вставим по центру заголовка логотип, под которым разместим название компании и описание, строку меню и форму для поиска на сайте. В строке меню изменим порядок пунктов.
Далее удалим всё из подвала, за исключением ссылки на CMS WordPress и на нас — создателей сайта. Текст в подвале выровняем по центру.
Увеличим ширину колонки до 900px для всех страниц сайта.
Изменим шаблон страницы вывода результатов поиска: зададим вывод в одну колонку сетки.
Тестирование сайта
Итак, наш сайт готов. Но перед тем как публиковать ссылки на него и заниматься SEO-продвижением, необходимо проверить работу сайта, провести самостоятельное тестирование сайта.
Для начала нужно открыть все страницы сайта и проверить работу меню и других внутренних ссылок. Затем нужно заполнить форму обратной связи и проверить, приходят ли письма с сайта.
Далее проверим, как сайт открывается на разных устройствах, таких как смартфоны и планшеты, имеющих небольшой экран (адаптивность сайта). Это можно делать как физически, используя реальные устройства, так и при помощи онлайн-сервисов, например: I Love Adaptive.
Если сайт плохо адаптирован под различные экраны устройств с разными типами операционных систем, то рекомендуется сменить тему на более адаптивную.
И в завершение необходимо проверить производительность сайта, как быстро он открывается на компьютере и на мобильном устройстве. Это также можно сделать при помощи онлайн-сервисов, например: PageSpeed Insights.
Если производительность низкая, то далее сервис даёт рекомендации по её улучшению. В нашем случае производительность хорошая, хотя SEO-показатели требуют доработки.
Заключение
Сайт визитка компании ПЕРЕВОЗЧИК получился неплохим, без ошибок, производительным и адаптивным. Теперь можно заняться его поисковой оптимизацией и продвижением.
