Как создать корпоративный сайт на 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?

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

Вложения

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

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

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

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

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

Установка WordPress

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

    Жмем синюю кнопку
  2. Распаковываем архив
    Содержимое архива 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

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

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

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

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

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

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

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

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

В поиске задаем название плагина, жмем 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

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

Регистрация плагина Akismet

Переходим на сайт за ключом
Получение ключа Akismet

Жмем большую кнопку
Форма регистрации в сервисе Akismet

Стандартная регистрация

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

Тарифные планы плагина Akismet

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

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

Выбираем бесплатный вариант плагина Akismet

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

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

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

Наш API

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

Loginizer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

reCAPTCHA

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

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

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

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

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

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

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

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

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

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

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

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

Наша капча

BackUpWordPress

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

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

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

Настройки для BackUpWordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Надо:

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

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

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

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

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

Перечень меню, которые есть на сайте

Все созданные меню для сайта

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

Собираем меню в вордпрес

«Хватай и тащи» пункты меню

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

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

Меню для подвала

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

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

Боковое меню в вордпрес

Меню Услуги

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

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

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

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

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

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

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

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

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

Что такое фавикон

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

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

Отображаем заголовок и логотип

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

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

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

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

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

Как выглядит верхнее меню

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

Нижнее меню

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

Виджет в 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 в область “Меню справа», указываем заголовок и выбираем созданную форму.

Установка виджета в боковое меню

Размещаем виджет формы обратной связи
Внешний вид формы обратной связи

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

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

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

Отзывы

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

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

Текстовые отзывы

Пример отзыва

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

Сертификаты

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

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

Сертификаты компании

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

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

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

Персонализация сотрудников

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

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

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

Добавление галереи благодарственных писем в плагине 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.

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

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

Скачать:

  • дистрибутив 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

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

WordPress используют Sony Music, The New Yorker, Reuters, TechCrunch, Республиканская партия США, Fortune, многие другие крупные СМИ и организации. Даже Rolling Stones и Snoop Dogg оценили этот движок.

Значит и вам стоит! Переходим к пошаговому руководству.

WordPress – самая распространенная на сегодняшний день CMS. По данным независимого агентства Web Technology Surveys, около 64,8% всех сайтов в мире использует CMS WordPress. Вот главные причины ее успеха:

  • бесплатный «движок» – CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL), так что его можно свободно использовать даже в коммерческих целях;
  • неограниченные возможности – с помощью WordPress можно создать интернет-магазин, личный блог, корпоративный сайт, информационный портал, отраслевой ресурс, галерею мультимедиа;
  • гибкая настройка внешнего вида и функциональности – доступны платные и бесплатные шаблоны, с помощью плагинов можно решать технические задачи, обеспечивать необходимую функциональность;
  • простота администрирования – чтобы работать с WordPress, не нужны специальные знания, все интуитивно понятно;
  • компании предоставляют услугу автоматической установки WordPress на хостинг – не нужно самому искать на официальном сайте дистрибутив, скачивать его и заниматься установкой. Например, Beget, предлагает установить на выбор WordPress или Joomla. Для установки CMS достаточно пары кликов. Мелочь, а приятно.

Beget позволяет создать виртуальный сервер с WordPress в два-три клика

WordPress – универсальный движок для блогов и других контентных сайтов

Шаг № 1: Выбираем хостинг и регистрируем домен

Делиться фотографиями котиков или вести дневник бодибилдера можно на бесплатном хостинге wordpress.com. Но если у вас коммерческий проект и вы планируете зарабатывать с его помощью – выбирайте платный хостинг.

Чтобы выбрать хостинг-провайдера, изучите гайд в TexTerra Daily. Если на это совсем нет времени, можете обратиться в Reg.ru, Beget, Netangels – этим провайдерам мы доверяем.

Зарегистрировать домен вам тоже поможет хостер. Достаточно придумать доменное имя, убедиться, что оно свободно, и оплатить регистрацию.

Выбирайте доменное имя, частично или полностью совпадающее с названием сайта. Например, для сайта «Одноклассники» хорошие доменные имена – odnoklassniki.ru или ok.ru. Понятно, что имя vk.com этому ресурсу не подходит.

Используйте максимально короткое доменное имя. Владельцам смартфонов сложно ввести в строку браузера длинный адрес, поэтому лучше использовать имя vk.com вместо vkontakte.ru.

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

Выбор доменной зоны не влияет на технические характеристики ресурса или позиции в поисковой выдаче. Однако теоретически этот параметр может влиять на доверие аудитории. При прочих равных пользователи охотнее верят сайтам с адресом vasya-pupkin.ru или vasya-pupkin.com, чем ресурсам типа vasya-pupkin.wordpress.com или vasya-pupkin.blogspot.com. Поэтому для коммерческих проектов старайтесь выбирать домены верхнего уровня, например, .com, .info, .org, .net, .ru, .ua, .by и т.п. Обратите внимание и на такие домены первого уровня, как, например, .club, .guru, .ninja, .expert и другие.

Проверяем доступность домена на REG.RU

На сайте регистратора вы можете проверить доступность любого интересующего вас домена

Шаг № 2: Устанавливаем WordPress своими руками

После покупки хостинга и регистрации доменного имени установите WordPress. Обратите внимание: некоторые хостинг-провайдеры предлагают тарифные планы с предустановленной CMS. Если вы выбрали один из них, сразу переходите к третьему шагу руководства. Если приобрели хостинг без установленного движка, следуйте инструкциям.

Перейдите на сайт WordPress, откройте раздел Download и найдите последнюю версию дистрибутива. Скачайте ее:

Скачайте последнюю версию WordPress со страницы Download

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

Распакуйте архив.

Распаковали архив с дистрибутивом WordPress

Распакованный архив нужно будет перенести в корень сайта

С помощью FileZilla или другого FTP-клиента загрузите файлы WordPress в корневую папку или в субдиректорию. В корневой папке находится файл index.html. Чтобы создать субдиректорию, нужно поместить папку с файлами сайта в корневой каталог. В первом случае сайт будет доступен по адресу www.vash-site.ru. Во втором случае вы установите WordPress на существующий сайт. Он будет доступен по адресу www.vash-site.ru/wordpress/.

Можно использовать FTP-клиент или встроенный файловый менеджер хостинга

Скопируйте разархивированный дистрибутив в корневую папку сайта

Установите WordPress. Для этого откройте ссылку на сайт в браузере. Укажите информацию для подключения к базе данных. Их должен предоставить хостинг-провайдер.

Указываем, как подключиться к базе данных

Заполните название БД, имя пользователя / пароль, укажите сервер базы данных

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

Указываем данные сайта

Заполните данные о сайте

Если все сделано верно, вы увидите следующее сообщение:

WordPress установлен

Мы успешно установили WordPress на свой сайт вручную

По основному URL должен открываться сайт.

Новый сайт, который открываться в браузере

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

Вы только что создали сайт на WordPress. Теперь можете войти в панель администрирования и приступить к настройке.

Административная панель WordPress позволяет создать сайт с нуля

Мы установили несколько плагинов, чтобы добавить недостающие функции

Шаг № 3: Выбираем подходящую тему для WordPress

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

Лучше выбрать бесплатную или платную тему?

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

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

Какая тема лучше: русскоязычная или англоязычная?

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

Как найти подходящий шаблон в каталоге?

