Базовый курс создания сайта на WordPress за один вечер самостоятельно

Базовый курс создания сайта на WordPress за один вечер самостоятельно

4.8
(5)

В тексте рассказано как сделать сайт самостоятельно на CMS WordPress. Статья предназначена предпринимателям. Сайт организован, чтобы решать основные проблемы и задачи малого бизнеса. Используется терминология, которая понятна обывателю.

Затраты времени – 6 часов. Требуемый уровень компетентности: 0+ По итогу работы приобретете базовые навыки проектирования и организации сайта, познакомитесь с CMS WordPress и элементами верстки.

В качестве примера создадим новый бесплатный вариант сайта на WordPressс для компании Свой Дом.

  • Старый сайт: sk-angar.ru
  • Новый бесплатный сайт: shablon-korporativ.d-sant.com

Содержание:

Часть 1: Создание сайта

Часть 2: Организация сайта

Заключение

Дополнительно

 

Почему сайт на WordPress, а не конструктор типа Tilda?

  1. Потому что сайт нужен для продвижения, в том числе поисковой оптимизации. На конструкторе это или невозможно, или очень проблематично.
  2. Стоимость вложений в самостоятельный сайт на WordPress соизмерима с тарифам того же Wix, при гораздо больших возможностях по настройке и продвижению.
  3. Есть множество других мелких скрытых преимуществ начиная от удобства, заканчивая скоростью и инструментами, которые можно внедрить только на самостоятельном сайте. Дьявол в мелочах.

Вложения

  • Время изготовления: 6 часов.
  • Бюджет: годовая стоимость хостинга и домена (примерно 2000 руб./год)
  • Уровень компетентности: новичок+

Характеристики сайта

  • Тип: корпоративный сайт.
  • Задачи: сайт-визитка компании, основная информация о компании, услугах.

 

Часть 1: Создание сайта

Для начала работы потребуется хостинг. Использую sweb.ru, все инструкции заточены под этот хостинг.

 

Установка WordPress

  1. Скачиваем CMS WordPress с официального сайта.

    Скачиваем WordPress
    Жмем синюю кнопку
  2. Распаковываем архив

    Содержимое архива основной сборки WordPress
    Содержимое архива WordPress
  3. Создаем базу данных на хостинге
    Создаем базу данных на хостинге Sweb
  4. Именуем базу данных – обязательно легко распознаваемое имя.

    Именуем базу данных MySQL
    Задаем внятное имя базе данных
  5. В папке с файлами WordPress найдите файл wp-config-sample.php и переименуйте в wp-config.php. Откройте его с помощью текстового редактора и заполните поля: имя базы данных для WordPress, имя пользователя MySQL, пароль к базе данных MySQL, имя сервера MySQL
    Редактируем файл wp-config.php
    Заполняем файл wp-config.php

    На хостинге sweb.ru имя сервера MySQL всегда localhost, а имя базы данных совпадает с именем пользователя.

  6. Создаем папку для сайта sample-site. Используем файловый менеджер на хостинге.

    Через файловый менеджер создаем папку для сайта
    Создаем папку для сайта
  7. Прикрепляем домен к папке сайта. Можно использовать рабочий поддомен или использовать основной.

    Создаем поддомен на хостинге Sweb
    Создание поддомена
  8. Загружаем файлы CMS WordPress на хостинг. Возвращаемся в созданную нами папку shablon-korporativ и находим подпапку public_html. В нее загружаем файлы дистрибутива WordPress.

    Загружаем файлы CMS WordPress через файловый менеджер Sweb
    Загружаем файлы CMS WordPress
  9. Установка WordPress. Переходим [домен вашего сайта]/wp-admin/install.php и видим форму:
    Стартовое окно установки WordPress
    Стартовое окно установки WordPress

    Задаем имя сайта, имя пользователя, пароль, основной емайл и убираем галочку “Разрешить поисковым системам индексировать сайт”. Важно! Пароль должен содержать 8 и более символов. Получаем поздравления:

    Окно поздравления WordPress
    Поздравляю! Первый шаг сделан.

    Теперь жмем “Войти” и заходим в панель администрирования сайта.

 

Первые настройки WordPress

Заходим в раздел Настройки:

Где искать настройки сайта WordPress
Раздел Настройки сайта

 

По очереди заполняем все пункты раздела Настройки.

  • Общие. Укажите название сайта, краткое описание, адрес сайта, формат даты, часовой пояс. В полях Адрес WordPress (URL) и Адрес сайта (URL) укажите адрес сайта.

    Общие настройки WordPress
    Общие настройки WordPress
  • Написание. Используйте настройки по умолчанию. В поле “Сервисы обновления” укажите адрес http://rpc.pingomatic.com/.
    Настройки описания сайта WordPress
  • Чтение. “На главной странице отображать” выберете статичную страницу и укажите Пример страницы (есть по умолчанию). Поставьте галочку на “не индексировать сайт”.
    Настройки Чтение CMS WordPress
  • Обсуждение. Настройки оставляем по умолчанию. В поле “Модерация комментариев” ставим цифру 1.

    Базовые настройки раздела Обсуждение CMS WordPress
    Две галочки и цифра 1
  • Медиафайлы. Оставляем настройки по умолчанию.
  • Постоянные ссылки. Выбираем п. “Произвольно” и прописываем: /%category%/%postname%/

    Базовые настройки раздела Постоянные ссылки CMS WordPress
    Настраиваем постоянные ссылки

 

Установка плагинов – обязательный набор

Обязательный набор плагинов обеспечит безопасность сайта и позволит более комфортно настраивать структуру.

 

Как установить плагин (любой)

