Как создать корпоративный сайт на WordPress с нуля. Подробная инструкция

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

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

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

Содержание:

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

• Установка CMS WordPress
• Первые настройки WordPress
• Установка плагинов — обязательный набор
  • Как установить плагин
  • Как удалить плагин
  • Список обязательных для установки плагинов
• Настройка плагинов
  • Akismet
  • Loginizer
  • reCAPTCHA
  • BackUpWordPress
  • Sucuri Security
  • Google Maps Easy
• Подключение темы

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

• Планирование
• Создаем страницы
  • Как создать страницу
  • Как создать рубрику
  • Как создать записи
• Организуем сайт
  • Создаем меню сайта
  • Название сайта и логотип
  • Настройки цвета
  • Настраиваем виджеты
  • Форма обратной связи
• Страница О компании
  • Отзывы
  • Сертификаты
  • Наши сотрудники
  • Как создать галерею
  • Как создать текстовые отзывы
  • Как сделать список сотрудников
  • Создаем блок Контакты
• Главная страница
  • Слайдер
  • Услуги
  • Наши проекты
  • Призыв к действию
  • Выполненные объекты
  • Карта выполненных объектов
  • Отзывы клиентов
  • Карусель логотипов

Заключение

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

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

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

Вложения

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

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

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

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

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

Установка WordPress

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

   

2. Распаковываем архив

   

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

   

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

   

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

   

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

   

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

   

9. Установка WordPress. Переходим [домен вашего сайта]/wp-admin/install.php и видим форму:

   

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

   

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

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

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

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

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

  

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

  

• Медиафайлы. Оставляем настройки по умолчанию.
• Постоянные ссылки. Выбираем п. “Произвольно" и прописываем: /%category%/%postname%/

  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Loginizer

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

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

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

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

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

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

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

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

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

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

reCAPTCHA

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

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

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

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

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

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

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

BackUpWordPress

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

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

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

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

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

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

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

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

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

Sucuri Security

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

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

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

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

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

Google Maps Easy

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Надо:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Макет сайта — широкий макет с шириной контента 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отзывы

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

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

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

Сертификаты

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• <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 размещаем в области «Сайдбар по середине слева на странице Business»

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

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

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

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

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

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

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

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

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

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

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

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

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

• Logo Style — Grayscale Images, Default Color on Hover;
• Maximum logos — 5

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

Заключение

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

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

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

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

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

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

Скачать:

• дистрибутив WordPress

Плагины:

• Akismet
• Cyr to Lat enhanced
• Google XML Sitemaps
• Header and Footer
• Loginizer
• reCAPTCHA
• BackUpWordPress
• Sucuri Security
• Google Maps Easy
• Carousel Horizontal Posts Content Slider
• Contact Form by Supsystic
• Envira Gallery Lite
• Logo Carousel
• Team Members
• Testimonial Rotator
• TinyMCE Advanced

Настройка API:

• Akismet
• reCAPTCHA
• Google Maps Easy

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

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

Первоисточник