Приведена пошаговая инструкция для начинающмх

как создать сайт на WordPress с нуля

Один из лучших инструментов для создания сайта — 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 при настройке постоянных ссылок и этого в большинстве случаев достаточно.

Однако если хочете дополнительно защитить сайт от злоумышленников — придется потратить некоторое время на создание .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: /*?
Disallow: /?s=
Allow: /*.css
Allow: /*.js
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://alexkoval.name
Sitemap: https://alexkoval.name/sitemap_index.xml
Sitemap: https://alexkoval.name/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 или информация в чем то устарела. Оставте свои замечания и предложения в комментариях ниже.

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