Заходим в раздел Плагины – Добавить новый

Как добавить плагин в CMS WorsPress
Добавить плагин

В поиске задаем название плагина, жмем Enter и видим результат:

Поиск плагина в CMS WorsPress
Ищем нужный плагин

Выбираем нужный, жмем “Установить”, происходит установка, после этого жмем “Активировать”.

Установка и активация плагина в CMS WordPress
Установка и активация плагина
Активация плагина
Активируем плагин

Плагин установлен и работает.

Список установленных плагинов CMS WordPress
Плагин установлен и функционирует

 

Как удалить плагин

Заходим в раздел Плагины – Установленные. Находим нужный и жмем “Деактивировать”. После деактивации жмем “Удалить”.

Как удалить плагин в Вордпресс, деактивация
Деактивация плагина
Удаление плагина в Вордпресс
и удаление

 

Список обязательных для установки плагинов:

  1. Akismet
    Защищает от спама в комментариях.
  2. Cyr to Lat enhanced
    Для формирования URL страниц. Нужно для индексирования сайта поисковыми системами.
  3. Google XML Sitemaps
    Создает карту сайта для поисковых систем. Нужно для оптимизации.
  4. Header and Footer
    Используется для установки различных кодов счетчиков и метрик.
  5. Loginizer
    Обеспечивает безопасность формы авторизации в панель администрирования.
  6. reCAPTCHA
    Удобная капча от Google
  7. BackUpWordPress
    Делает резервные копии сайта
  8. Sucuri Security
    Комплексная защита сайта. Проверяет целостность файлов, сохраняет логи изменения на сайте, отображает попытки авторизации на сайт. Своевременно обнаруживает попытки взлома сайта и блокирует их.
  9. Google Maps Easy
    Создание своих карт на основе Карт Google
  10. Carousel Horizontal Posts Content Slider
    Виджет последних записей
  11. Contact Form by Supsystic
    Форма обратной связи
  12. Envira Gallery Lite
    Галерея изображений
  13. Logo Carousel
    Карусель логотипов
  14. Team Members
    Список сотрудников
  15. Testimonial Rotator
    Ротатор отзывов
  16. TinyMCE Advanced
    Расширенный визуальный редактор

Установите все указанные в списке плагины.

 

Настройка плагинов

Разберем, как настроить плагины, которые этого требуют.

 

Akismet

Заходим в Настройки – Akismet

Где искать настройки Akismet

Чтобы плагин работал, его надо активировать, ввести API-ключ. Для получения API-ключа регистрируемся на сайте akismet.com.

Регистрация плагина Akismet
Переходим на сайт за ключом
Получение ключа Akismet
Жмем большую кнопку
Форма регистрации в сервисе Akismet
Стандартная регистрация

 

После этого предлагают три тарифа. 1-й бесплатный. Выбираем его.

Тарифные планы плагина Akismet
Выбираем тарифный план

На следующей странице предлагают ввести данные кредитной карты. Не обращаем внимание, сдвигаем ползунок влево и просто вводим свое имя.

Выбираем бесплатный вариант плагина Akismet
Снижаем цену до бесплатного

На следующей странице получаем свой API и добавляем сайт.

Получение API для плагина Akismet
Наш API

 

Сохраняем изменения.

Loginizer

Заходим в консоль плагина

Где искать консоль плагина Loginizer

Картинка скрин где искать консоль плагина

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

Плагин Loginizer предупреждает о потенциальных угрозах
Предупреждения от Loginizer

Для этого заходим на хостинг, файловый менеджер, находим нужные файлы (они сразу в папке с WordPress) и меняем права доступа.

Как поменять права записи файлов на хостинге свеб
Меняем права доступа к файлам

 

Теперь, чтобы редактировать файлы, надо зайти через файловый менеджер хостинга.

Остальные настройки плагина можно оставить по умолчанию. Но если у вас проблемы с авторизацией (забываете пароль или не можете сразу вбить с первого раза), то рекомендую увеличить кол-во разрешенных попыток авторизации до временной блокировки и добавить свой IP-адрес в белый лист.

Для этого заходим в раздел Loginizer – Brute Force Settings

Где искать Loginizer - Brute Force Settings

Здесь видим все IP-адреса, которые пытались авторизоваться на сайт. Находим наш и добавляем в белый лист IP – скопируйте, прокрутите страницу вниз и добавьте в первое поле.

Добавление IP в белый лист в Loginizer - Brute Force Settings
Добавляем свой IP в белый лист

Увеличиваем кол-во попыток авторизации. Возвращаемся в начало странице, в поле Max Retries ставим число 5.

Андрей Унтерзегер телеграм

Закрытый клуб инфопродюсеров

Обсуждаем то, о чем молчат инфоцыгане. Кейсы, истории, опыт практиков инфобизнеса. Телеграм-чат и комьюнити.

Увеличиваем кол-во попыток авторизации через плагин Loginizer
Увеличиваем кол-во попыток авторизации

Остальные настройки можно оставить по умолчанию.

 

reCAPTCHA

Этот плагин ставит удобную капчу от Google – защиту для ввода данных в различные поля от авторизации в панель администрирования сайта, до формы обратной связи или комментариев. Но чтобы плагин начал работать, надо ввести API keys.

Заходим в настройки плагина: Настройки – reCAPTCHA options.

Где искать настройки reCAPTCHA options

Переходим по ссылке register you domain

 

Регистрация домена для плагина reCAPTCHA options

Авторизуемся в Google, если авторизованы, то сразу регистрируем свой сайт: добавляем домен и все поддомены, где планируем использовать капчу. Жмем “Регистрация”.