Воспользуйтесь фильтром в каталоге тем. Отметьте нужные опции и примените фильтр.

Или: используйте дизайн-шаблон из подборки «Текстерры».

Фильтр характеристик в разделе Темы поможет выбрать дизайн исходят из необходимых функций или особенностей разметки

WordPress обладает одной из самых впечатляющих по размеру коллекцией бесплатных тем

Как установить тему WordPress?

Есть два способа. Первый: в админке выберите раздел «Внешний вид – Темы». Нажмите кнопку «Добавить новую».

Устанавливаем тему WordPress из каталога

Нажмите Добавить новую, чтобы установить новый дизайн сайта

Найдите нужную тему по названию или с помощью фильтра характеристик.

Ищем нужную тему

Выбираем подходящую тему

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

Просматриваем, устанавливаем и активируем тему

Если тема подошла, нажмите Установить

Второй способ: скачайте дистрибутив выбранной темы на компьютер. Это должен быть архив в формате .zip. В разделе админки «Внешний вид – Темы – Добавить новую» загрузите и установите шаблон. После загрузки активируйте его.

Загружаем архив с темой

Чтобы открыть меню ручной загрузки тем, намите кнопку Загрузить тему (напротив надписи Добавить темы)

Вы установили и активировали понравившийся шаблон. Теперь можно приступить к настройке.

Какую тему выбрать для нового проекта? Существуют ли какие-то существенные различия, кроме дизайна, которые влияют на работу сайта? На все эти вопросы даст ответы гайд «100 лучших бесплатных тем для WordPress».

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

Как русифицировать тему WordPress?

Русифицировать тему можно несколькими способами.

Вручную

Файлы темы скачиваются на компьютер, открывается любой текстовый редактор, текст кода правится вручную. Требует много времени, сноровки и внимательности. Такой способ не рекомендуется опытными пользователями WordPress, потому что присутствует человеческий фактор: велика вероятность ошибки. Если вдруг она закрадется в код, сайт перестанет корректно работать. В случае отсутствия резервной копии восстановить работу сайта будет проблематично, а перевод придется переделывать заново.

С помощью плагинов

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

Например, можно использовать плагин Loco Translate. После установки и активации надстройки интерфейс для перевода шаблонов появляется в админке сайта. Он тоже работает с языковыми файлами .po и .mo вашей темы, но все делается прямо в браузере.

Loco Translate позволяет русифицировать шаблон из админки

Loco Translate – удобное редактирование файлов локализации WordPress

С помощью сторонних компаний

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

С помощью специальных программ

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

Русифицировать тему удобнее всего с помощью бесплатной программы Poedit. Скачайте и установите ее на компьютер, а затем загрузите с вашего сайта на компьютер языковые файлы выбранного шаблона с помощью FTP-клиента, например, FileZilla. Также это можно сделать с помощью плагинов, например, File Manager. Если вы его установили, действуйте по следующему описанному ниже алгоритму.

В консоли выберите меню FileManager – Configuration. Настройте конфигурации, как указано на иллюстрации.

Настраиваем менеджер файлов

Отметьте эти чекбоксы

В меню FileManager – FileManager выберите папку wp-content – themes.

Выбираем путь wp-content – themes

Найдите папку, которую нужно руссифицировать. В нашем случае – это wp-content

Выберите папку темы, которую хотите русифицировать. В ней откройте папку languages.

Выбираем папку темы и открываем в ней папку languages

Нашли папку languages

Скачайте на компьютер файлы en.mo и en.po. Если таких файлов нет, скачайте на компьютер файл с расширением .pot.

Скачиваем языковые файлы

Нас интересует файл выбранной темы – realistic.pot

Откройте программу Poedit и выберите опцию «Создать новый перевод».

Создаем новый перевод

Выберите этот пункт

Откройте файл перевода и укажите код языка.

Указываем код языка

Настраиваем язык перевода

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

Переводим текст

Добавьте сюда текст на русском языке

Сохраните перевод. Программа загрузит на жесткий диск вашего ПК два файла: ru_Ru.mo и ru_RU.po. С помощью функции Upload files загрузите файлы в папку languages вашего шаблона.

Загружаем файлы

Эти файлы мы успешно загрузили в менеджер

Вы русифицировали шаблон.

Для желающих ускорить процесс перевода, а также посредственно владеющих английским языком или не владеющих им подойдет программка Seraphinite Typing Assistant. Пользоваться ей нужно в паре с Poedit.

Как настроить тему WordPress

Каждый шаблон имеет собственные настройки. Описание настроек дефолтной темы Twenty Nineteen поможет понять закономерности и настроить выбранный шаблон.

В консоли WordPress выберите меню «Внешний вид – Настроить». Откроется страница настройки темы или кастомайзер. Доступные пункты настройки можно увидеть в меню в левой части экрана.

Открываем настройки темы

Здесь настраивается дизайн темы

В разделе «Свойства сайта» загрузите логотип, укажите название и краткое описание сайта, добавьте фавикон.

Указываем свойства сайта

Задайте название и краткое описание сайта

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

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

Мы задали цвет темы по умолчанию

В разделе «Меню» настройте меню сайта. Нажмите кнопку «Создать меню».

Настройте внешний вид основного и верхнего меню

При необходимости можно добавить меню для ссылок на соцсети

Вы можете создать новое меню. Для этого нажмите одноименную кнопку (см. скриншот выше).

Укажите название меню и выберите область, где оно будет размещаться

Создаем новое меню в теме Twenty Nineteen

Добавьте в меню нужные страницы и нажмите кнопку «Опубликовать».

Добавляем в меню страницы

Кастомизируем внешний вид меню и страницы в нем

В разделе «Виджеты» добавьте на сайт виджеты. Обратите внимание, что в дефолтной теме WordPress есть сайдбар. Если он вам не нужен, удалите боковые виджеты.

Что еще важно учесть?

  • Выбирайте тему с адаптивным дизайном. Адаптивный дизайн одинаково хорошо отображается на всех устройствах – десктопах, планшетах, смартфонах – и динамически подстраивается под заданные размеры окна браузера.
  • Не гонитесь за функционалом. Остановите выбор на теме, которая подходит под ваши задачи. Тема, перегруженная функционалом, будет работать медленнее, что негативно скажется на поисковом ранжировании. Поисковики «любят» быстрые сайты.
  • Обратите внимание на количество загрузок и частоту обновлений. Если тема обновляется редко или вообще не обновляется, лучше обойти ее стороной. Такая тема вряд ли будет соответствовать требованиям времени к дизайну, SEO, безопасности.

Шаг № 4: Настраиваем сайт на CMS WordPress

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

Настраиваем CMS WordPress

Войдите в административную панель WordPress и выберите меню «Настройки». Укажите необходимые данные в каждом разделе настроек.

В разделе «Общие» укажите название и краткое описание сайта. Эта информация будет отображаться для пользователей. В полях «Адрес WordPress» и «Адрес сайта» укажите URL ресурса. Выберите часовой пояс, формат даты, язык сайта. Оставьте поле «Членство» пустым, так как на первом этапе развития сайта на нем захотят регистрироваться только боты и злоумышленники.

Указываем общие настройки

Это глобальные настройки сайта

