Как создать сайт на WordPress в 2021 году. Пошаговое руководство с советами и ссылками
Привет. Меня зовут Илья. В этой статье я собрал пошаговую инструкцию по созданию сайта на CMS WordPress. С Вордпресс я работаю более 5 лет и эта статья является выжимкой моих знаний в кратком изложении. После изучения вы будете понимать как шаг за шагом, безошибочно, сделать все необходимые настройки чтобы сайт был готов к дальнейшему наполнению и продвижению.
WordPress крутой движок, с помощью него можно разработать сайт любого формата:
Пошаговое руководство для новичков по созданию сайта на CMS WordPress
Определяемся с тематикой
Выбор тематики это ответственная задача. Могу посоветовать вам два правила, чтобы легче определиться с направлением. Начинайте проект либо про то, в чем вы эксперт, либо в той нише, которая вам интересна и вы хотите ее изучить.
Для вдохновения и поиска идей вы можете посмотреть каталоги сайтов, рейтинги:
Начинаю описание именно с этого пункта, т.к. в дальнейшем тематика будет влиять на дальнейшие настройки (оформление, виджеты и пр.)
Выбрали тематику? Отлично, идем дальше.
Выбор домена и хостинга. Регистрация
Домен
Домен (доменное имя) — это имя сайта, то название, по которому посетители будут попадать на ваш блог. У моего сайта домен ichigarev.ru, у вас будет свой.
Как выбрать домен? 3 рекомендации
Хотите научиться зарабатывать в интернете? Написал большой гайд, где показал 41 метод заработка через интернет — статья по ссылке.
Проверка на занятость
Сервис для проверки занятости домена https://timeweb.com/ru/services/domains/
Впишите интересующий вариант и нажмите «Проверить домены».
Проверка домена на занятость
Проверка истории
Если домен свободен, следующим шагом нужно проверить историю домена. Бывает так что домен ранее использовался и у него может быть плохая история, которая навредит вашему сайту.
У меня раньше был другой сайт по адресу http://ilyachigarev.ru, давайте сделаем проверку на его примере.
Для проверки предлагаю использовать два метода:
1. Проверка через сервис https://web.archive.org
Впишите домен и посмотрите покажет какую-либо историю домена или нет. Можно даже увидеть как выглядел сайт и какие были публикации.
Проверка сайта через архив
Давайте выберем например 26 августа 2013 года и увидим как в это время выглядел сайт
Как выглядел сайт в 2013 году
2. Впишите интересующий домен в поисковик
Если находятся записи с таким доменом, значит он уже ранее был зарегистрирован. И тут уже выбор за вами регистрировать его повторно или нет.
Проверка домена через поиск
Как выберите домен, не спешите его регистрировать, сначала давайте купим хостинг.
Хостинг
Хостинг — это место, где хранятся все файлы и база данных сайта. Видов много, я расскажу о двух, которые подходят новичкам.
Обычный хостинг
Его еще называют share хостинг, это самый дешевый вариант хостинга, отлично подходит для новых проектов, потому что
Но когда посещаемость сайта перевалит за 1000 посетителей в сутки, вам придется или покупать тариф подороже или переезжать на VDS хостинг. Я так и сделал, когда трафик на моем блоге вырос. Вы же можете сразу купить VDS, если в дальнейшем не хотите заморочек с переносом сайта. Средняя цена обычного хостинга 150 руб./мес.
Видеоинструкция
Можете посмотреть видеоинструкцию, где я показываю как регистрирую и оплачиваю хостинг для нового сайта. Видео было записано в рамках моего нового курса «Идеальный сайт на WordPress» 2021 года. Подробнее про курс можете почитать тут.
Заметка: На обычном хостинге также важно использовать выделенный ip адрес. Если этого не сделать, то ваш сайт будет находится в одном «месте» с сайтами других разработчиков. Репутация вашего сайта будет зависеть от «соседей» и если эти соседние проекты некачественные или используют запрещенную информацию, то они будут тянуть ваш сайт в низ. Поэтому если вы хотите успешно продвигать свой ресурс в интернете, то выделенный ip это необходимость.
VDS/VPS
Если в двух словах, то VDS хостинг выдерживает больше нагрузки и трафика, а еще у ваших сайтов будет выделенный ip адрес. На обычном хостинге тоже можно купить отдельный ip, но за это нужно доплатить, в среднем 100 руб./мес. Средняя цена VDS хостинга 500 руб./мес.
Заметка: VDS и VPS это одно и тоже
На моем блоге есть отдельная статья, которая посвящена вопросам домена и хостинга, в конце вы найдете видео уроки как зарегистрировать хостинг и домен » Открыть статью в новой вкладке.
Пример регистрации хостинга на примере Timeweb :
Пример регистрации домена:
Заметка: Если у вас что-то не получится при регистрации домена или хостинга, смело пишите им в поддержку, помогут. Также если вас беспокоит переезд с одного хостинга на другой, то могу вас успокоить, в большинстве случаев хостинг заинтересован чтобы ваш сайт обслуживался именно у него и с радостью предоставляет бесплатную услугу по переносу вашего сайта на свой хостинг.
Установка SSL-сертификата
SSL сертификат обеспечивает безопасное соединение между сайтом и посетителем. В последнее время это обязательная настройка, чтобы и поисковые системы и посетители считали ваш сайт безопасным. В итоге ваш проект будет доступен по ссылке https://, а не просто http://.
Привет ssl сертификата на моем блоге
Сертификат я устанавливаю перед установкой WordPress, чтобы в последствии не появилась проблема «смешанный контент», это некоторые файлы сайта открываются по http:// и если есть хотя бы один такой файл, то браузер будет ругаться, пока мы это не исправим.
Для новичков я рекомендую устанавливать бесплатный сертификат Let’s encrypt. Сегодня он почти ничем не отличается от платного. Установили один раз и хостер сам будет его обновлять. Но если все же хотите установить платный, то обойдется он примерно в 550 руб./ год. Его нужно будет обновлять, либо же сразу купить на 2-3 года и забыть на это время.
Бесплатный можно и нужно установить прямо из админки хостинга. У хостинга MCHost например есть простая инструкция из 3х шагов.
Смотрите также: Как создать онлайн-школу с нуля в 2021 году — подробный гайд (+ мой пример).
Установка движка WordPress
Есть два метода установить WordPress.
1 — вручную
2 — с помощью инструментов хостинга (если такая функция есть у хостера)
Я чаще выбираю первый, потому что все данные ты создаешь самостоятельно, а хостинг часть процесса автоматизирует. В любом случае, независимо от того какой метод вы выберите, он займет у вас не более 10-ти минут.
Я записал для вас видеоинструкцию по установке 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
Либо просто выбираем пункт «Название записи», это тоже достойный вариант.
Базовые настройки » Вкладка Постоянные ссылки
Выбор шаблона оформления для сайта
Охх, когда я только начинал создавать сайты, то на этом этапе я очень долго тормозил. Мне нравились многие шаблоны, но не везде попадался нужный для меня функционал. Чтобы не соврать, но пару месяцев я не мог определиться это уж точно. Не желаю такого никому 🙂
Где вообще искать шаблоны и какой выбрать платный или бесплатный?
Я всем рекомендую использовать платные шаблоны и сам на своих сайтах использую только покупные шаблоны. Как правило, в платных шаблонах больше функций, больше настроек, чтобы сделать сайт максимально удобным. Средняя цена за шаблон ≈3000 руб.
Почти все последние проекты я сделал на шаблоне Reboot и конструкторе Elementor. Это лучшая связка для создания любого формата сайта.
Но если вы новичок и/или не хотите тратить деньги, то выбирайте для начала бесплатный вариант. Большая галерея шаблонов находится на официальном сайте https://ru.wordpress.org/themes/
Каталог бесплатных шаблонов WordPress
Для удобства я собрал список из 30+ неплохих бесплатных шаблонов на WordPress, можете там поискать вариант для себя.
Шаблоны от WPShop
Помимо многих преимуществ, одно из главных это админ панель на русском языке. То, что многих тормозит в начале пути создания сайта.
Второй сайт, где я рекомендую покупать шаблоны это ThemeForest. Это уже англоязычный магазин, где продаются тысячи шаблонов. Чтобы не блуждать среди них, посмотрите подборку про 45+ лучших шаблонов для блога на WP. На этом сайте ichigarev.ru я использую шаблон с этого магазина.
Шаблоны в магазине ThemeForest
Подборки шаблонов Вордпресс:
Остальные подборки на разные тематики ищите тут.
Когда покупал, еще не знал про шаблоны от WPShop, иначе выбрал бы Root и сэкономил 2 месяца жизни 🙂
Советы по выбору шаблона
Я подготовил отдельную статью с частыми ответами на вопросы по премиум шаблонам, также там есть видео, в котором я рассказываю как правильно выбрать и купить шаблон на ThemeForest » Открыть статью FAQ по премиум шаблонам.
Установка и настройка шаблона
У каждого шаблона настройки будут отличаться, особенно у платных. Так что в этом разделе я дам только общие рекомендации.
Примеры панели настроек у шаблонов:
Пример панели настроек у шаблона The7 
Пример панели настроек у шаблона CookIt
Плагины
Плагины это дополнения для сайта.
Изначально система Вордпресс не настроена должным образом для продвижения и дополнения сайта нужным функционалом. Чтобы сделать сайт настроенным под свои нужды, мы добавим необходимые плагины. Плагинов для Вордпресс очень много, десятки тысяч, их разрабатывают обычные люди, пользователи, компании.
Как установить плагин
В админке сайта выберите Плагины » Добавить новый » Выберите из каталога WordPress или загрузите свой.
Процесс установки плагина
Плагины, которые я рекомендую для каждого сайта:
На мой взгляд, это «стандартный набор джентльмена», который должен быть на каждом ресурсе. Ниже в каждом разделе я распишу для чего нужен каждый плагин.
Настройки для улучшения СЕО
Подготовить блог для СЕО продвижения важно, посетители из поисковых систем это основной источник трафика.
Плагин Clearfy Pro — мега плагин для сайта
Ссылка на плагин Clearfy Pro
Если не ставить Clearfy Pro, взамен тогда нужно установить:
Но! Имейте ввиду, если даже вы не установите этот плагин на блог, ничего страшного не произойдет, это не панацея, блог будет также работать, просто если его установить, то сайт будет более привлекательным для поисковых систем, по сравнению с вашими конкурентами. Можете установить его со временем.
Плагин Yoast SEO — улучшаем СЕО
Основной плагин для СЕО. С помощью него мы будем прописывать Заголовок и Описание для каждой статьи, страницы, рубрики. Это мега важно для продвижения.
Также с помощью плагина мы создадим карту сайта XML, которая важна для ПС (поисковых систем).
Пример настроек для статьи плагина Yoast SEO
Плагин кэширования (WP Super Cache или W3 Total Cache)
Нужен для настройки кэширования. Это ускорит загрузку страниц за счет того, что страницы будут сохраняться в кэше и при повторной загрузке будут быстрее открываться, нежели если она загружалась каждый раз по новой.
Ссылка на плагин WP Super Cache
Файл robots.txt
Важный файл для ПС, он показывает какие файлы и страницы на сайте можно индексировать, а какие нет. В сети много вариантов сборки файла Роботса, я вам прикреплю свой вариант, который использую на своих блогах и для клиентов.
Ссылка на архив с файлом robots.txt. Файл нужно сначала извлечь из архива, откройте его через блокнот и отредактируйте в двух местах, там где site.ru замените на свой домен, а затем сохраните файл и закачайте в корень сайта.
Настройка защиты на сайте
Защищать сайт нужно от двух бед, это спам и взлом.
Akismet — плагин для борьбы со спамом
Для борьбы со спамом я использую плагин Akismet.
All In One WP Security — плагин для борьбы со злоумышленниками
Основной плагин для защиты от взлома. Имеет множество полезных функций.
Ссылка на плагин All In One WP Security
Примечание. Всегда помните, что на 100% защититься от злоумышленников вы не сможете, всегда найдется кто-то более проворный, кто сможет взломать сайт, если захочет. Но и не нужно этого бояться, на моей практике пока что ни мои, ни сайты клиентов не взламывали. В любом случае вам нужно научиться делать бэкапы сайта (резервные копии), чтобы всегда иметь возможность восстановить сайт, если с ним что-то произойдет. Как правильно делать бэкап я сделаю отдельную статью.
Дополнения для сайта
Итак, сайт мы создали, настроили шаблон, СЕО и защиту. Теперь давайте посмотрим какие дополнительные элементы мы можем поставить на наш проект, чтобы он был еще более эффективным.
Наиболее популярные дополнения:
Контактная форма
Пример контактной формы на моем блоге
Форма подписки на рассылку
Чтобы начать собирать базу подписчиков, нужно сначала зарегистрироваться на сервисе рассылок. Сегодня на рынке много предложений, самые популярные это:
После регистрации на любом из сервисе и создании списка для подписчиков, вы создадите форму и код данной формы сможете добавить на сайт. Например можно поставить после статьи или в сайдбар.
Пример блока с формой подписки
Модальное окно (попап)
В данном окне вы можете что-то предложить или перенаправить посетителя на нужную вам страницу, например страницу с акцией или интересной свежей статьей. Также можно добавить форму заявки /подписки в модальное окно. Наиболее популярный плагин из бесплатных это Popup Maker.
Картинки в модальном окне
Частая ошибка на блогах когда при клике на картинку она открывается в новой вкладке, тем самым посетитель уходит со статьи. Чтобы этого не допустить нужно поставить плагин, который будет открывать картинки в попап окне, на случай если этой функции нет в выбранном шаблоне.
Ссылка на плагин Easy FancyBox
Рейтинг
Пример функции рейтинга статей
Похожие записи
После каждой статьи мы можем выводить блок с похожими статьями. Это улучшит поведенческие факторы, т.к. посетитель может переходить по другим страницам блога и больше времени проведет на сайте. Также это важно для СЕО, потому что получается внутренняя перелинковка. Этот элемент есть почти в каждом премиум шаблоне, если хотите добавить его с помощью плагина, то можете использовать например этот, WordPress Related Posts.
Пример виджета похожих записей после статьи
Кнопки соцсетей
Связь с соцсетями тоже важный пункт для продвижения блога. Вы можете добавить два вида кнопок:
В премиум шаблонах такой функционал уже реализован, если вы добавляете его в ручную, то могу посоветовать плагины:
Виджет социальных иконок — плагин для вывода иконок ваших страничек в соцсетях
Sassy Social Share — плагин для репостов в соцсети.
Пример виджета соцсетей для репостов
Баннеры
Рекламные баннеры можно добавлять в сайдбар или в тело статьи: до, в середине или после статьи.
Онлайн чат
AMP и Турбо страницы
Скорость загрузки сайта очень важный фактор ранжирования поисковыми системами, чтобы скорость сделать как можно быстрой сами ПС придумали такой метод как AMP страницы от Google и Турбо страницы от Яндекса. Эти технологии позволяют упростить страницы вашего сайта для показа только на мобильных устройствах, чтобы загрузка была практически мгновенной. Сайты с использованием AMP и ТС любят поисковики, поэтому советую их тоже использовать.
В одной статье, к сожалению, я не смогу показать настройки всех плагинов. Самый лучший вариант это искать настройки каждого плагина отдельно, например просто в Яндексе вбивать «Настройки Yoast SEO WordPress» и вам покажет много статей или видеоуроков с подробным описанием. Если у вас возникнут трудности или дополнительные вопросы, то смело пишите их в комментариях.
При добавлении интересных плюшек на блог стоит помнить о балансе, не перегружать как визуально, чтобы не пестрило в глазах и удобно было читать статьи, так и не нагружать в плане скорости загрузки, чтобы она была максимально быстрой.
Делаем начальное наполнение сайта
Сайт готов и еще рано идти отдыхать, сейчас начинается самая работа, то ради чего и создавался сайт, теперь его нужно наполнить, давайте сделаем первоначальное и самое основное наполнение.
Меню (структура сайта)
Как правило у сайта горизонтальное меню, которое ведет на различные страницы. Что именно добавить в меню каждый решает сам, вот пункты которые встречаются почти на каждом сайте:
Это база, дополнительно можно придумать миллион других вариантов, например:
Добавляйте пункты в меню в зависимости от ваших целей.
Меню настраивается во вкладке Внешний вид » Меню.
Задайте названию для меню и выберите страницы, которые будут в меню. Помимо страниц можно также добавлять Записи, Произвольные ссылки или Рубрики.
Страницы
Давайте создадим первую страницу и добавим ее в меню. Страницы создаются в панели Страницы » Добавить новую. Задайте название и заполните необходимой информацией, нажмите Опубликовать. Теперь чтобы на сайте ее стало видно, добавьте ее в меню.
Пример создания страницы
По аналогии создайте и остальные страницы.
Политика конфиденциальности
Записи (статьи)
Главный инструмент для контентного сайта это конечно же статьи. Добавляются они из панели Записи » Добавить новую. Пока что также можете задать Заголовок и наполнить текстом, нажмите Опубликовать и посмотрите как статья появится на сайте.
Подробнее про написание статей можете почитать тут:
Выбор редактора
Недавно WordPress сделал глобальное обновление и представил новый редактор статей Gutenberg, который сильно отличается от привычного классического варианта и выглядит как конструктор. Мнения в сети разделились, кому то новый вариант нравится, кому то нет. Я пока что солдат старой гвардии и пользуюсь по привычке классическим вариантом. Вы же решите для себя сами какой удобнее, попробуйте сначала новый Gutenberg, если не понравится то можете вернуть классический редактор, установив этот официальный плагин.
Рубрики
Чтобы не запутаться в десятках и сотнях статей, в Вордпресс вы можете из разбить на категории (рубрики). Создать их можете в панели Записи » Рубрики. Когда их создадите и по новой зайдете в редактор статьи, то справа можете выбрать рубрику за которой статья будет закреплена.
Пример раздела Рубрики
Метки
Еще один вариант чтобы объединять статьи по ключевым словам, это метки. Метки можете указывать при редактировании статьи или в панели Записи » Метки. Метки, как правило, отображаются после статьи и при клике на метку открывается список статей в которых также была указана эта метка.
Пример работы рубрик и меток
Разберем пример. У нас есть статья на кулинарном блоге «Как правильно сварить манную кашу на завтрак». Статья будет находится в рубрике «Каши», а метки можем задать «Завтрак», «Детское меню». Тем самым посетитель сайта может выбрать что ему интересно дальше изучить после прочтения статьи, перейти в рубрику и посмотреть другие каши или посмотреть другие рецепты по меткам Завтрак или Детское меню.
Заключение
Давайте в заключении я еще раз напишу весь план разработки сайта в краткой форме:
Дорогой читатель, вот такой получился подробный гайд по созданию сайта на CMS WordPress, будь другом напиши в комментариях было ли полезно, остались какие-то вопросы, с чем нужна помощь, что подсказать по этой теме? Пиши, не стесняйся 🙂
Гайд написал автор блога Чигарев Илья. Успехов.