Регистрация домена для reCAPTCHA
Регистрация домена для reCAPTCHA

 

Получаем ключи API. Копируем и вставляем в настройках плагина.

Получение ключе API reCAPTCHA
Вот они ключики

Эти ключи сохранены в сервисе Google reCAPCHA и легко находятся по ссылке: www.google.com/recaptcha/admin

Андрей Унтерзегер телеграм

Закрытый клуб инфопродюсеров

Обсуждаем то, о чем молчат инфоцыгане. Кейсы, истории, опыт практиков инфобизнеса. Телеграм-чат и комьюнити.

Сохраняем изменения. На этом настройки плагина reCAPCHA закончены.

Как выглядит reCAPTCHA
Наша капча

 

BackUpWordPress

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

Заходим в Инструменты – Резервные копии

Где искать настройки BackUpWordPress

Добавляем расписание резервного сохранения. Выбираем файлы и базы данных, ставим расписание, кол-во архивов, которые будут хранится на сервере.

Настройки для BackUpWordPress
Настройки расписания резервного сохранения

Эти настройки индивидуально для каждого сайта и зависят от следующих фактором:

  • размер дискового пространства, которые выделяет ваш хостинг;
  • как часто вы изменяете свой сайт.

Если вы редактируете сайт раз в месяц или в полгода, то примерно с такой же периодичностью надо делать резервные копии. Почему так? Если сайт взломают, вы можете этого не заметить. Вирус на сайте сидит незаметно год-полгода. Обнаружили его через год после заражения и нужна резервная копия годовой давности. А хостинг хранит резервные копии за последние 7 дней. В этом случае выручает плагин BackUpWordPress, которые позволяет хранить резервные копии годовой давности.

Обратите внимание на объем памяти, которое занимает ваш сайт:

Квота в свеб
Размер выделяемого хостингом места на жестком диске

 

Объема памяти должно хватать, чтобы хранить резервные копии сайта за год.

Резервные копии сайта от плагина BackUpWordPress
Вот они резервные копии

Еще немного про вирусы. На хостинге sweb.ru стоят надежные антивирусные программы, все взломы определяется в течении суток. Но на хостинг надейся, а сам не плошай. К тому же элемент безопасности сильно отличается у разных хостеров (тот самый пункт мелким шрифтом, о котором молчат, когда обещают низкие цены).

Sucuri Security

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

Где искать консоль плагина Sucuri Security

Жмем кнопку “Generate API Key”. Всплывает окно где вам сообщают на какой логин-емайл происходит регистрация. На этот емайл придет письмо с API Key. Это пригодится на всякий случай, а сейчас плагин автоматически включает API Key.

 

Генерируем API key в плагине Sucuri Security
Генерируем API key

 

Генерация ключа API в плагине Sucuri Security
Генерация ключа API

 

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

Запускаем сканирование сайта плагином Sucuri Security
Запускаем сканирование

В моем случаи плагин нашел посторонние ссылки на сайте, напугал тревожными сообщениями и выдал рекомендации по настройке.

 

После сканирования сайта плагином Sucuri Security появились предупреждения
Предупреждения после сканирования

Но в целом все хорошо, сайт работает и не создает проблем. Желающие могут заострить свое внимание на изучении настроек этого плагина, а тем, кто хочет зарабатывать деньги – предпринимателям – рекомендую идти дальше.

 

Google Maps Easy

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

Получаем ключи от API Google Maps
Получаем ключи от Google Maps

Открывается окно “Активация Google Maps JavaScript API“ жмем “Продолжить”.

Активация Google Maps JavaScript API
Активация Google Maps JavaScript API

Выбираем существующий проект или создаем новый, ставим флажки везде Да.

Процесс регистрации в Google Maps JavaScript AP

Выбираем тип учетных данных и получаем ключи

Ключ API Google Maps JavaScript
Полученный ключ

Полученный ключ копируем. Переходим Google Maps Easy – Настройки, поле User API key, вставляем наш ключ. Все, теперь можем создавать свои собственные карты Google Maps.

Куда вставлять полученный ключ Google Maps JavaScript AP
Вставляем ключ здесь

Подключение темы

Настроим внешний вид сайта, подключим готовый шаблон дизайна.

Заходим в раздел Внешний вид – Темы. Здесь перечень шаблонов дизайна сайта, которые хранятся на сервере сайта. Каждую тему можно быстро активировать. Несколько тем по умолчанию входят в комплектацию CMS WordPress. Нам они не подходят. Их назначение – личный блог.

Чтобы поставить другую тему, ждем “Добавить новую тему”.

Добавление темы в CMS WordPress
Добавляем новый дизайн сайта

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

В поиск вбейте Spacious. Находим, жмем “Установить” и “Активировать”.

Устанавливаем тему Spacious (расширенный)
Находим Spacious

Используем тему Spacious. Чем она хороша?

  • бесплатная (есть платная версия)
  • мобильная адаптация
  • много настроек по цвету и шаблону страниц
  • хорошо переведена на русский язык
  • использует читабельные шрифты

Это основные преимущества. Есть другие хорошие темы. Но статья предназначена для предпринимателей, поэтому не будем тратить время на изучение доступных дизайнов, которых громадное кол-во. Время – деньги.

 

Часть 2: Организация сайта

Планирование

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

Ошибка – рисовать дизайн. Забудьте про дизайн. Хороший дизайн там, где его нет. На первом этапе важно запустить сайт как можно быстрей. Время  – деньги. За первый год работы сайта протестируете от 3 до 15 ниш, бизнес-гипотез и найдете тот вариант, который вам понравится.