В разделе «Написание» выберите необходимые параметры. В начале работы подойдут дефолтные настройки форматирования, главной рубрики и формата записей. Если хотите публиковать заметки через электронную почту, введите необходимые данные: адрес сервера, порт, логин и пароль. Однако новичкам лучше публиковать посты в административной панели WordPress.

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

Выбираем настройки написания

Настраиваем рубрики, формат записей, публикацию через e-mail

Каждый раз при нажатии на кнопку «Обновить», оповещаются и выбранные сервисы. Чтобы домен не попал в списки ping-спамеров, есть плагин WordPress Ping Optimizer. Установите его и настройте частоту обмена данными об изменениях.

В разделе «Чтение» укажите, что должно отображаться на главной странице сайта. Если создаете блог, на главной должны быть последние записи. Для сайта со статическими страницами в качестве главной выберите одну страницу и создайте отдельную страницу «Блог», на которой будут отображаться посты. Посмотреть, как это выглядит, можно на сайте проекта TeachLine.

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

Указываем настройки чтения

Укажите метод формования главной страниц и сопутствующие настройки

В разделе «Настройки обсуждения» выберите подходящие параметры. В большинстве случаев подойдут дефолтные настройки.

Уделите внимание полям «Модерация комментариев» и «Черный список». Можете указать признаки, по которым комментарии будут поставлены в очередь на модерацию перед публикацией или окажутся в списке «Спам». Эти настройки сработают, если вы пользуетесь дефолтными комментариями WordPress.

Настраиваем настройки обсуждения

Задайте настройки по умолчанию, касающиеся секции комментариев сайта

В разделе «Медиафайлы» оставьте настройки по умолчанию.

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

Выбираем глобальную структуру ссылок сайта

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

Шаг № 5: Решаем практические задачи с помощью плагинов для WordPress

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

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

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

Как с помощью плагинов обеспечить безопасность сайта на WordPress

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

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

Чтобы регулярно создавать резервные копии сайта, воспользуйтесь одним из перечисленных плагинов:

  • WP Database Backup – пока не переведен на русский;
  • BackUpWordPress – есть русская версия, но реже обновляется;
  • Backup and Restore WordPress – не русифицирован.

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

Находим и устанавливаем плагин WP Database Backup

Кликните Установить

Нажмите кнопку «Установить». После установки активируйте плагин. Теперь настройте параметры резервного копирования. Выберите меню «Инструменты – WP DB BackUp». Нажмите Create New Database BackUp. Вы создали резервную копию по требованию.

Создать бэкап текущей версии сайта, благодаря WP Database Backup, можно за несколько секунд

Нажмите синюю кнопку Create New Database BackUp

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

Включаем создание резервных копий по расписанию

Удобно, что бэкап будет формироваться автоматически (каждый час, дважды в день, ежедневно или реже)

На вкладке Destination включите автоматическое сохранение архива на Google Drive или отправку на электронную почту.

Настраиваем отправку резервных копий на email администратора

В строке Email ID укажите свой адрес электронной почты

Чтобы защитить сайт от несанкционированного доступа или взлома методом перебора или брутфорсинга, воспользуйтесь одним из этих плагинов:

  • Loginizer Security – один из самых популярных плагинов-защитников, надежно защищает сайт от взлома методом перебора или брутфорсинга;
  • Login Lockdown – можно задать максимальное количество попыток входа с одного IP в единицу времени, продолжительность такой блокировки.

Есть плагины, которые объединяют в себе сразу несколько функций защиты. Это удобно. Рекомендую обратить внимание на комплексные решения по защите сайта, например, на плагин iThemes Security. У iThemes Security широкий функционал для защиты от внешних угроз:

  • создание резервных копий;
  • обнаружение ошибок с кодом 404;
  • блокировка отдельных пользователей;
  • защита от хакерских атак;
  • отслеживание изменений на сайте;
  • скрытие страницы входа в административную панель;
  • SSL-шифрование;
  • принудительное использование надежных паролей;
  • множество возможностей для тонкой настройки системы «под себя».

Настраиваем защиту от брутфорсинга при помощи Loginizer Security

Главные настройки Loginizer Security

Как бороться со спамом на сайте WordPress

Плагины для борьбы со спамом актуальны, если вы пользуетесь встроенным механизмом комментариев WordPress. Сторонние системы, например, Disqus, защищаются от этого самостоятельно.

Защититься от спама можно с помощью Akismet или Antispam Bee. После установки Antispam Bee плагин работает в фоновом режиме. Обычно подходят дефолтные настройки, а если нужно что-то поменять, перейдите в меню админки «Настройки – Antispam Bee».

Antispam Bee добавляет в сводку админпанели WP полезный график спам-атак на ваш сайт

Antispam Bee эффективно защищает сайт от спамных комментариев

Еще один хороший плагин, который использует технологию reCaptcha компании Google, называется Advanced noCaptcha & invisible Captcha – спам фильтруется с помощью искусственного интеллекта. Для настройки необходимо зарегистрировать свой сайт в Google, выбрать версию капчи и получить два ключа – обычный и секретный, чтобы использовать их с плагином.

Капча защищает сайт от спама

Пример капчи, которую добавил Advanced noCaptcha & invisible Captcha в секцию комментариев

Как обеспечить SEO сайта на WordPress

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

  • создание и обновление карты сайта;
  • канонизация URL;
  • оптимизация title страниц;
  • автоматическая генерация мета-данных страниц;
  • блокирование индексации дублированного контента;
  • создание микроразметки страниц;
  • добавление файлов .htaccess и robots.txt.

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

  • Google XML Sitemaps;
  • Google Sitemap by BestWebSoft.

Установите и активируйте выбранный плагин, например, Google XML Sitemaps.

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

Страница настроек плагина-генератора карты сайта

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

Автоматическая генерация карты сайта занимает считанные секунды

Создали карту сайта, благодаря XML Sitemaps

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

Для технической оптимизации ресурса воспользуйтесь одним из следующих плагинов:

  • All in One SEO Pack;
  • WordPress SEO by Yoast.

Установите и активируйте выбранный плагин, например, All in One SEO Pack. Используйте настройки по умолчанию, если вы только знакомитесь с WordPress. Если считаете себя продвинутым веб-мастером, можете изменить некоторые настройки SEO-модуля. Для этого выберите меню All in One SEO в консоли движка.

Анализ SEO-контента можно запустить как в классическом редакторе WP, так и в «Гутенберге»

Новый интерфейс All in One SEO Pack

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

В разделе «Основные настройки» уберите флажок напротив пункта Use Schema.org Markup. Размечать страницу лучше с помощью отдельного плагина.

Если в качестве главной используете страницу записей, в разделе «Настройки главной страницы» укажите title, description и keywords. Если в качестве главной используется статическая страница, установите флажок в поле «Включить».

Настраиваем метаданные главной страницы

Статическую главную можно использовать (или не использовать) в качестве главной страницы

В разделе «Настройки для вебмастера» укажите код верификации ресурса в кабинете для вебмастеров Google. Для этого добавьте в «Инструменты для вебмастеров» новый ресурс, выберите альтернативные методы верификации. Скопируйте часть кода HTML, указанную на иллюстрации.

Нам нужен код, который используется для подтверждения права собственности в Google Search Console

Скопируйте в буфер обмена этот метатег

Вставьте ее в поле «Инструменты вебмастера Google» на странице настройки плагина.

Вставляем код на странице настройки плагина

