Как самому бесплатно создать одностраничный сайт на WordPress за 1 день от покупки домена до подключения формы обратной связи – пошаговая инструкция

как самому сделать сайт на wordpress Разработка сайтов

Просто ли сегодня сделать сайт самому, без помощи программистов? Да такой, чтобы и выглядел презентабельно, и на мобильных устройствах хорошо отображался, и загружался быстро, и заявки принимал. Отвечаю: да, если потратите немного времени на обучение.

В статье «Как самому бесплатно создать одностраничный сайт на WordPress за 1 день от покупки домена до подключения формы обратной связи – пошаговая инструкция» я расскажу, как при помощи бесплатной системы управления сайтом можно собрать и запустить одностраничник буквально за сутки. А если не хотите заморачиваться – закажите разработку полностью подготовленного для SEO-продвижения сайта в нашей студии.

Этап №1. Что такое сайт? Определитесь, для какой задачи вам нужен сайт

Веб-сайт (англ. web — «паутина» и site — «место») – это одна веб-страница либо набор из нескольких виртуальных страниц, которые объединены общей темой и принадлежат одному владельцу.

Каждый сайт имеет своё уникальное доменное имя.

Первый сайт появился 20 декабря 1990 года. Интернет в наши дни состоит из миллионов сайтов. В первое время сайты предназначались только для хранения информации. Позже интернетом заинтересовался бизнес, и теперь через сайт можно не только находить нужную информацию, но и играть в игры, общаться с другими пользователями интернета, покупать товары и услуги и много чего ещё.

Все сайты можно разделить на:

  • коммерческие,
  • некоммерческие.

Коммерческий ресурс создаётся с целью получения выгоды. Выгода может быть как прямая – продажа товаров и услуг, так и косвенная – заработок от продажи рекламных баннеров или размещения платных статей, например. Коммерческие сайты с прямой выгодой: визитки, интернет-магазины, корпоративные – создаются с понятной целью. Владелец площадки таким образом презентует интернет-аудитории свой товар или услугу.

Ещё 10-15 лет назад разработать онлайн-площадку было сложной задачей, это могли только обученные программисты. Технологии настоящего позволяют каждому сделать проект на свой вкус.

Создать сайт самостоятельно, без специальных знаний программирования, можно:

  • при помощи конструкторов сайтов,
  • на бесплатной CMS – системе управления сайтом.

Бесплатных админок немало. Перечислю самые популярные:

  • WordPress (WP)
  • Joomla
  • Drupal
  • OpenCart
  • MODX
  • Magento
  • ImageCMS
  • TYPO3
  • Made Simple
  • Concrete5
  • PrestaShop
  • LiveStreet
  • DokuWiki
  • PHP-Fusion
  • E107 CMS
  • Textpattern
  • InstantCMS

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

Исходя из потребностей аудитории пишутся тексты, создаётся дизайн, фотографии, видеоролики.

В рамках этой статьи мы расскажем, как сделать лендинг для продажи услуг на бесплатной админке Вордпресс. Рекомендуем запускать сразу на CMS, потому что сайт, созданный на конструкторе, не даст вам в дальнейшем необходимых возможностей грамотно оптимизировать его под SEO, дорабатывать дизайн, подключать модули и т.д. При наличии определённых навыков собрать одностраничный сайт можно за 1 день.

Готовы к созданию сайта на WordPress? Вперёд!

Этап №2. Прототип – всему голова

Итак, вы определили свою целевую аудиторию и имеете представление, с какой целью будете запускать свой проект.

Двигаемся дальше!

Процесс создания делится на этапы:

  • замысел,
  • прототипирование,
  • отрисовка дизайна,
  • выбор доменного имени,
  • покупка хостинга,
  • установка WordPress,
  • вёрстка,
  • запуск, тестирование и отладка.

Современные системы администрирования полностью решают задачу дизайна. Новичку даже не надо об этом задумываться. Стили, шрифты, адаптивность к мобильным устройствам – всё это уже будет настроено по умолчанию.

Прототипирование – важный этап, которым нельзя пренебрегать. Перед постройкой дома всегда сначала делается проект – детальный план, который учитывает все мелочи. Даже зодчие средневековой Руси ещё до изобретения бумаги перед постройкой зданий обязательно делали чертежи будущих построек.

Прототип – это черновик будущего сайта, его наглядный чертёж, набросок. Задача прототипа – решить задачу взаимного расположения блоков, показать, как будет структурирована информация на страницах.