Ниже продемонстрировано проектирование сайта. В качестве эталона используем сайт sk-angar.ru и создадим аналогичный, но быстро и дешево (почти бесплатно).

Основные разделы корпоративного сайт:

  • о компании
  • услуги
  • портфолио
  • контакты

Иногда есть раздельные каталог товаров и услуги, иногда есть раздел для партнеров, но 90% сайтов для малого бизнеса имеют сходную структуру и ничего нового изобретать не надо – это расход времени и денег, которых на старте нет. Эффективно –  изучить конкурентов и воспользоваться чужим опытом.

В нашем случае планируются следующие разделы:

  • Раздел Услуги. Перечисляем наши услуги или товары. На каждую услугу выделяем отдельную страницу.
  • Раздел Наши проекты. Перечень проектов, которые можем сделать.
  • Раздел О компании. Содержит страницу с описанием компании, перечень сотрудников (персонализацию компании), блок отзывов и сканы сертификатов и др. документов.
  • Раздел Выполненные работы. Хронологическая лента выполненных объектов.

Планируем два меню: основное (сверху и снизу) и дополнительное (сбоку). В основном меню указаны главные разделы и страницы сайта. Боковое меню содержит ссылки на продаваемые услуги или товары.

Создаем страницы

В терминологии WordPress существуют страницы двух типов: записи и страницы.

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

Схема внешнего вида записи в блоге CMS WordPress
Схема записи

Страницы работают как в одиночку, так и объединенными в группы. Можно создавать родительскую страницу и несколько дочерних, но все же каждая страница вполне самостоятельна.

Иерархия страниц в CMS WordPress
Иерархия страниц

 

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

Сначала создаем страницы разделов: услуги, наши проекты, о компании. Потом создаем страницы внутри каждого раздела, указываем родительскую страницу. Если все сделать правильно, то перечень страниц выглядит примерно так:

Основные и дочерные страницы в вордпресс
Создаем основные и дочерные страницы

 

Потом делаем страницы выполненных объектов. Это уже лента блога. Создаем рубрику блога Выполненные объекты. Под каждый объект создаем отдельный пост в блоге, добавляем метки с указанием тип объекта, тип конструкции. Например: зернохранилище, бескаркасный ангар, арочная конструкция.

Все записи одной рубрики вордпес
Перечень записей раздела Выполненные объекты

 

Как создать страницу

Переходим в раздел Страницы – Добавить новую:

Как добавить страницу в CMS WordPress

Заполняем заголовок, текст страницы, указываем родительскую страницу, если она есть.

Создание страницы в CMS WordPress
Схема создания страницы

На первоначальном этапе можно сделать только заголовки, а примеры текста и картинки взять с других сайтов.

 

Как создать рубрику записей

Переходим в раздел Записи – Рубрики:

Как создать рубрику в CMS WordPress

Задаем название новой рубрики, жмем добавить “Добавить новую рубрику”. Ярлык рубрики будет сгенерирован автоматически.

Как создать рубрику в CMS WordPress

 

Как создать записи

Переходим в раздел Записи – Добавить новую:

Как создать запись

Указываем заголовок, добавляем текст, выбираем рубрику, ставим метки, задаем миниатюру – изображение анонса нашей записи размером 782 × 509 px.

Схема создания записи в вордпрес
Схема создания записи

Жмем “Опубликовать”.

 

Организуем сайт

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

Надо:

  • создать меню;
  • загрузить логотип компании;
  • задать название сайта;
  • настроить цвет;
  • разместить в шапке и подвале сайта контакты;
  • сквозная форма обратной связи.

 

Создаем меню сайта

Раздел Внешний вид – Меню

Где редактировать меню в вордпрес

 

Здесь все существующие меню сайта. Требуются создать три меню:

  • Главное  – для шапки сайта.
  • Услуги – сквозное меню для всех внутренних страниц. Это основной продающий раздел.
  • Подвальное меню. Иногда дублирует верхнее.

Меню услуг разобьем на две части: услуги и наши проекты. Оба раздела являются продающими.

Перечень меню, которые есть на сайте
Все созданные меню для сайта

Главное меню (основное). Скорее всего оно будет уже создана по умолчанию. Пункты меню редактируются по принципу “хватай-и-тащи”. Слева находите нужные вам страницы разделов (услуги, выполненные проекты, о компании) и рубрику Выполненные объекты, добавляете в меню. Таким же образом добавляем отдельные дочерние страницы, размещаем в нужном порядке. Галочка должна указывать местоположение Основное меню. Жмем “Сохранить”.

Собираем меню в вордпрес
“Хватай и тащи” пункты меню

Таким же образом создаем меню для подвала. Указываем только основные разделы и ставим галочку “Меню в футере”. Сохраняемся.

Делаем меню для подвала в вордпрес
Меню для подвала

В верхнем меню не указываем страницу Главная – переход на главную страницу сайта происходит по клику на заголовок или логотип. В нижнем меню есть смысл указать п. Главная.

Создаем еще два меню: Услуги и Выполненные объекты. На этот раз галочку местоположения не ставим:

Боковое меню в вордпрес
Меню Услуги

Все пункты меню ведут сразу на целевую страницу с продаваемым товаром или услугой.

 

Название сайта и логотип

Задаем название компании, логотип. Раздел Внешний вид – Настроить. Открывается визуальный редактор внешнего вида сайта.

Где искать настройки внешнего вида сайта на вордпрес

Визуальный редактор внешнего вида в CMS WordPress

Визуальный редактор внешнего видаЗаходим в Свойство сайта. Пишем название – Свой Дом – и описание. Добавляем фавикон.

Картинка Название сайта и фавикон