Вставьте код в строку «Инструменты вебмастера Google»

Сохраните параметры плагина. В кабинете для веб-мастеров нажмите кнопку «Подтвердить».

Для разметки страниц воспользуйтесь одним из следующих плагинов:

  • Связка WPSSO и WPSSO JSON. Первый плагин базовый, а второй представляет собой расширение. С помощью базового решения на сайт можно добавить разметку Open Graph. С помощью JSON-LD реализуется разметка Schema.org.
  • WP SEO Structured Data Schema. С помощью данного плагина на сайт можно добавить несколько типов разметки Schema.org, включая Article, BlogPosting и Review. Разметка реализуется с помощью JSON-LD.
  • Плагин Schema App. С помощью этой программы на сайт можно добавить разные типы разметки Schema.org. Она реализуется через JSON-LD. Бесплатная версия поддерживает базовые типы разметки. Также для разметки можно использовать онлайн-генератор, если вы хорошо понимаете базовые принципы разметки Schema.org. Установите и активируйте плагины WPSSO и WPSSO JSON. В консоли на странице настроек плагинов в разделе Essential Settings укажите информацию о сайте, а также сведения для разметки Open Graph. Не меняйте другие настройки.

Указываем информацию о сайте и сведения для разметки Open Graph

Заполните главные сведения о сайте

Перейдите в раздел Google and Schema. В полях Organization Logo Image URL и Organization Banner URL укажите URL логотипа и баннера сайта. Эти изображения могут использоваться на странице поисковой выдачи.

Указываем ссылки на логотип и баннер

Дайте URL на изображения логотипа и баннера компании

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

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

Тип разметки BlogPosting – производное Article. Кроме BlogPosting к частностям Article относится тип разметки News Article или «Новость». То есть BlogPosting содержит все семантические данные разметки Article.

Используйте тип BlogPosting, если публикуете небольшие заметки, личные наблюдения и впечатления, как в «Живом Журнале». Тип Article больше подойдет для обзоров, аналитических статей, руководств, как в блоге «Текстерры». Для статических страниц и страниц медиафайлов нужно указывать тип WebPage.

Выбираем тип разметки для страниц

Выберите тип данных

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

Разметка BlogPosting добавлена на все страницы публикаций

Краулер увидит тип данных BlogPosting и контент на странице будет проиндексирован корректно

Что делать, если вы публикуете материалы разного типа: лонгриды, небольшие заметки и новости? В этом случае для каждой публикации лучше выбрать подходящую разметку. Вместо надстройки WPSSO JSON воспользуйтесь плагином WP SEO Structured Data Schema.

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

Обязательные параметры для каждого типа данных будут разными

Недостаток плагина – необходимость размечать каждую публикацию вручную. А к преимуществам можно отнести поддержку дополнительных типов разметки, например, Review, Product и Aggregate Ratings. Бесплатная версия WPSSO JSON не поддерживает эти типы.

Как повысить функциональность и юзабилити ресурса

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

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

Начните улучшение юзабилити с латинизации URL сайта. Обратите внимание на ссылку, которую CMS генерирует по умолчанию. В ней есть кириллические символы.

Для пример мы создали тестовую запись

Привет, мир!

Скопируйте URL и вставьте его в комментариях на сайте или в текстовом редакторе.

Ссылка превратилась в набор символов

Семантический URL нужен как раз, чтобы не было такого результата

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

Эту проблему можно решить с помощью Cyrlitera – транслитерация ссылок и имен файлов или аналогичного плагина. Для этого достаточно установить и активировать выбранный модуль.

Теперь все URL вашего сайта выглядят по-человечески

Сделали семантический URL

Добавьте на страницы кнопки шеринга социальных сетей. Эту задачу можно решить разными способами. Например, установите и активируйте плагин Head, Footer and Post Injections. Это полезная надстройка: с ее помощью можно добавлять произвольный код на все или отдельные страницы сайта.

Выберите сервис шеринга, например, Pluso. Настройте блок «Поделиться» и скопируйте предложенный системой код. В админке сайта перейдите в меню «Настройки – Header and Footer». Откройте вкладку Posts. Вставьте код после или перед публикацией.

Код можно вставить как после, так и до контента

Вставьте сюда код кнопок шеринга

Сохраните изменения, проверьте, как отображаются кнопки.

Шаг № 6: Устанавливаем коды сервисов аналитики и подключить сайт к кабинетам для веб-мастеров

При установке плагина All in One SEO Pack вы уже подключили ресурс к кабинету для вебмастеров Google. Подключить сайт к «Вебмастеру», «Метрике» и Google Analytics поможет установленный ранее плагин Head, Footer and Post Injections.

Зарегистрируйте сайт в указанных сервисах. Инструкции по регистрации можно найти в гайдах «Текстерры» по «Яндекс.Вебмастеру», «Метрике» и Google Analytics.

После регистрации в сервисах скопируйте коды отслеживания или теги верификации и вставьте их на сайт. Для этого перейдите по вкладке Head and footer на странице настроек плагина.

Подключаем коды отслеживания и верификации

Сюда нужно вставить код Google Tag Manager (или другой веб-аналитики)

Подключить любой внешний сервис можно с помощью диспетчера тегов Google. Код Tag Manager нужно установить в разделы head и body каждой страницы сайта с помощью Head, Footer and Post Injections. О работе с диспетчером тегов можно прочитать в нашем руководстве.

Шаг № 7: Создаем страницы и записи на сайте под управлением WordPress

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

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

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

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

Придерживайтесь описанного ниже алгоритма.

Выберите меню «Страницы – Добавить новую».

Выбираем меню добавления страницы

Чтобы создать новую страницу нажмите кнопку Добавить новую

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

Редактор сам подсказывает, что делать

Добавляем новый элемент страницы

Например, чтобы вставить фотографию, выберите соответствующий блок.

Добавляем новое изображение

Чтобы добавить картинку кликните по этой иконке

Выберите источник фото и положение картинки на странице.

Загружаем фото или вставляем картинку из галереи

Нажмите Upload, Media Library или Insert from URL

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

После редактирования опубликуйте страницу.

Публикуем страницу

Нажмите кнопку Publish, чтобы опубликовать запись

Проверьте корректность отображения контента. Если нужно, отредактируйте страницу.

Как создать публикацию

Создание публикации рассматривается на примере классического редактора. С пятой версии WordPress, его придется установить как отдельный плагин. Конечно, как и для страниц, можно использовать новый «Гутенберг», но он не настолько гибкий.

Чтобы добавить запись, выберите меню «Записи – добавить новую».

Большинство шаблонов поддерживает несколько форматов записи. Выберите подходящий.

Выбирайте подходящий формат поста

По умолчанию используется базовый шаблон

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

Выбираем и создаем рубрики

Для любой записи можно назначить одну или несколько рублик

Классический редактор поддерживает два формата редактирования: визуальный или WYSIWIG (от англ. What You See Is What You Get, «что видишь, то и получаешь») и «Текст» с возможностью использовать HTML. Выберите подходящий. Добавьте заголовок и контент.

Укажите title и description, выберите изображение записи. Опубликуйте страницу.

Страница готова к публикации

Не забудьте задать уникальный заголовок и описание страницы

Шаг № 8: Подключаем SSL-шифрование к сайту

