Один из лучших инструментов для создания сайта — CMS WordPress.
В статье приведена пошаговая инструкция как создать сайт WordPress с «нуля». Выполнив последовательно ряд действий на выходе вы получите полноценный работающий сайт. Здесь мы исходим из того, что:

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

Содержание

Основные ресурсы и шаги для создания сайта на WordPress

По сути, чтобы создать сайт на WordPress, вам нужно иметь основные четыре ресурса:

1.Домен и хостинг

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

2.WordPress

WordPress — это базовая программная платформа, которая поддерживает ваш сайт.

3.Тема

Тема добавит дизайн и функциональность к WordPress

4.Время

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

Чтобы создать сайт на WordPress вам нужно сделать четыре основных шага:

Домен и хостинг

1. Настроить хостинг, доменное имя и электронную почту.

WordPress

2. На сайт установить и настроить WordPress

Тема

3. Установить и сконфигурировать тему

Страницы и контент

4. Создать страницы и заполнить сайт контентом

Ниже рассмотрю эти, а также дополнительные шаги как создать сайт на WordPress уже более подробно.

1. Подбор имени сайта, регистрация имени, выбор хостинга

Вначале для сайта нужно выбрать название и зарегистрировать его. Подобрать имя сайта и зарегистрировать его можно в компании-регистраторе имен.  Например: Хостинг-Украина

За регистрацию домена и его поддержку регистратор возьмет деньги в зависимости от зоны, где будет размещен этот домен.

Зона в Интернете – это название, что идет в имени сайта после точки: например: сайт «electrostal.com.ua» имеет «electrostal» — имя, «com.ua» — зона. Каждая из зон имеет некоторый контекст: «biz», «com» — бизнес, «net» — сети, «org» — организация, «gov» — государственные структуры. Но это не значит, что в зоне «com» не может быть личный блог.

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

По сути, адрес сайта — это запись в общемировой книге (реестре) всех адресов Интернета. Не более того. А вот чтобы сайт правильно работал — надо физически разместить тексты, фото, видео ( обычно называют это «контент») на конкретных компьютерах-серверах и связать их с выбранным адресом сайта.   Делается это «на хостинге» у «провайдера» — компании, которая должна предоставить в пользование определенный объем компьютерных ресурсов (место на диске, памяти и т.д.) и обеспечить 24/7 работу сайта. За деньги, разумеется.

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

«Базовое» обеспечения работы сайта = поддержка его имени + хостинг (поддержка ресурсов)

2. Установка WordPress

Самая «свежая» версия русской редакции WordPress здесь: https://ru.wordpress.org/. Там же размещена инструкция по установке WordPress.

Следует отметить, что многие хостинги могут установить WordPress автоматически. Уточните у своего хостинга наличие такой функции.

Сразу же после установки WordPress можно расширить  его функциональность путем установки ряда плагинов. Плагины — это некий отдельный программный модуль, который подключается к Вордпресс и дает ему дополнительные возможности.
Каталог плагинов Вордпресс: https://ru.wordpress.org/plugins/.
Некоторые полезные плагины:

  • защита от спама: Akismet Anti-Spam
  • замена русских названий в адресах на английские: Cyr to Lat enhanced
  • ограничение попыток входа в админпанель сайта: Login LockDown
  • оптимизация базы данных:WP-Optimize
  • защита сайта: Cerber Security, Antispam & Malware Scan
  • настройка SEO: Yoast SEO
  • архивация сайта: Duplicator
  • +49 пунктов по улучшению сайта WordPress (платный плагин): Clearfy Pro

2.1. Установка плагина Maintenance Mode

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

Во избежание этого и служит плагин типа Maintenance Mode: заставка «обслуживание сайта». Для посетителей плагин выводит аккуратную картинку, где можно уведомить их что сайт на реконструкции

Плагинов данного типа есть большое количество, я использую: YITH Maintenance Mode

Еще один способ скрыть сайт от нежелательного просмотра — использовать плагин Password Protected. Этот плагин позволяет увидеть сайт только после ввода пароля.

2.2. Настройка плагинов, обеспечение безопасности сайта

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

Однако если хочете дополнительно защитить сайт от злоумышленников — придется потратить некоторое время на создание .htpasswd и настройке .htaccess для повышения безопасности сайта.

3. Выбор темы (а по сути дизайна) сайта

Тема в WordPress — это некий базовый дизайн сайта, его внешний вид. Другими словами, тема в Вордпрессе — это как одежда на человеке. Может быть разная: суть одна, внешний вид разный.

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

Темы можно подобрать в Интернете на любой вкус:

  • бесплатные на официальном сайте Вордпресса: https://wordpress.org/themes/
  • или платные преимум-темы многих разработчиков, например тема Divi от ElegantThemes.

Пару слов о  теме Divi. На данный момент Divi по сути превратилась в платформу для веб-дизайна. 

Конструктор страниц Divi Builder, доступный либо как отдельный плагин, либо как полностью интегрирован в тему Divi. 

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

3.1. Общая настройка темы + файл robots.txt

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

В корневой директории сайта желательно иметь файл robots.txt В файле прописаны инструкции для роботов, которые будут заходить на сайт и периодически индексировать его. В этих инструкциях роботам указано какие директории индексировать запрещено, а какие разрешено. Это делаеться во избежание дублирования контента. Также в этом файле указывается адрес карты сайта (sitemap).

Ниже в качестве примера привожу содержание файла robots.txt :