Добавляем название сайта и фавикон
Добавляем название сайта и фавикон

Фавикон  – небольшое изображение на вкладке браузера и поисковой выдаче Яндекс.

Что такое фавикон
Где используется фавикон

После этого заходим в Заголовок – Показать, ставим флажок “Показывает оба”. Жмем “Сохранить и опубликовать”.

Включаем заголовок и логотип на сайте вордпрес
Отображаем заголовок и логотип

 

Настройки цвета

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

Заходим во Внешний вид.

  • Макет сайта – широкий макет с шириной контента 978px.
  • Разметка по умолчанию – самая верхняя
    Разметка по умолчанию
  • Шаблон по умолчанию для страниц – самый верхний
    шаблон для страниц
  • Шаблон по умолчанию для отдельных постов – самый верхний
    схема для записей
  • Тип отображения записей в блоге – Большие изображения блога.
  • Основные цвета – выбираем свой цвет. В моем случае #339dc4 (можно скопировать и вставить).
  • Цветовая схема – светлая.

Все. Почти все настройки стоят по умолчанию (кроме цвета), но полезно проверить.

Жмем “Сохранить”. И смотрим что получилось с лицевой части сайта. Если сделали все правильно, то сверху и снизу получается примерно так:

Как выглядит верхнее меню
Верхнее меню
Как выглядит нижнее меню сайта вордпрес
Нижнее меню

 

Настраиваем виджеты

Виджет в WordPress это… Официальное определение приводить не буду. Но если своими словами, то виджет – это функциональный элемент сайта, которые можно разместить в любую предусмотренную дизайном зону. Непонятно? Заходим в раздел Внешний вид – Виджеты.

Где искать виджеты

Справа заданы различные области у шаблонов сайта: для главной страницы (в нашем случае страница Business), для стандартных внутренних страниц. Слева варианты виджетов. Есть стандартный набор, есть дополнительные, которые идут вместе с плагином.

Раздел виджеты в вордпрес
“Хватай и тяни” виджеты и размещай на макетах

Нас интересует: установка меню услуг, добавление адреса и телефонов вверху сайта.

Логика работы “хватай-и-тяни”. Находим виджет Произвольное меню и размещаем в области Меню справа. В настройках виджета выбираем меню Услуги. Аналогично устанавливаем меню Наши проекты.

Создаем контакты вверху сайта, над основным меню. Размещаем виджет Текст в области “Сайдбар заголовка”.

Пример текста:

<strong>+ (495) 456-12-35, +7 (495) 132-21-54</strong></br>

Челябинск, ул. Труда, д. 64ф, оф. 201

Теги <strong> задают выделение телефона, </br> принудительный перенос строки.

Настраиваем виджеты в вордпрес для адреса и бокового меню
Адрес в шапке сайта и боковые меню

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

 

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

Это сквозная форма для всех внутренних страниц сайта. Используем плагин Contact Form by Supsystic и создаем новую форму.

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

Выбираем шаблон – Base Contact

Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Выбираем шаблон формы
Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Указываем нужный шаблон

 

Назначаем цвета: черный, синий, черный. Код синего: #1f90c1 Сохраните, чтобы в дальнейшем использовать, это основной цвета сайта.

Как настроить цвет формы обратной связи в плагине Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Настраиваем цвет формы

Переходим на вкладку Поля (Fields). Создаем поля формы. В моем случаи:

  • Имя – Text
  • Телефон – Text
  • Емайл – Email
  • Сообщение – Textarea
  • Отправить – Submit Butoon

Поле “Емайл” обязательное.

Жмем кнопку “Add New Field”, выбираем тип поля:

Настраиваем поля формы обратной связи плагина Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Нужные поля для формы обратной связи

Двойной клик по названию поля – редактирование поля. Заполняем данные:

  • Name – латинскими буквами имя поля;
  • Placeholder – имя поля, которое будет видеть пользователь.

Для поля “Емайл” ставим галочку “Required” и помечает для пользователя, что это поле обязательное. Я поставил звездочку*, но можно в скобках написать “обязательно для заполнения”.

Как настраивать поля формы в плагине обратной связи
Пример настройки поля

Используем стрелки слева, чтобы передвигать поля в нужно порядке.

Система сортировки полей формы обратной связи в плагине Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Перемещаем поля в нужно порядке

Смотрим предварительный просмотр, сохраняем. Переходим во вкладку “Submit Option”.

Вбиваем сообщение с благодарностью за отправленную форму, выбираем цвет сообщения (корпоративно синий). Проверяем, чтобы стояла галочка на “Hide form after submit,” и указываем свой емайл для теста сообщения.

Настройка раздела Submit Option в плагине Выбираем шаблон формы обратной связи плагина Contact Form by Supsystic
Настраиваем опции отправляемого сообщения

Задаем параметры для отправки емайл сообщений.

  • Указываем емайл, куда отправлять сообщения.
  • Емайл, который будет источником сообщения (рекомендую дать говорящее название).
  • Тема письма.
  • И содержание.

Смотрим пример:

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

После заполнения всех полей, тестируем сообщение – жмем кнопку “Send Test Emai”.

Тестируем емайл функции
Тестируем отправку сообщений

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

Вставляем виджет Contact Form by Supsystic в область “Меню справа”, указываем заголовок и выбираем созданную форму.

Установка виджета в боковое меню
Размещаем виджет формы обратной связи
Внешний вид формы обратной связи плагина Contact Form by Supsystic размещенная на сайте
Внешний вид формы обратной связи

Страница О компании

У страницы сложная структура. Нужно указать текстовое описание, показать сотрудников, разместить отзывы и сертификаты. И указать адрес и контакты. Попробуем это сделать с минимальными усилиями и без привлечения программиста.