Наверняка вы замечали, что у одних сайтов, работающих по протоколу HTTPS, в строке браузера перед названием домена светится зеленый замочек, а у других, работающих по HTTP, – отпугивающая надпись «Не защищено». Чтобы исчезла эта надпись нужно перевести сайт на HTTPS, подключив SSL-шифрование.

Пример сайта, который работает только по HTTP-протоколу

Обратите внимание на иконку «Не защищенное подключение»

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

Чтобы использовать защищенное соединение, на сервере, где находится сайт, устанавливается SSL-сертификат. Они бывают платные и бесплатные.

Для новичков подойдет бесплатный сертификат от Let’s encrypt. Он выпускается на 3 месяца с возможностью продления. Многие хостеры, предоставляют возможность выпустить как бесплатный, так и платный SSL-сертификат.

Инструкцию по установке сертификата можно запросить у хостера или компании, выпустившего его.

Нужно ли знать в совершенстве HTML, PHP, CSS для работы с WordPress?

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

Можно ли на WordPress создать интернет-магазин?

Да, можно. У WordPress имеется множество сторонних разработок и модулей, в том числе для электронной коммерции, например, плагин WooCommerce. Но следует понимать, что WordPress – одна из самых популярных админок в мире. Это означает, что и уязвимости в ней изучены лучше, чем в других админках. Риск взлома выше, поэтому проблеме безопасности придется уделять повышенное внимание.

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

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

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

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

Юзабилити для чайников. Часть 5: как работать с прототипами и заботиться об интересах мобильных пользователей

60+ ресурсов с бесплатными иконками, логотипами и шрифтами

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

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

Большинство людей, желающие что-либо приобрести, начинают искать это в интернете. И поэтому было бы неплохо предприятию иметь свой продвинутый проект, чтобы наравне с конкурентами и участвовать в поиске в сети.

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

сделать сайт компании на wordpress

Оглавление

  • 1 WordPress для сайта компании
  • 2 Необходимые элементы на сайте компании
    • 2.1 Обратная связь
    • 2.2 Страница с адресом
    • 2.3 Интернет-магазин
  • 3 Продвижение сайта компании
    • 3.1 SEO
    • 3.2 Контекстная реклама
    • 3.3 Социальные сети

WordPress для сайта компании

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

Скорее всего управлять сайтом компании будет несколько человек. Это могут быть редактор, менеджер, копирайтер, технический специалист, SEO специалист и другие. Штат может быть большой, всё зависит от потребностей. Так вот, WordPress позволяет создать многопользовательский сайт, и у каждого из пользователей будут свои права и возможности внутри панели управления. Это удобно.

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

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

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

Необходимые элементы на сайте компании

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

Обратная связь

Для реализации формы обратной связи на WordPress можно использовать разнообразные плагины. Кроме форм можно указать и другие каналы связи. Каждый посетитель выберет удобный вариант.

Обратная связи на сайте компании особенно важна. Поэтому можно сделать форму не только традиционно на отдельной странице, но и вывести и какой-либо плавающий виджет с обратной связью.

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

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

Интернет-магазин

Элементы для продажи могут быт нужными и полезными на сайте компании. Многие посетители заходят совершить покупку непосредственно на сайте. Для нужно организовать интернет-магазин.

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

Интернет-магазин может быть большим и с многотысячным ассортиментом, а может состоять лишь из нескольких товаров. Конечно же, у магазина может быть и возможность онлайн-покупки. Всё это можно сделать на WordPress.

Продвижение сайта компании

Чтобы быть наравне с конкурентами, нужно усиленно продвигать проект. Это позволит занять своё место в интернет-рынке. Для продвижения сайта компании на WordPress есть несколько эффективных и проверенных методов. Можно использовать их по отдельности или в комплексе.

SEO

SEO — это наполнение сайта SEO оптимизированным контентом. Это самый эффективный метод продвижения. Поисковики будут индексировать страницы с полезными статьями и показывать их на хороших позициях в поисковой выдаче. Таким образом посещаемость увеличится.

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

Контекстная реклама

Сервисы Яндекс Директ и Google Adsense — это хороший способ продвижения сайта компании, если решено использовать бюджет для данной цели. При правильном подходе можно добавиться отличных результатов. Особенно важна возможности таргетинга рекламы, то есть её отображение непосредственно членам целевой аудитории, а не всем подряд.

Социальные сети

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

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

Просмотров 80.1к. Обновлено

Привет. Меня зовут Илья. В этой статье я собрал пошаговую инструкцию по созданию сайта на CMS WordPress. С Вордпресс я работаю более 8 лет (мои кейсы) и эта статья является выжимкой моих знаний в кратком изложении .

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

WordPress крутой движок, с помощью него можно разработать сайт любого формата:

  1. Блог
  2. Новостной сайт
  3. Лендинг (мой гайд про лендинг)
  4. Сайт визитка
  5. Интернет магазин (мой гайд про разработку магазина)
  6. Портфолио
  7. Онлайн школа (мой гайд про школу)

Моя видеоинструкция по разработке сайта

Определяемся с тематикой

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

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

Для вдохновения и идей поищите похожие сайты.

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

Выбрали тематику? Отлично, идем дальше.

Выбор домена и хостинга. Регистрация

Домен

Домен (доменное имя) — это имя сайта, то название, по которому посетители будут попадать на ваш блог. У моего сайта домен ichigarev.ru, у вас будет свой.

ЕСЛИ ВАМ НУЖЕН САЙТ, ТО…

Я могу его сделать для вас. Меня зовут Илья — являюсь автором блога, занимаюсь разработкой сайтов на WordPress более 10-ти лет. Специализируюсь на форматах: блог, лендинг, сайт-визитка, корпоративный сайт.

В портфолио найдете мои работы, а детали по разработке читайте по ссылке.

Как выбрать домен? 3 рекомендации
  1. Чем короче слово, тем лучше;
  2. Если нужный домен занят, попробуйте добавить цифры или тире, если подходит по логике и продолжает понятно читаться;
  3. Если домен на английском, то желательно без использования шипящих букв, иначе это выглядит так (ч — ch, ж — zh и пр.).

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

Проверка на занятость

Сервис для проверки занятости домена — timeweb.com/ru/services/domains

Впишите интересующий вариант и нажмите «Проверить домены».

Проверка домена на занятость

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

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

У меня раньше был другой сайт по адресу http://ilyachigarev.ru, давайте сделаем проверку на его примере.

Для проверки предлагаю использовать два метода:

1. Проверка через сервис web.archive.org

Впишите домен и посмотрите покажет какую-либо историю домена или нет. Можно даже увидеть как выглядел сайт и какие были публикации.

Проверка сайта через архив

Проверка сайта через архив

Давайте выберем например 26 августа 2013 года и увидим как в это время выглядел сайт

Как выглядел сайт в 2013 году

Как выглядел мой старый сайт в 2013 году

2. Впишите интересующий домен в поисковик

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

Проверка домена через поиск

Проверка домена через поиск

Как выберите домен, не спешите его регистрировать, сначала давайте купим хостинг.

Хостинг

Хостинг — это место, где хранятся все файлы и база данных сайта.

Цена простого тарифа в среднем начинается от 250 руб./мес.

Пакеты хостинга у Timeweb

Пакеты хостинга у Timeweb