Прототип можно сделать разными способами:

  • вручную на листе бумаги,
  • в файле Microsoft Word или другого текстового редактора,
  • в Adobe Photoshop или другом графическом редакторе,
  • при помощи программы Balsamiq Mockups,
  • другим удобным вам способом.

Обычно сначала делается набросок от руки на бумаге, а потом – в программе Balsamiq Mockups.

Прототип делается в несколько приёмов.

  • Сначала рисуется схема расположения блоков.
  • Потом пишется текст для наполнения этих блоков.

Современный сайт должен быть удобен для использования, как минимум содержать навигационную панель – меню и форму обратной связи с возможностью оставить заявку.

Грамотный прототип – задача не из простых. Нужно хотя бы базовое понимание принципов веб-дизайна. Впрочем, в интернете очень много аналогов, можно взять какой-то понравившийся лендинг и сделать что-то похожее. Вот так выглядит прототип в документе Word:

прототип одностраничного сайта
прототип одностраничного сайта

Этап №3. Заплатить за сайт всё-таки придётся: покупаем домен и хостинг

CMS и конструкторы сайтов позволяют создавать сайты бесплатно, однако в них в большинстве случае будет ограничен функционал, вариативность настроек и т.д. Для старта это не принципиально. Можно обойтись бесплатными движками.

Однако заплатить немного денег всё-таки придётся. Нужно прикупить доменное имя и хостинг. Без них сайт не сможет физически работать.

Доменное имя – это название вашего будущего сайта. Выбор имени – творческая задача. «Как назовёшь свою лодку – так она и поплывёт» – сказал капитан Врунгель. Стоит помнить, что интересные домены уже заняты другими пользователями. Придётся основательно потрудиться, чтобы найти свободный домен. Доменные имена и услуги хостинга предоставляют специальные интернет-сервисы. Их много.

Мы пользуемся услугами русской компании Netangels, потому что у них весьма удобный интерфейс, адекватная оперативная техническая поддержка по e-mail и телефону, возможность в 2 клика установить Вордпресс и много других вкусностей. Ну и работает всё на 5+. Стоимость доменного имени у Netangels на 1 год в зоне *.ru – всего 200 рублей. Хостинг обойдётся от 124 рублей в месяц.

Как создать аккаунт на сервисе Netangels и пополнить баланс

Перейдите по этой ссылке на сайт Netangels. Первое, что потребуется сделать, – завести аккаунт.

Выбор хостинга для сайта
Выбор хостера для сайта

Мы на главной странице сервиса Netangels. Нажимаем сверху справа кнопку «Войти» и далее выбираем «Регистрация».

регистрация хостинга

Выбираем «Физическое лицо». Вводим фамилию, имя, отчество, как в паспорте, e-mail, номер телефона. В поле «Промокод» пишем u67603. Ставим галочку напротив пункта «Я согласен с условиями оферты…». Нажимаем «Продолжить».

Регистрация хостинга на себя

Система отправит вам код на ваш номер телефона. Его нужно ввести в появившемся поле. Вводите и нажимаете «Войти в аккаунт».

Регистрация хостинга

Ждём, когда система перенаправит нас в аккаунт.

Рабочий стол аккаунта выглядит вот так.

Регистрация хостинга

На вашу почту придут данные для входа в аккаунт: логин и пароль. Запишите их и храните в надёжном месте. Теперь нам нужно пополнить счёт аккаунта. Нам предстоит купить домен (200 рублей) плюс арендовать хостинг (рекомендую взять на месяц – рублей 250, потом нужно будет пополнять счёт время от времени). У вас в аккаунте сверху справа будут цифры 0,00 и значок кошелька. Перейдите туда и выберите «Пополнить баланс».

Как оплатить хостинг

Выберите удобный для вас способ пополнения баланса, укажите сумму платежа и следуйте дальнейшим инструкциям. Пополняем баланс через Сбербанк Онлайн без комиссии либо удобным вам способом.

как самому оплатить хостинг
как самому оплатить учетную запись на хосте

Покупка домена

Теперь нужно купить домен. Слева в аккаунте есть вертикальное меню. Идём сюда: Домены – Зарегистрировать.

Как самому купить домен

В новом аккаунте система предложит вам зарегистрировать анкету Ru-Center. Это партнёр Netangels, который предоставляет услугу регистрации доменных имён.

как зарегистрировать домен самостоятельно

Внимательно заполните все поля, как в паспорте, и нажмите «Зарегистрировать».

как самому зарегистрировать домен
как самому зарегистрировать доменное имя