Описание компании – это обычная текстовая область. Создается как у всех страниц или записей.

 

Отзывы

Отзывы для компании имеют вид или сканов благодарственных писем (актуально для 2b2) или текстовые сообщения с указанием контактов автора. Создал оба варианта, но вы можете сделать только один.

Текстовое сообщение отзывов – готовый плагин WordPress Testimonial Rotator. Содержит рейтинг, заголовок, описание, указание автора и дополнительную информацию (ссылки, адрес, контакты).

Текстовые отзывы
Пример отзыва

Благодарственные письма еще проще – тоже готовый плагин Envira Gallery. Все сканы благодарственных писем это картинки. Создаем галерею с лайтбоксом – увеличением картинки по клику на миниатюре.

 

Сертификаты

Таким же образом создаем раздел Сертификаты. На настройках галереи указываем размер миниатюры 300px.

Размещение сертификатов через плагин Envira Gallery
Сертификаты компании

 

 

Наши сотрудники

Используем плагин Team Members, специализированный плагин для создания списка сотрудников.

Персонализация сотрудников через плагин Team Members
Персонализация сотрудников

 

Как создать галерею

Варианты использования уже демонстрировал, теперь покажу как создавать. Раздел Envira Gallery. Жмем Add New:

Как добавить галерею через плагин Envira Gallery

Задаем название, добавляем изображения, задаем размер миниатюры.

Добавление галереи благодарственных писем в плагине Envira Gallery
Добавляем галерею благодарственных писем
Настройка миниатюр в плагине Envira Gallery
Настраиваем размер миниатюры

Можно посмотреть другие настройки, поэкспериментировать. Жмем “Опубликовать”. В готовой галереи забираем шорткод (Shortcode) – короткая строка с идентификатором вашей галереи. Такие шорткоды используются постоянно. В моем случае он выглядит так: [envira-gallery id=”154″] Копируем и вставляем в нужное место на странице О компании:

Копируем шорткод
Копируем шорткод
Что такое шорткод и как использовать
Вставляем шорткод на странице О компании

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

 

Как создать текстовые отзывы

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

Заходим в раздел Testimonials – Add Rotator. Создаем ротатор отзывов: даем название, выбираем один из двух доступных шаблонов, задаем свои настройки или оставляем по умолчанию.

Как настроить плагин Testimonials - Add Rotator
Настройки ротатора отзывов

Создаем отзывы в разделе Testimonials – Add New. Задаем заголовок, текстовое сообщение, указываем наш ротатор, рейтинг и данные автора (имя, контакты, должность и пр.). Задаем миниатюру (фотографию) автора.

Совет: рейтинг 4 или даже 3 выглядит гораздо достоверней, чем твердая 5.

Добавление отзывов в плагине Testimonials
Делаем отзывы

 

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

В разделе All Rotators находим наш ротатор и его шорткод:

Где найти шорткод ротатора в плагине Testimonials
Копируем шорткод

Полученный шорт вставляем на страницу О компании

 

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

Раздел Team – Add New. Задаем название “Наши сотрудники”. Заполняем данные сотрудника: имя, должность, описание, загружаем фото, указываем ссылки на профили соц. сетей (необязательно). Добавляем сотрудников (“Add another member”) и сортируем в порядке приоритетности.

Добавление сотрудников компании через плагин Team Members
Добавляем сотрудника
Заполняем данные сотрудника
Заполняем данные сотрудника
Сортируем и добавляем сотрудников через плагин Team
Редактируем команду

 

Справа в колонке указываем настройки: Members to show per line – 2 member per line и галочка после Force original fonts. Т.е. 2 сотрудника в линии, используем стандартный шрифт.

Жмем “Опубликовать”. Переходим Team – All Teams, копируем шорткод и вставляем на странице О компании. Смотрим, что получилось:

Команда сотрудников через плагин Team
Позитивная команда

 

Создаем блок Контакты

Сделаем его сквозным на весь сайт. Указываем контакты, номера телефонов, карту Google. Для этого нам понадобится плагин Google Maps Easy. Создаем карту с маркером компании.

Заходим Google Maps Easy – Добавить карту. Задаем название карты. Остальные настройки оставляем по умолчанию.

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

 

Создаем карту для сайта с помощью плагина Google Maps Easy
Основные настройки карты

 

Переходим во вкладку Маркеры, задаем имя, выбираем иконку маркера и можно задать описание к маркеру, но в нашем случаи это не обязательно. Забиваем адрес и Google выдает подсказку. Остается только сохранить и запомнить ID маркера:

Как настроить маркеры на карте сайта в плагине Google Maps Easy
Настройка маркера карты

 

Переходим в раздел Виджеты (Внешний вид – Виджеты). Вставляем виджет Google Maps Easy в область “Первый сайдбар подвала”. Выбираем созданную карту и задаем настройки: ширина карты 300%, Map Centre – ID нашего маркера (чтобы маркер всегда был в центре). Сохраняем.

Размещаем виджет карты в подвале сайта плагина Google Maps Easy
Вставляем виджет карты

Вставляем виджет Текст в область Четвертый сайдбар подвала. Придется применить навыки верстки. Используем теги:

  • <p></p> – создают параграф, с пустой строкой после текста;
  • </br> – принудительный обрыв строки;
  • <strong></strong> – выделение куска текста.

Пример приведен в моем случае:

Размещение адреса компании рядом с картой гугл
Добавляем адрес

 

Получаем блок Контакты внизу сайта:

Карта и адрес компании на сайте вордпрес
Адрес компании на сайте

 

Главная страница