Я всем советую хостинг Timeweb. Выбирайте тариф исходя из типа сайта и планируемой нагрузки:

  • Year — вариант для лендинга или сайта визитки
  • Optimo — вариант для блогов, информационных сайтов, портфолио и галерей
  • Century — вариант для корпоративных сайтов и сайтов компаний
  • Millenium — вариант для сайтов с высокой посещаемостью и интернет-магазинов

Видеоинструкция

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

Видео было записано в рамках моего курса «Идеальный сайт на WordPress». Подробнее про курс можете почитать тут.

Заметка: На обычном хостинге также важно использовать выделенный ip адрес. Если этого не сделать, то ваш сайт будет находится в одном «месте» с сайтами других разработчиков.

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

Его можно также купить на хостинге в разделе с доп. услугами.

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

Что такое хостинг домен сайт

Пример регистрации хостинга на примере Timeweb:
  1. Выберите вкладку Хостинг;
  2. Выберите тариф;
  3. Впишите свой емейл и ФИО, которые требуются при регистрации;
  4. После успешной регистрации вам на почту придут данные для входа, логин и пароль;
  5. Зайдите с помощью них в панель управления хостингом и пополните баланс. Оплатить можно 1 месяц, можно сразу на год вперед. Лучше платить на год, так получается экономнее;
  6. Хостинг готов к работе.

Оплата хостинга

Оплата хостинга
Пример регистрации домена:
  1. На главном экране в панеле управления хостингом выберите Домены и поддомены > Зарегистрировать домен;
  2. Впишите нужный домен, после проверки на занятость появится зеленая галочка, домен свободен, нажимаем Зарегистрировать:
  3. Далее нужно нажать Создать нового администратора и вписать свои правдивые данные, чтобы домен был закреплен за вами, за настоящим человеком. Если вы делаете сайт для кого-то, то вписывайте данные владельца;
  4. После всех настроек оплачиваем домен и ждем его активации.

Бонус. Если вы оплатите любой тариф хостинга сразу на 1 год, то вам дадут домен в зоне .ru в подарок! И еще тариф выйдет дешевле, имейте ввиду :)

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

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

Впишите название домена

Впишите название домена

Добавьте данные администратора

Добавьте данные администратора

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

Установка SSL-сертификата

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

В итоге ваш проект будет доступен по ссылке https://, а не просто http://.

Привет ssl сертификата на моем блоге

Пример установленного ssl-сертификата

Сертификат я устанавливаю перед установкой WordPress, чтобы в последствии не появилась проблема «смешанный контент», это некоторые файлы сайта открываются по http:// и если есть хотя бы один такой файл, то браузер будет ругаться, пока мы это не исправим.

Для новичков я рекомендую устанавливать бесплатный сертификат Let’s encrypt.

Сегодня он почти ничем не отличается от платного. Установили один раз и хостер сам будет его обновлять. Но если все же хотите установить платный, то обойдется он примерно в 2000-3000 руб./ год. Его нужно будет обновлять, либо же сразу купить на 2-3 года и забыть на это время.

Купить платный SSL можно сразу на хостинге.

Выбор сертификата на хостинге Timeweb

Выбор сертификата на хостинге Timeweb

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

Смотрите также: Как создать онлайн-школу с нуля в 2025 году — подробный гайд (+ мой пример).

Как создать онлайн школу

Установка движка WordPress

Есть два метода установить WordPress.

1 — вручную
2 — с помощью инструментов хостинга (если такая функция есть у хостера)

Я чаще выбираю первый, потому что все данные ты создаешь самостоятельно, а хостинг часть процесса автоматизирует. В любом случае, независимо от того какой метод вы выберите, он займет у вас не более 10-ти минут.

Видеоинструкция по созданию базы данных (видео с моего курса)

Создание базы данных

Видеоинструкция по установке WordPress (видео с моего курса)

Установка WordPress

Если хотите установить WordPress через инструменты хостинга, то вам сюда:

Установка WordPress

Далее нажимаете Установить приложение и следуете дальнейшим инструкциям.

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

Базовые настройки

Переходим в раздел Настройки и по очереди настраиваем:

Заметка: Я не буду рассказывать за что отвечает каждый пункт, сделаю акцент только на важных моментах. Каждая настройка написана на русском языке, если будет что-то не понятно, пишите в комментариях или попробуйте поискать ответы в сети.

Общие

  • Название сайта — пишем как будет называться ваш проект.
  • Краткое описание — пишем 1-2 предложения с использованием ключевых слов по вашей тематике, о чем ваш сайт.

Базовые настройки » Вкладка Общие

Базовые настройки » Вкладка Общие

Остальные настройки как правило автоматически сделаны правильно. Сохраняемся и идем дальше.

Написание

  • Форматирование — здесь я убираю галочки
  • Сервисы обновления — тут вставляю такие значения (можете также скопировать и вставить на своем сайте):

https://blogsearch.google.ru/ping/RPC2
https://blogsearch.google.com/ping/RPC2
https://ping.blogs.yandex.ru/RPC2

Базовые настройки » Вкладка Написание

Базовые настройки » Вкладка Написание

Больше ничего не меняю. Сохраняемся.

Чтение

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

Базовые настройки » Вкладка Чтение

Базовые настройки » Вкладка Чтение

Обсуждение

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

Базовые настройки » Вкладка Обсуждение

Базовые настройки » Вкладка Обсуждение

Медиафайлы

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

Базовые настройки » Вкладка Медиафайлы

Базовые настройки » Вкладка Медиафайлы

Постоянные ссылки

Ставим чекбокс на «Произвольно» и добавляем запись в строку: /%category%/%postname%.html

Либо просто выбираем пункт «Название записи», это тоже достойный вариант.

Базовые настройки » Вкладка Постоянные ссылки

Базовые настройки » Вкладка Постоянные ссылки

Сохраняемся!

Выбор шаблона оформления для сайта

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

Где вообще искать шаблоны и какой выбрать платный или бесплатный?

Я всем рекомендую использовать платные шаблоны и сам на своих сайтах использую только покупные шаблоны. Как правило, в платных шаблонах больше функций, больше настроек, чтобы сделать сайт максимально удобным. Средняя цена за шаблон ≈4000 руб.

Почти все последние проекты я сделал на шаблоне Reboot и конструкторе Elementor. Это лучшая связка для создания любого формата сайта.

Но если вы новичок и/или не хотите тратить деньги, то выбирайте для начала бесплатный вариант. Большая галерея шаблонов находится на официальном сайте https://ru.wordpress.org/themes/

Каталог бесплатных шаблонов WordPress

Каталог бесплатных шаблонов WordPress

Для удобства я собрал список из 30+ неплохих бесплатных шаблонов на WordPress, можете там поискать вариант для себя.

Когда меня спрашивают порекомендовать хороший платный шаблон для блога, я всегда даю ссылку либо на

  • Reboot — универсальный шаблон
  • Root — для блога
  • JournalX — для новостного сайта
  • CookIt — если блог на кулинарную тематику

Эти шаблоны разработали русскоязычные ребята из компании WPShop и на сегодня это лучшее решение для быстрого старта сайта на WordPress.

Подробнее о шаблонах я говорил в этой статье, если интересно почитайте.

Шаблоны от WPShop

Шаблоны от WPShop

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

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

Шаблоны в магазине ThemeForest

Шаблоны в магазине ThemeForest