Далее в поле «Домен» укажите название, которое хотите зарегистрировать, и нажмите «Зарегистрировать домен».

как самому купить домен

Готово!

Покупка хостинга

Следующий этап – покупка виртуального хостинга. Хостинг – это услуга аренды места на сервере под ваш сайт. Там будут физически размещаться файлы сайта и его база данных. В левом меню аккаунта выбираем «Услуги».

хостинг для сайта купить

Открываем спойлер «Виртуальный хостинг» и нажимаем «Заказать».

зарегистрировать хостинг сайта

Выбираем тариф. Можно начать с тарифа Лайт, с оплатой за месяц. Нажимаем «Заказать».

как заказать хостинг

Всё! Хостинг заказан и скоро начнёт работать. Сменить тариф можно будет в любой момент. Netangels списывает плату за пользование услугами ежедневно. То есть, если вы оплатили за месяц 250 рублей, к примеру, то каждый день будет вычитаться около 8,3 рублей. Netangels всегда заранее предупреждает своих клиентов о необходимости пополнить счёт. Даже если вы вдруг забудете об этом, сервис пришлёт вам SMS и письмо-напоминание на e-mail.

Важно! Хостинг должен работать постоянно! Если он перестанет действовать, то сайт станет недоступен, а это отрицательно скажется на его рейтинге в поисковых системах. Заметка на будущее, если планируете продвигать сайт по SEO.

Этап №4. Как самому бесплатно создать одностраничный сайт. Устанавливаем WordPress

Вы можете заказать разработку сайта на WordPress у специалистов нашей web-студии ITfrut или, если никуда не торопитесь, попробуйте сделать сайт самостоятельно. 

Чтобы создать сайт на сервере, нам потребуется система управления сайтом. Для наших целей вполне подойдёт WordPress. Сервис Netangels имеет одно неоспоримое преимущество: он позволяет произвести установку CMS всего за пару кликов. Не нужно лазить по официальным и полуофициальным сайтам, искать дистрибутивы, скачивать их, заниматься распаковкой, установкой. Всё это за вас сделает Netangels. Установка абсолютно бесплатна, и потом за использование админки тоже ничего платить не нужно.

Итак, заходим в аккаунт Netangels. Выбираем в левом вертикальном меню: Виртуальный хостинг – Сайты.

как установить сайт на хостинг
как установить проект

В открывшемся окне справа нажимаем кнопку «Добавить».

установить вордпресс на хостинг

В поле «Имя сайта» следует прописать доменное имя. Выбираем «Установить CMS WP», указываем свой e-mail. Установить в базу данных – Создать новую. Нажимаем «Добавить».

залить вордпресс на хостинг

Система управления сайтом установлена! Теперь проверяем почту, туда должно прийти служебное письмо от Netangels с логином и паролем для нового сайта. Чтобы попасть внутрь, открываем новую вкладку в браузере, вводим в адресной строке такую запись: ваш домен/wp-login.php.

установка вордпресс на хостинг

В открывшемся окне вводим логин и пароль, которые мы только что получили. Ждём пару секунд и попадаем в консоль.

Это рабочий стол панели управления системы администрирования.

установка wordpress на хостинг

Этап №5. Выбираем и настраиваем тему для WordPress

WordPress – популярная система управления сайтом, и её дорабатывают тысячи разработчиков из разных стран. Существует очень много дизайнов, на основе которых можно собрать свой сайт. Дизайном заведует функция «Темы». Тема – это набор инструкций, которые отвечают за внешний вид сайта. Чтобы выбрать и подключить тему, нужно в консоли в левом меню выбрать: Внешний вид – Темы. Есть как бесплатные, так и платные темы. Во многих темах бесплатен только базовый функционал, а всякие «примочки» ставятся за дополнительную плату.

Мы будем работать с темой Futurio. Нажимаем рядом со словом Темы «Добавить новую» и пишем в строке слово «Futurio». Нажимаем «Установить». Ждём несколько секунд. Заветная тема установлена!

Теперь давайте немного поколдуем над дизайном. В консоли в меню выберите: Внешний вид – Настроить. Установите плагин Futurio Extra, кнопка присутствует в левом меню. Этот плагин добавит больше возможностей для настройки элементов сайта. Поменять шрифт текста: Главное меню – Colors & Typography – Content – Site Font. Чаще используется шрифт Roboto Condensed. Вы можете поиграться и выбрать по своему вкусу.

Стрелочка в левом верхнем углу, под крестом, помогает вернуться в корневое меню.

