В статье приведена краткая пошаговая инструкция как создать сайт WordPress с "нуля" самостоятельно. Что такое WordPress и почему он так популярен смотрите здесь.

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

Здесь я исхожу из того, что:

  1. Идея сайта у вас уже есть
  2. Вы уже решили, на чем вы хотите сосредоточить внимание и определили, какова цель вашего сайта
  3. Определили кто ваша целевая аудитория
  4. Придумали потенциальные имена для вашего сайта

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

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

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

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

wordpress

2. WordPress

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

divi red11

3. Тема и плагины

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

time

4. Время

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

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

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

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

arrow

2. WordPress

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

arrow

3. Тема и плагины

Установить и сконфигурировать тему, добавить нужные плагины

arrow

4. Контент (Меню, страницы, посты)

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

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

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

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

Hosting Ukraina1

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

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

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

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

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

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

2. Установка WordPress и его настройка

Самая "свежая" версия украинской редакции WordPress находиться здесь. Там же размещена инструкция по установке WordPress.

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

Ниже приведу видео установки WordPress у хостинг-провайдера Хостинг-Украина

После установки WordPress переходите на страничку входа в WordPress. Ссылка для входа в админку сайта обычно выглядит примерно так:

https://www.site.com/wp-admin

где "www.site.com" замените на адрес своего сайта.

Откроется диалоговое окно, где вы можете осуществить вход в административную панель сайта, применив логин и пароль админа, введенные ранее при установке WordPress.

Важное замечание: при установке WordPress cтарайтесь избегать стандартных имен пользователей, например "admin".
Vhod na sayt
Страница входа на сайт WordPress

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

Плагины устанавливают или отключают в меню "Плагины" админки сайта:

Plaginy wordpress
Раздел административной панели сайта WordPress для управления плагинами

Каталог плагинов Вордпресс смотрите здесь .

Некоторые полезные плагины:

2.1. Установка плагина Maintenance Mode (необязательно, но желательно)

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

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

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

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

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

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

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

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

2.3. Настройка постоянных ссылок

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

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

Postoyannye ssylki wordpress1

2.4. Настройка главной страницы

По умолчанию WordPress устанавливает главной страницу с последними опубликованными постами. Главная страница - это страница, которая открывается при вводе имени сайта.

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

Для этого перейдите в админпанели сайта в меню "Настройки" и выберите пункт "Чтение":

Glavnaya stranitsa

Далее выберите страницы для записей и для главной и сохраните ваш выбор.

2.5. Название сайта, краткое описание и фавикон

В процессе установки ВордПресс добавит автоматически в название веб-сайта строчку с надписью «Еще один сайт на WordPress».

Чтобы изменить название и краткое описание сайта выберите пункт меню "Настройки" - "Общее"

Esche odin sayt nazvanie

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

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

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

Иконка сайта Вордпресс

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

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

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

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

Temy wordpress

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

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

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

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

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

Рисунок Банер тема Divi для WordPress

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

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

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

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

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

Nastroit temu

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

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

User-agent: *
Disallow: /wp-admin
Disallow: /wp-includes
Disallow: /wp-content/cache
Disallow: /wp-json/
Disallow: /xmlrpc.php
Disallow: /?s=
Sitemap: https://divitheme.space/sitemap_index.xml

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

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

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

Чаще всего хедер и футер настраиваются средствами темы: «Внешний вид» -> «Настроить». Для темы Divi настройки выглядят так:

Heder i futer

4. Ввод контента сайта

4.1. Создание меню сайта

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

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

Меню создается в админпанели сайта, раздел "Внешний вид" ->"Меню" :

Меню вордпресс

Создав структуру меню в разделе «Настройки меню» укажите область его отображения — «Основное», «Меню верхнего уровня» или «Меню футера». Сохраните изменения и меню готово к работе.

4.2. Создание статических страниц и записей

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

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

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

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

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

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

Для записей существует возможность группировать записи по рубрикам и тегам.

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

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

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

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

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

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

Виджеты и сайдбар

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

По сути на данном этапе "костяк" сайта готов. Если вы устанавливали плагин Maintenance Mode - самое время отключить его. Деактивация плагина делает его видимым для пользователей в сети Интернет.

Однако коснемся еще нескольких моментов создание сайта WordPress.

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

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

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

Да и во многих темах есть возможность "связать" сайт с социальными сетями.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

Рубрики: Без категории

Об авторе:

Алекc Коваль

Алекc Коваль

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