Самый сложный и функциональный раздел сайта

Нужен разместить:

  • слайдер (встроен в тему);
  • последние проекты
  • отзывы клиентов
  • логотипы клиентов
  • карта выполненных объектов
  • призыв к действию

Страница сложная, требует внимательного проектирования. Рекомендую предварительно сделать несколько эскизов на листе бумаге, понять какие блоки размещать в какой последовательности. По итогу работы получим примерно такую Главную страницу сайта:

Главная страница сайта по итогу работы
Главная страница сайта по итогу работы (клик, чтобы увидеть полный размер)

 

Слайдер

Разработчики темы по умолчанию включили слайдер. Чтобы включить и редактировать слайдер заходим Внешний вид – Настроить. Ищем раздел Слайдер. Активируем слайдер. Загружаем картинки слайдов. Размеры изображения 1029х377 px. Пример картинки – по ссылке. Можно напрячь воображение, сделать сложный дизайн слайда, но рекомендую простой вариант – показать товар лицом.

В бесплатной версии темы доступно размещение 5 слайдов. Этого достаточно. Указываем заголовок, описание, призыв к действию, ссылку для кнопки.

Как сделать слайд в вордпрес
Схема создания слайда

Если предварительный просмотр устраивает, то сохраняем и публикуем.

 

Услуги

Используем встроенный виджет темы Spacious (Просторный). Внешний вид – Виджеты, TG: Услуги. Вставляем в область “Верхний сайдбар для страницы Business”. Указываем три самые ходовые услуги.

Почему три? Виджет позволяет отобразить 6 анонсов услуг, но делать этого нельзя. Правильно анонсировать только самые ходовые услуги. Все остальное есть в разделе Услуги.

Как настроить виджет услуги
Настройка виджета Услуги

 

 

Наши проекты

По аналогии с предыдущим пунктом используем встроенных виджет темы Spacious – TG:Виджет связанное. Заполняем заголовок, описание, указываем три самых популярных проекта.

Как настроить виджет наши проекты
Виджет Наши проекты

 

Призыв к действию

Встроенный виджет темы WordPress. Заходим Внешний Вид – Виджеты, находим виджет TG: Виджет “Призыв к действию”. Вставляем в область “Верхний сайдбар на странице Business”. Заполняем заголовок, описание, текст и ссылка для кнопки.

Как настроить виджет призыв к дейсьвию
Настройка виджета Призыв к действию

 

Выполненные объекты

Плагин Carousel Horizontal Posts Content Slider позволяет вставлять виджет с каруселью последних записей.

Заходим Настройки – CHPC Slider. Настройки оставляем по умолчанию, но в п. Categories/Terms выбираем категорию Выполненные объекты.

Где искать настройки виджета CHPC Slider
Настройка виджета CHPC Slider

Виджет CHPC Slider размещаем в области “Сайдбар по середине слева на странице Business”

 

Карта выполненных объектов

Используем плагин Google Maps Easy. Создаем новую карту. Порядок работы аналогичен работе с блоком Контакты. Но на этот раз нужно создать несколько маркеров. В разделе маркеры задаем описание – кратко “ангар 15х50м под зерносклад”, – выбираем иконку. Забиваем адрес: сначала область – Google выдаст нам подсказку, – потом название поселения – Google опять выдаст подсказку, иногда с задержкой.

Как добавить адрес в Google Maps Easy
Подсказка адреса в Google Maps

Как варианты, можно сделать ссылку с маркера карты на целевую страницу описания проекта.

Как встроить ссылку на маркере Google Maps Easy
Установка ссылки на маркере

Рекомендую протестировать такой вариант. В одном случаи, клик на маркере выдает название и описание проекта, в другом – переход на страницу с проектом.

Сохранить маркер. Справа формируется список всех маркеров карты.

Перечень маркеров карты Google Maps Easy
Перечень маркеров карты

 

Любой маркер можно отредактировать или удалить.

Чтобы внести визуальное разнообразие, эту карты стилизовали. Для этого на вкладке Map выбираем Тема Google карты – Рельеф и Стилизация карты – Bentley.

Как настроить стилизацию карты в плагине Google Maps Easy
Настройка стилизации карты

Если предварительный просмотр устраивает, сохраняем карту.

 

Отзывы клиентов

Используем ротатор отзывов Testimonial Rotator. Создаем отзывы и ротатор для Главной. Вставляем виджет. На этот раз применяем другой шаблон.

Как настроить ротатор отзывов в вордпрес
Настройка ротатора отзывов
Как настроить виджет отзывов в вордпрес
Настройка виджета отзывов

 

 

Карусель логотипов

Плагин Logo Carousel. Раздел Logos – Carousels, создаем новую карусель, обзываем Главная. Добавляем логотипы.

Как добавить логотип в плагин Logo Carousel
Добавляем логотипы клиентов

 

В разделе Logos – Manage Carousels копируем шорткод. Заодно смотрим настройки. По большей части можно оставить по умолчанию, но я поменял:

  • Logo Style – Grayscale Images, Default Color on Hover;
  • Maximum logos – 5
Как настроить отображение логотипа в плагине Logo Carousel
Настраиваем отображение логотипов

Сохраняем изменения, забираем шорт код. Переходим Внешний вид – Виджеты, ставим виджет Текст в область “Сайдбар снизу на странице Business”. Обзываем “Клиенты”, вставляем шорткод. Сохраняем и смотрим результат на Главной.

Как выглядит карусель логотипов плагина Logo Carousel
Карусель логотипов на Главной

 

Заключение

Мы создали корпоративный сайт. Затраченное время один вечер или один выходной. Полученный сайт решает задачи присутствия компании в интернет.

