Find the latest bookmaker offers available across all uk gambling sites www.bets.zone Read the reviews and compare sites to quickly discover the perfect account for you.
Агентство Интермонте: продвижение магазинов в интернете. Кейсы раскрутки, большой опыт.
Хотите разместить рекламу?
Главная » Продвижение интернет-проектов » Как создать корпоративный сайт на WordPress с нуля. Подробная инструкция

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

Андрей Унтерзегер, директор студии Dsant, написал большую инструкцию по созданию сайта на движке 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?

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

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

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

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

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

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

    Установка WordPress

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

    Жмем синюю кнопку
  • Распаковываем архив

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

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

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

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

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

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

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

    Поздравляю! Первый шаг сделан.
    Теперь жмем “Войти» и заходим в панель администрирования сайта.
  • Первые настройки WordPress

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


    Раздел Настройки сайта

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

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

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

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

      Настраиваем постоянные ссылки

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

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

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

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


    Добавить плагин

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


    Ищем нужный плагин

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


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

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


    Плагин установлен и функционирует

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

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


    Деактивация плагина
    и удаление

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

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

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

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

    Akismet

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


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


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

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


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

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


    Снижаем цену до бесплатного

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


    Наш API

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

    Loginizer

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


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

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


    Предупреждения от Loginizer

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


    Меняем права доступа к файлам

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

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

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


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


    Добавляем свой IP в белый лист

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


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

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

    reCAPTCHA

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

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


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


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


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

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


    Вот они ключики

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

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


    Наша капча

    BackUpWordPress

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

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


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


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

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

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

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

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


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

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


    Вот они резервные копии

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

    Sucuri Security

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


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


    Генерируем API key
    Генерация ключа API

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


    Запускаем сканирование

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


    Предупреждения после сканирования

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

    Google Maps Easy

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


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

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


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

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


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


    Полученный ключ

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


    Вставляем ключ здесь

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

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

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

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


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

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

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


    Находим 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

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

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

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


    Подсказка адреса в Google Maps

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


    Установка ссылки на маркере

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

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


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

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

    Чтобы внести визуальное разнообразие, эту карты стилизовали. Для этого на вкладке 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

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

    Источник: pr-cy.ru

    Читайте также

    Google AdWords будет по-новому расходовать рекламные бюджеты пользователей

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