User-agent: *
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-json/
Disallow: /xmlrpc.php
Disallow: /readme.html
Disallow: /?s=
Disallow: /*?et_core_page_resource=
Allow: /*.css
Allow: /*.js
Allow: /*?amp
Allow: /wp-content/themes/*.css
Allow: /wp-content/plugins/*.css
Allow: /wp-content/uploads/*.css
Allow: /wp-content/themes/*.js
Allow: /wp-content/plugins/*.js
Allow: /wp-content/uploads/*.js
Allow: /wp-includes/css/
Allow: /wp-includes/js/
Allow: /wp-includes/images/
Allow: /wp-content/cache/*.css
Allow: /wp-content/cache/*.js
Host: https://divitheme.space
Sitemap: https://divitheme.space/sitemap.xml
Sitemap: https://divitheme.space/sitemap-image.xml

4. Создание меню, необходимых страниц и рубрик

Меню — важный элемент сайта, ведь удобное и понятное меню позволяет посетителю сайта проще соориентроваться на сайте и быстрее понять, может ли он решить с помощью сайта свою проблему.

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

4.1 Создание логотипа, «девиза» и иконки сайта

Исходим из того, что при первом открытии сайта посетителем у тебя есть несколько секунд внимания посетителя, чтобы ему просто объяснить куда он попал. И посему логотип и краткий «девиз» сайта крайне важен для такой функции. «Девиз» — это одно или два кратких точных предложений, которые описывают суть сайта (блога), чему он «посвящен», какую проблему посетитель может решить здесь.

Иконка сайта (фавикон) — маленькое графическое изображение (favicon.ico), которое выводит браузер у себя в панели закладок рядом с именем сайта или «поисковик» в выдаче. Никакой функции он не несет, но его использование позволяет в какой-то мере повысить узнаваемость сайта.

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

В WordPress есть механизм создания иконки сайта. В админпанели надо выбрать меню: «Внешний вид«->»Настроить«->»Свойства сайта«, слева внизу выбрать изображение для иконки сайта размером 512 пикселей по сторонам и сохранить иконку.

4.2. Настройка хедера («шапки») и футтера («подвала») сайта

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

В футтере (низ, «подвал» сайта) обычно прописываются авторские права на сайт, возможно некая дополнительная информация, или еще одно меню, например

Чаще всего хедер и футтер настариваются средствами темы.

4.3. Настройка и наполнение статических страниц

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

Страницы — практически это редко изменяемые данные: «Контакты», «Главная», «Мои работы», «О себе». Скажем так—страницы—это самая «консервативная» часть сайта.

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

Темы и плагины могут создавать свои типы данных.  Например тема Divi создает тип «Проекты». Это  описание портфолио и выполненных работ.

Плагин для создания интернет-магазина Woocommerce создает данные «Товары».

4.4. Настройка виджетов в сайдбаре

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

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

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

Создание сайта - панель виджетов и сайдбара

5. Настройка связи с социальными сетями

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

Например: Monarch Social Sharing Plugin или Easy Social Share Buttons for WordPress.

Существует два вида связи сайта с соцсетями: «Share» и «Following«.

«Share» (поделиться) — если посетителю понравилась статья, он нажимает кнопку и краткое описание со ссылкой на эту статью копируються на ленту записей этого посетителя в социальной сети. Таким образом статья распространяеться в социальной сети.

«Following» (последователи) — если вы хотите получить больше подписчиков (последователей) на своих социальных страницах, то вы размещаете ссылки «последовать за вами в социальных сетях» на своем сайте. Посетитель нажав на кнопку  «Following» подписывается на вашу страницу в социальной сети и вы получаете себе еще одного последователя (то есть читателя).

6. Настройка подписки RSS

Технология RSS дает возможность информировать всех желающих о новой информации, появившейся на сайте. В Интернете можно встретить разные термины, обозначающие одно и те же: RSS-канал, RSS-лента, RSS-рассылка, фид (от английского «feed» – подача, питание, скармливать).

Собственно, для сайта на Вордпресс RSS уже присутствует на сайте, его адрес: http://имя_сайта/feed/

Если понадобиться создать возможность для посетителя подписаться на RSS, то можно сделать иконку и разместить ссылку на RSS: http://имя_сайта/feed/. Или же использовать сервис FeedBurner для организации подписки на RSS и получения «фидов» на электронную почту читателей.

«Минус» RSS в том, что он может использоваться для нежелательного парсинга (выборочного извлечения информации с других сайтов и ее последующее использование). Для статейных сайтов (блогов), сайтов-визиток, корпоративных сайтов рекомендую RSS отключать.

7. Настройка подписки и рассылки

В отличие от RSS, который обновляется автоматически при появлении новых статей на сайте, рассылкой можно управлять вручную.

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

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

Например, используя плагин MailPoet или MyMail

8. Регистрация сайта в Яндекс и Гугл, подключение статистики Гугл и/или метрики Яндекси

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

Если хотите отслеживать посетителей на сайте — тогда нужно установить коды Метрики Яндекса или Аналитики Гугла, или каких-то других счетчиков. Обычно эти коды надо вставлять или в хедер («шапка») или в футер («подвал») сайта на тех страницах, по которым нужна статистика посещений. Подробнее смотрите документацию Метрики Яндекса и Аналитики Гугла.

9. Деактивация плагина Maintenance Mode и публикация сайта

Самый ответственный момент — в основном сайт готов и деактивация плагина делает его видимым для пользователей в сети Интернет.

Возможно я что-то упустил как создать сайт на WordPress или информация в чем то устарела. Оставте свои замечания и предложения в комментариях ниже.

Удачи.
Александр Коваль.