В инструкции не рассказано как правильно наполнять сайт. Об этом планируется отдельная статья. Если буду придерживаться плана, то она выйдет после 25 января 2017.

Кто-то уже заметил, что в самом начале запретили поисковым роботам индексировать сайт. Это сделано специально. Только когда сайт полностью заполнен качественными текстами и фотографиями, только тогда поисковым системам разрешается индексация сайта.

Заметили ошибки, неточности, недостаточно подробную инструкцию? – Пишите в комментария, обязательно исправлю. Для предпринимателей, которые испытывают трудности с инструкцией, создана закрытая группа в Facebook.

 

Дополнительно

Все ссылки, которые используются в статье

 

Скачать:

 

Плагины:

 

Настройка API:

 

Сайт, который сделан по этой инструкции: shablon-korporativ.d-sant.com

Сайт-эталон: sk-angar.ru

 

Хостинг: sweb.ru

Промокод хостинга: ITASEWTE


Понравилась статья? – Поделись с друзьями!

[schema type=”review” url=”d-sant.com” name=”Как сделать сайт на CMS WordPress” description=”Подробная и пошаговая инструкция по созданию сайта на CMS WordPress.” rev_name=”Разработка сайта” rev_body=”Пошаговая инструкцию по разработке сайта на CMS WordPress. 5800 слов,138 иллюстраций. ” author=”Андрей Унтерзегер” pubdate=”2017-01-07″ user_review=”5″ min_review=”4″ max_review=”5″ ]

На сколько полезной была статья?

Нажмите на звезду, чтобы дать оценку

Средний рейтинг 4.8 / 5. Кол-во голосов: 5

Пока нет голосов! Будьте первым, кто оценит пост.

Расскажите друзьям что вам понравилось...

Поделитесь в социальных сетях!

29 комментариев к “Базовый курс создания сайта на WordPress за один вечер самостоятельно”

  1. Николай

    За 6 часов сайт – круто! Теперь наш директор не хочет платить агентству, а требует от нас создать новый сайт за 3 дня: по дню на контент (взять со старого), дизайн (обещал сам подобрать тему) и техническую реализацию. “Спасибо большое!”
    Администратор сайта и секретарь директора.

      1. Николай

        Продукты за 3 дня не делаются, тем более без навыков и знаний, так себе “блин комом” – запросто.

    1. Владимир

      Ничего страшного. Он быстро одумается, когда увидит результат вашей работы.

    1. Еще бы порекомендовал в качестве аналога скачивания CMS – минимально затронуть вариант с предустановленными CMS на хостингах типа sprinthost.ru или timeweb.ru – где один клик и у тебя уже есть своя CMS

      1. Предустановленный WordPress есть и на sweb.ru. Но там свои подводные камни. Например БД создается автоматически без четкого имени. Потом таких БД копится 5-6 и не знаешь какая к какому сайту относится. Так что лучше с нуля своими руками.

  2. Я – полный чайник, хэлп ми. Застряла на 2 шаге. Как создать базу данных на хостинге? Бесплатно ли? Напишите плиз…

  3. Евгений

    А в чем преимущества указанного хостинга? Первый раз о таком слышу /

  4. Спасибо! Теперь, глядя в эту статью, буду переделывать то, что мне сделали в “агентстве”. И ведь говорили мне люди знающие, что я за месяц сама все сделаю. Не поверила, отдала деньги. Ну хоть переделаю сама.

  5. Добрый день, застрял в самом начале, (Загружаем файлы CMS WordPress на хостинг. Возвращаемся в созданную нами папку shablon-korporativ и находим подпапку public_html. В нее загружаем файлы дистрибутива WordPress.)-это 1500 файлов, а загрузка по 5 шт…

      1. Спасибо, уже разобрался. А установка WordPress из самого хостинга (Spaceweb)?

        1. Андрей Унтерзегер

          Да у sweb.ru есть возможность установить WordPress сразу из панели управления хостингом.

  6. Снежана

    Здравствуйте, подскажите пожалуйста, если мне нужно создать не корпоративный блог, а смешанный (тематически+личный), по вашим инструкциям я смогу это сделать? алгоритм схожий? спасибо)

  7. Снежана

    Хорошо спасибо, буду пробовать)

  8. Снежана

    Подскажите как прикрепить домен (не поддомен) к папке? спасибо)

  9. Снежана

    Может такое быть что домен уже прикреплен к папке ( так как шел бонусом с покупкой хостинга) ? парюсь помогите пожалуйста, застряла на 7 шаге)

  10. Снежана

    Подскажите пожалуйста куда перейти конкретно в п.9 чтобы появилась форма? спасибо)

    1. domen.ru/wp-admin/install.php
      Зависит от вашего домена или поддомена. Уточните у техподдержки свеба какой у вас домен. Обычно быстро отвечают.

  11. Ольга Симкова

    Здравствуйте! Делаю сайт по вашей инструкции. Я совсем чайник, поэтому совершаю глупые ошибки.. Установила плагины, когда настраивала рекапчу гугл, в доменах прописала свой домен, но совсем не подумала, что я делаю на локальном сервере. Теперь не могу в админку сайта, т.к. рекапча не пускает (((( “Домен localhost не входит в список поддерживаемых для этого ключа.”
    Подскажите, что делать?

    1. Ольга Симкова

      Все, разобралась )) Нужно было просто удалить папку с плагином из папки plugins. Пишу, чтобы другим таким же чайникам помогло)))

  12. Уведомление: Устанавливаем Google Tag Manager на сайт под управлением CMS WordPress > d`Sant | блог ☀️

Комментарии закрыты.