Настроить эффект уменьшения меню при прокрутке страницы: Главное меню – Main Menu – Floating Header.

Тут же немного ниже есть настройка, которая добавляет кнопку отправки заявки: под надписью Top Bar Fields нужно активировать третий глазок и написать в пустом поле Button Text текст кнопки, например, «Оставить заявку».

В поле Button Link укажем ссылку на часть страницы: #1. Это так называемый якорь. При нажатии на кнопку «Оставить заявку» страница будет прокручиваться до места, где мы вставим этот якорь.

Дескриптор сайта (его описание, находится обычно рядом с логотипом в верхнем левом углу): Главное меню – Свойства сайта. Прокрутите меню вниз и заполните поля «Название сайта» и «Краткое описание». Здесь же можно добавить логотип, поэкспериментировать с цветовой гаммой. Нажмите вверху «Опубликовать», чтобы новые изменения вступили в силу, и вернитесь в консоль, нажав крестик.

По умолчанию Вордпресс добавляет в правую часть сайта разные виджеты: поисковую строку, календарь и т.д. Мы делаем одностраничный сайт, и эти элементы будут мешать. Чтобы их убрать, зайдите в левом меню консоли Внешний вид – Виджеты и удалите из карточки «Боковая колонка» всё, что там есть.

Этап №6. Верстаем страницу сайта на WordPress Elementor: настраиваем логотип, меню, видеоролики, изображения, текст, таблицы, иконки

WordPress содержит немало настроек, но для создания сайта под свои нужды их часто бывает недостаточно. Чтобы решить проблему настройки сайта «под себя», тысячи сторонних разработчиков предлагают пользоваться плагинами.

Плагины – это микропрограммы, которые дополняют базовый функционал и делают работу с сайтом немного легче. Например, один плагин будет отвечать за настройку SEO на сайте, другой – за подключение SSL-сертификата, третий – за интеграцию с социальными сетями и т.д.

Чтобы быстро и без программирования разработать одностраничный сайт, наполнить его информацией, существуют плагины-конструкторы. Их не один, и не два, а гораздо больше. Мы воспользуемся плагином Elementor.

Чтобы установить Elementor, зайдите в консоли в левое меню: Плагины – Добавить новый.

elementor wordpress как пользоваться
elementor wordpress как пользоваться

Наберите в строке слово «Elementor», дождитесь, когда система закончит поиск и нажмите на карточке плагина кнопку «Установить». Дождитесь конца установки и нажмите здесь же «Активировать».

настройка elementor wordpress
настройка elementor wordpress

Elementor установлен, и теперь мы можем им пользоваться. Создадим новую страницу при помощи функции в левом меню: Страницы – Добавить новую. Перейдём в режим редактирования, нажав «Изменить» под названием той страницы, с которой будем работать.

wordpress elementor настройка
wordpress elementor настройка

Перед началом работы в конструкторе страниц в поле с крупным шрифтом можно задать заголовок для страницы. Он будет отображаться на первом экране сайта, сразу же под горизонтальным меню. После этого нужно нажать «Редактировать в Elementor».

wordpress elementor как пользоваться
wordpress elementor как пользоваться

Теперь нам понадобится прототип сайта, который мы делали ранее. При помощи левого меню в Elementor можно добавлять на страницу разные виджеты: заголовки, текст, видеоролики и картинки, ссылки, кнопки соцсетей, иконки, карты Google, интервалы между разными блоками и т.д. Видов контента много.

установка wordpress elementor
установка wordpress elementor

Пример. Надо вставить видеоролик. Выбираем слева в панели виджет «Видео», перетаскиваем его мышью в нужную нам область страницы, где написано «Добавьте виджет».

сайт на wordpress elementor
сайт на wordpress elementor

Активный элемент обводится синей рамкой. Чтобы активировать его и попасть в настройки, нужно щёлкнуть на синей плашке среднюю кнопку «Редактировать секцию». Теперь можно форматировать элемент сайта при помощи настроек слева: задавать ширину, высоту, кегль и цвет шрифта и т.д. Чтобы на сайте воспроизводилось нужное видео, щёлкните в верхнем правом углу секции с видео на синюю кнопку «Редактировать видео» и задайте в настройках слева ссылку.

создание сайта elementor wordpress
создание сайта elementor wordpress