Подборки шаблонов Вордпресс:

  • 40 landing page шаблонов
  • 40+ тем для портфолио
  • 40+ шаблонов для новостного журнала
  • 40+ вариантов для интернет магазина
  • 100 шаблонов для сайта визитки
  • Онлайн школу я делаю с помощью плагина Memberlux

Остальные подборки на разные тематики ищите тут.

Когда я выбирал, еще не знал про шаблоны от WPShop, иначе сразу выбрал бы Reboot и сэкономил бы 2 месяца жизни :)

Советы по выбору шаблона

  1. Смотрите как отображается лента статей;
  2. Смотрите как выглядит отдельная статья, есть сайдбар (боковая колонка или нет), если вы решите использовать его на блоге;
  3. Если есть документация или описание к шаблону, прочитайте какие настройки вы сможете делать после его установки;
  4. Если решите использовать бесплатный шаблон, то устанавливайте его через админ панель Внешний вид — Темы. Если скачать со стороннего ресурса, велик шанс словить вирус;
  5. Если устанавливаете платный шаблон, то читайте отзывы которые пишут те кто купил тему;
  6. Посмотрите когда было последнее обновление шаблона, если больше года назад, то я бы подумал насчет такого варианта. WordPress постоянно обновляется и шаблонам периодически требуются обновления.

Я подготовил отдельную статью с частыми ответами на вопросы по премиум шаблонам, также там есть видео, в котором я рассказываю как правильно выбрать и купить шаблон на ThemeForest — FAQ по премиум шаблонам.

Установка и настройка шаблона

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

  1. Настройки темы находятся во вкладке «Внешний вид» — «Настроить», либо «Внешний вид» — [Название темы], либо отдельной вкладкой с названием темы;
  2. Настройте заголовок и описание сайта в левом верхнем углу, либо загрузите логотип;
  3. Выберите размер и семейство для шрифтов (заголовков и наборного текста);
  4. Выберите основные цвета сайта для элементов и шрифта;
  5. Сделайте настройки нижней части сайта (подвала).

Примеры панели настроек у шаблонов:

Пример панели настроек у шаблона The7

Пример панели настроек у шаблона CookIt

Пример панели настроек у шаблона CookIt

Плагины

Плагины это дополнения для сайта.

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

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

В админке сайта выберите Плагины » Добавить новый » Выберите из каталога WordPress или загрузите свой.

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

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

Плагины, которые я рекомендую для каждого сайта:

  1. Clearfy Pro
  2. Yoast SEO
  3. WP Super Cache
  4. Antispam Bee
  5. All In One WP Security

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

Настройки для улучшения СЕО

Подготовить сайт для СЕО продвижения важно, посетители из поисковых систем это основной источник трафика.

плагин clearfy pro

Плагин Clearfy Pro — мега полезный плагин для сайта

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

Это все те же WPShop, чьи шаблоны я рекомендовал выше.

Если не ставить Clearfy Pro, взамен тогда нужно установить:

  • Cyr to Lat enhanced — делает транслитерацию символов с русских на латиницу, ссылка на плагин.
  • С другими плагинами для чистки кода от мусора я не работал, поэтому информацию можете поискать самостоятельно.

Как выглядят настройки плагина Clearfy Pro

Как выглядят настройки плагина Clearfy Pro

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

Плагин Yoast SEO — улучшаем СЕО

Основной плагин для СЕО. С помощью него мы будем прописывать Заголовок и Описание для каждой статьи, страницы, рубрики. Это мега важно для продвижения.

Также с помощью плагина мы создадим карту сайта XML, которая важна для ПС (поисковых систем).

Ссылка на плагин Yoast SEO

Пример настроек для статьи плагина Yoast SEO

Пример настроек для статьи плагина Yoast SEO

Плагин кэширования (WP Super Cache)

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

Ссылка на плагин WP Super Cache

Файл robots.txt

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

Ссылка на архив с файлом robots.txt. Файл нужно сначала извлечь из архива, откройте его через блокнот и отредактируйте в двух местах, там где site.ru замените на свой домен, а затем сохраните файл и закачайте в корень сайта.

Настройка защиты на сайте

Защищать сайт нужно от двух бед, это спам и взлом.

Antispam Bee — плагин для борьбы со спамом

Для борьбы со спамом я использую плагин Antispam Bee.

All In One WP Security — плагин для борьбы со злоумышленниками

Основной плагин для защиты от взлома. Имеет множество полезных функций. Ссылка на плагин All In One WP Security.

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

В любом случае вам нужно научиться делать бэкапы сайта (резервные копии), чтобы всегда иметь возможность восстановить сайт, если с ним что-то произойдет. Как правильно делать бэкап я сделаю отдельную статью.

Дополнения для сайта

Итак, сайт мы создали, настроили шаблон, СЕО и защиту. Теперь давайте посмотрим какие дополнительные элементы мы можем поставить на наш проект, чтобы он был еще более эффективным.

Наиболее популярные дополнения:

Приём оплаты

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

Контактная форма

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

Пример контактной формы на моем блоге

Пример контактной формы на моем сайте

Форма подписки на рассылку

Чтобы начать собирать базу подписчиков, нужно сначала зарегистрироваться на сервисе рассылок. Сегодня популярный и удобный вариант это Unisender.

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

Пример блока с формой подписки

Пример блока с формой подписки

Модальное окно (попап)

В данном окне вы можете что-то предложить или перенаправить посетителя на нужную вам страницу, например страницу с акцией или интересной свежей статьей. Также можно добавить форму заявки /подписки в модальное окно. Наиболее популярный плагин из бесплатных это Popup Maker, а у WPShop есть платный плагин MyPopup.

Пример попап окна

Пример попап окна

Похожие записи

После каждой статьи мы можем выводить блок с похожими статьями. Это улучшит поведенческие факторы, т.к. посетитель может переходить по другим страницам блога и больше времени проведет на сайте. Также это важно для СЕО, потому что получается внутренняя перелинковка.

Этот элемент есть почти в каждом шаблоне.

Пример виджета похожих записей после статьи

Пример виджета похожих записей после статьи

Кнопки соцсетей

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

  1. Кнопки соцсетей, которые будут вести на ваши профили/группы, канал на Ютубе. Можно также использовать виджеты.
  2. Кнопки, с помощью которых можно поделиться в соцсетях статьей с вашего сайта.

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

  • Виджет социальных иконок — плагин для вывода иконок ваших страничек в соцсетях
  • Sassy Social Share — плагин для репостов в соцсети.

Пример виджета соцсетей для репостов

Пример виджета соцсетей для репостов

Баннеры

Рекламные баннеры можно добавлять в сайдбар или в тело статьи: до, в середине или после статьи.

Онлайн чат

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

Могу посоветовать сервис JivoSite. У него есть как бесплатная версия, так и платная версия, которую вы можете в течении двух недель протестировать. Подробный гайд по Живосайту я сделал в отдельной статье — Обзор сервиса Jivosite.

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

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

Делаем начальное наполнение сайта

Теперь сайт нужно наполнить, давайте сделаем первоначальное и самое основное наполнение.

Меню (структура сайта)

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

  • Главная — ведет на главную страницу сайта. Можно такой пункт меню не делать, т.к. пользователи привыкли что при клике на логотип попадаем на главную;
  • Обо мне / О сайте — страница на которой рассказываете о себе или проекте;
  • Блог / Новости — отдельный пункт в меню стоит делать если у вас на главной не лента статей. а например лендинг;
  • Контакты — страница с информацией как с вами связаться.