Таким же образом добавляются и редактируются изображения, тексты, ссылки и другие графические элементы. Разместите контент на странице так, как вы задумали его в прототипе. Вы перетаскиваете мышью нужный виджет из левого меню на страницу и потом редактируете его. Всё устроено очень просто и понятно. Поэкспериментируйте. Нажмите внизу слева «Опубликовать», чтобы сохранить изменения. Чтобы выйти обратно в консоль нажмите в левом верхнем углу панели Elementor кнопку в виде трёх полосок и далее – Выйти в консоль.

Этап №7. Подключаем необходимые плагины к сайту на WordPress

Чтобы сайт корректно работал, быстро загружался, красиво отображался в браузерах пользователей, хорошо ранжировался в поисковых системах, экономно расходовал место на сервере, необходимо подключить к админке дополнительные плагины. Приведем минимальный список необходимых плагинов, которыми сам активно пользуюсь и рекомендую всегда устанавливать. В зависимости от задач сайта, этот список может существенно меняться и дополняться.

  • Yoast SEO. Удобно работать с SEO-внутрянкой сайта, прописывать метатеги.
  • [ram108] Web Typography Standards. Форматирует текст на сайте по стандартам экранной типографики.
  • Google XML Sitemaps. Подключает автообновляемую карту сайта.
  • Login LockDown. Дополнительная защита сайта от взлома.
  • Webcraftic Clearfy. Оптимизирует размеры файлов, повышает производительность, ускоряет загрузку сайта.
  • Webcraftic Cyr to Lat reloaded. Переводит русские тексты ссылок на латиницу.

Этап №8. Подключаем форму обратной связи через плагин Contact Form 7

Сайт готов, и теперь наша задача настроить обратную связь. Другими словами, форму заявки. Сделать так, чтобы посетитель мог отправить на ваш e-mail свои контактные данные: имя, номер телефона, свой вопрос. Чтобы настроить автоматическую отправку заявок с сайта на вашу электронную почту, установите плагины Contact Form 7 и WP Mail SMTP.

Если кратко, то нам потребуется:

  • зарегистрировать почтовый ящик в аккаунте хостинг-провайдера,
  • сделать форму,
  • разместить её на странице,
  • настроить отправку данных.

Давайте создадим форму. В консоли выберите в Contact Form 7 – Добавить новую.

форма обратной связи wordpress
форма обратной связи wordpress

Задайте название формы, например, «контактная форма 1». Во вкладке «Шаблон формы» по умолчанию будет четыре атрибута: имя, почта, тема, сообщение. Можно удалить пару атрибутов и оставить, к примеру, только имя и почту.

плагин формы обратной связи wordpress
плагин формы обратной связи wordpress

В следующей вкладке «Письмо» укажите e-mail, на который будут приходить письма, тему письма.

wordpress как сделать форму обратной связи
wordpress как сделать форму обратной связи

После того как вы нажмёте «Сохранить», над вкладками появится синяя полоска с шорткодом. Сохраните его в блокнот. Он нам ещё понадобится.

настройка формы обратной связи wordpress
настройка формы обратной связи wordpress

Зайдите в меню консоли: WP Mail SMTP – Настройки.

форма обратной связи вордпресс
форма обратной связи вордпресс

Задайте метод отправки почты: прочие SMTP.

форма обратной связи вордпресс
форма обратной связи вордпресс

Чтобы наша почта исправно работала, нам потребуются настройки SMTP-сервера у нашего хостинг-провайдера. Предварительно создайте в аккаунте Netangels почтовый ящик под приём заявок с сайта.

Настройки Netangels:

  • SMTP-сервер: mail.netangels.ru
  • Шифрование: TLS
  • SMTP порт: 25
  • Авторизация: включить
  • Имя пользователя SMTP: ваша почта на Netangels
  • Пароль: пароль от почтового ящика на Netangels

Теперь зайдите в редактор страницы, выберите «Редактировать в Elementor». Добавьте виджет «Текст» на страницу и пропишите в его настройках слева шорткод контактной формы.

форма обратной связи wordpress elementor
форма обратной связи wordpress elementor

Форма подключена!

Вот так просто делается одностраничный сайт на WordPress. Мы собрали его на бесплатной теме Futurio.

Теперь ваш ресурс готов к приёму заявок. А чтобы заявки пошли максимально быстро, обычно запускается контекстная реклама в Яндекс Директ. Вы можете ее настроить самостоятельно, а можете обратиться к нам.

Мы в компании IT frut знаем как грамотно настроить контекстную рекламу, чтобы она принесла максимум результата за минимальную стоимость клика. Учитываем все особенности вашего бизнеса и конкурентов.

Оцените статью
itfrut
Добавить комментарий