Это база, дополнительно можно придумать миллион других вариантов, например:

  • Кейсы / Примеры работ / Портфолио — страница с вашими работами, мой пример;
  • Услуги — описываете свои услуги, мой пример;
  • Реклама — тут расскажите какие варианты рекламы у вас есть, мой пример;
  • Бесплатно — материалы, которые посетители могут получить/скачать бесплатно, возможно подписавшись на рассылку;
  • Курсы / Обучение / Магазин — страница где показываете свой товар, мой пример;
  • Полезные ссылки — любые полезные ссылки по теме, мой пример;
  • Видео — страница с видео;
  • и пр.

Пример меню сайта

Пример меню на сайте

Добавляйте пункты в меню в зависимости от ваших целей.

Меню настраивается во вкладке Внешний вид » Меню.

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

Страницы

Давайте создадим первую страницу и добавим ее в меню. Страницы создаются в панели Страницы » Добавить новую. Задайте название и заполните необходимой информацией, нажмите Опубликовать. Теперь чтобы на сайте ее стало видно, добавьте ее в меню.

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

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

По аналогии создайте и остальные страницы.

Политика конфиденциальности

Не забудьте про страницу Политика конфиденциальности, если собираете какие-либо данные с посетителей сайта. Пример моей политики можете посмотреть тут. Можете сгенерировать документ на бесплатных сервисах, например на Тильде.

Когда страница будет готова добавьте ссылку на нее в нижнюю часть сайта (подвал).

Записи (статьи)

Главный инструмент для контентного сайта это конечно же статьи. Добавляются они из панели Записи » Добавить новую. Пока что также можете задать Заголовок и наполнить текстом, нажмите Опубликовать и посмотрите как статья появится на сайте.

Подробнее про написание статей можете почитать тут:

Как писать СЕО статьи

Как правильно писать статьи для сайта

Как написать популярную статью

Рубрики

Чтобы не запутаться в десятках и сотнях статей, в Вордпресс вы можете из разбить на категории (рубрики). Создать их можете в панели Записи » Рубрики. Когда их создадите и по новой зайдете в редактор статьи, то справа можете выбрать рубрику за которой статья будет закреплена.

Пример раздела Рубрики

Пример раздела Рубрики

Метки

Еще один вариант чтобы объединять статьи по ключевым словам, это метки. Метки можете указывать при редактировании статьи или в панели Записи » Метки. Метки, как правило, отображаются после статьи и при клике на метку открывается список статей в которых также была указана эта метка.

Пример работы рубрик и меток

Разберем пример. У нас есть статья на кулинарном блоге «Как правильно сварить манную кашу на завтрак». Статья будет находится в рубрике «Каши», а метки можем задать «Завтрак», «Детское меню».

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

Заключение

Давайте в заключении я еще раз напишу весь план разработки сайта в краткой форме:

  1. Выбираем тематику для сайта, можно подсмотреть варианты в каталогах;
  2. Подбираем домен, проверяем его историю, чтобы ранее он не был регистрирован;
  3. Регистрируем хостинг и домен;
  4. Устанавливаем SSL сертификат, платный или бесплатный;
  5. Устанавливаем CMS WordPress;
  6. Делаем базовые настройки: Общие, Написание, Чтение, Обсуждение, Медиафайлы, Постоянные ссылки;
  7. Выбираем шаблон оформления для сайта, покупаем или качаем бесплатный;
  8. Устанавливаем и настраиваем шаблон;
  9. Устанавливаем необходимые плагины для СЕО, Защиты, Дополнений;
  10. Выбираем какие фишки будут на сайте и настраиваем их;
  11. Делаем начальное наполнение, создаем страницы;
  12. Создаем политику конфиденциальности;
  13. Добавляем меню;
  14. Добавляем рубрики;
  15. Продумываем будущие метки для статей;
  16. Пишем первую статью;
  17. Урааа! Мы сделали сайт на WordPress.

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

Также читайте статью по теме: Как сделать лендинг за 9 шагов в 2025 году

Гайд написал автор блога Чигарев Илья. Успехов.

Заказать сайт

  1. Если моя компания уже приобрела доменное имя для сайта, а мне поручили купить хостинг, установить wordpress и настроить сам сайт. Вопрос — смогу ли я привязать уже купленное доменное имя к хостингу который только собираюсь купить или нужно было покупать домен и хостинг одновременно? Спасибо.

    1. Ни каких проблем быть не должно. Не важно где и как были куплены домен и хостинг.

      1. Да я уже разобрался. Спасибо большое за статью, очень помогло!!

  2. После прочтения данной статьи решил сделать сайт на Вордпресс и не жалею. Каждый день получаю по 500 посетителей, пока не много но есть тенденция к росту

    1. Ваш комментарий очень похож на спамный… Но ладно, пусть пока будет.

  3. Мне нравится плагин Divi для WordPress
    Потому что там есть визуальный редактор и готовые шаблоны

  4. Доброго. А какие основные плагины нужны сразу установить?

  5. Создала сайт на Word Press. Пытаюсь далее работать над ним. Последовательно, согласно Пошаговой инструкции, выполняю рекомендованные действия. Настроить сайт так, чтобы там было что-то, никак не получается. Помогите! Подскажите, пожалуйста, что я делаю не так.

    1. Людмила, здравствуйте. Я вот себе такой сайт a5q{ТОЧКА}ru создал на Вордпреес схожей тематике. Могу и Вам помочь в этом.

  6. Здравствуйте. Очень полезная статья. Я как раз только начинаю учиться создавать сайты на движке Вордпресс. Уже что-то могу делать сам. Но не всё. Вот сайты по кулинарии и по дачной тематики меня больше заинтересовали. Сам я дачник и заядлый кулинар. Желаю всем здоровье и удачи во всём!

  7. Спасибо

  8. Попалась мне реклама одной компании занимающейся биодобавками.Они предлагают заработок на своих партнёрских ссылках.Хотелось бы узнать ваше мнение можно ли это осуществить на вордпресс и не будет ли это стрельбой из пушек по воробьям.

    1. На WP часто делают партнёрские магазины, тут проблем нет.

  9. Создала сайт на Word Press. Пытаюсь далее работать над ним. Последовательно, согласно Пошаговой инструкции, выполняю рекомендованные действия. Настроить сайт так, чтобы там было что-то, никак не получается. Помогите! Подскажите, пожалуйста, что я делаю не так.

  10. Добрый день! Создала сайт 24путешествия.Захожу в сайт, а WordPress уже не получается зайти. И еще установила счетчики, они не зарегистрировались на сайте, я во внешнем виде в меню не заходила, но у меня его нет, это обязательно, Походу там регистрируешь, где находится сайт. Подскажите, пожалуйста ,правильно я все делаю.

Оставить комментарий

Понравилась статья? Поделить с друзьями:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
  • Как разместить платежные документы в гис жкх пошаговая инструкция
  • Как зарегистрировать потребительский кооператив пошаговая инструкция
  • Должностная инструкция специалист логист по транспорту
  • Уголь активированный таблетки инструкция детям дозировка в таблетках
  • Амброксол инструкция по применению сироп 15мг 5мл инструкция по применению