Каждый второй сайт в интернете сделан на WordPress. Сделать на нём сайт своими силами сможет любой — для этого не нужно знать ни программирование, ни вёрстку, ни дизайн. Разобраться можно при помощи многочисленных видео и статей вроде этой.
Подходит WordPress для небольших проектов: интернет-магазина до 2000 товаров, сайта-визитки для бизнеса, школы или компании, онлайн-журнала или корпоративного блога, портфолио или лендинга для курса/мероприятия.
В этом руководстве расскажем, как сделать сайт на WordPress с нуля — подробно и по шагам. Внутри вы найдёте ссылки на дополнительные статьи, которые помогут подробнее изучить те или иные аспекты.
План
- Купить домен и хостинг
- Установить WordPress
- Войти в панель управления WordPress
- Изменить настройки WordPress
- Выбрать тему
- Установить плагины
- Создать страницы
- Создать блог
- Создать товары
- Создать шапку и подвал
- Дополнительные материалы
Купить домен и хостинг
Хотя само создание сайта на WordPress и бесплатно, чтобы опубликовать его в интернете, понадобится домен и хостинг. Если вдруг вы не в курсе, домен — это текстовый адрес сайта, который люди будут видеть в ссылках и адресной строке браузера, а хостинг — место, где сайт хранится в круглосуточном доступе.
Всё это вы можете купить у нас: домены в более чем 1200 зонах и стабильный хостинг для создания сайта на WordPress на SSD-дисках, с поддержкой 24/7 и дата-центрами в Украине, США и Нидерландах.
При покупке хостинга сразу на полгода вы бесплатно получите домен на 1 год в одной из популярных зон: .com, .net, .org, .com.ua, или .in.ua. Полный список зон вы найдёте на странице тарифа и по время оформления заказа.
Также у нас вы можете воспользоваться бесплатным тестовым периодом в 30 дней. Этого срока должно хватить, чтобы самостоятельно создать сайт на WordPress с нуля и подготовить его к запуску.
Купить хостинг Тестировать хостингУстановить WordPress
Делается это в панели управления хостингом. Мы покажем процесс на примере cPanel — популярной панели, которую используем у себя на хостинге мы и многие другие провайдеры.
Вы также можете установить WordPress сначала на свой компьютер, создать сайт локально и только потом покупать хостинг. Вот инструкция, которая поможет это сделать:
Как установить WordPress на локальный сервер
Если покупали хостинг у нас, откройте главную страницу нашего сайта и нажмите в правом верхнем углу кнопку «Панель клиента». На следующей странице найдите в списке продуктов хостинг и нажмите кнопку «Контрольная панель», чтобы попасть в cPanel.
В новой вкладке откроется cPanel. На её главной странице будут приложения для работы с хостингом, которые для удобства разбиты на несколько блоков. Найдите в самом низу блок «Softaculous Apps Installer» и кликните по логотипу WordPress.
На открывшейся странице нажмите синюю кнопку «Установка».
Откроется мастер по установке WordPress. Всё, что вы в нём увидите, можно изменить позже, поэтому отредактируем только основные поля. Подробно про каждое поле читайте в отдельной инструкции:
Установка WordPress на хостинг
В блоке «Настройки сайта» укажите название и описание сайта — это текст, который будет отображаться во вкладке браузера, если навести на неё мышку. А также его потом можно будет добавить в шапку и подвал сайта.
В блоке «Аккаунт администратора» укажите имя пользователя, пароль и почту для важных уведомлений. По умолчанию в опции «Email администратора» будет указана почта на основе вашего домена. Изначально она работать не будет, её нужно создавать отдельно. Поэтому либо поменяйте почту на обычную, либо создайте адрес на своём домене по инструкции:
Как создать почту на своём домене в cPanel
В блоке «Выберите язык» речь идёт о языке, на котором будет отображаться консоль WordPress.
Остальные опции не настолько важны, их можно пропустить. Прокрутите страницу вниз и нажмите кнопку «Установка». Под ней вы можете также указать почту, на которую Softaculous отправит отчёт об установке.
Процесс установки займёт около минуты. В конце появится такая страница:
Войти в консоль WordPress
Консоль WordPress — это место в котором вы будете работать с вашим сайтом: менять его дизайн и настройки, создавать страницы и публикации, добавлять товарами и управлять заказами.
Чтобы попасть в консоль, введите в браузере ваш домен и допишите после него /wp-admin. Должно получиться так: https://vashdomen.com/wp-admin.
Чтобы каждый раз не вводить этот адрес заново, не закрывайте вкладку с консолью, а лучше закрепите её в браузере или добавьте в закладки.
Если вдруг не сможете вспомнить пароль от консоли, вот статья, которая поможет его сбросить:
Как восстановить пароль от WordPress
Визуально консоль WordPress делится на две части: слева — разделы для настройки разных компонентов сайта, справа — пространство для работы с содержимым этих разделов. Некоторые плагины будут добавлять в меню дополнительные разделы.
После каждого входа будет открываться главная страница консоли. На ней вы найдёте базовую информацию о состоянии вашего сайта: доступные обновления, системные уведомления от WordPress, блоки с данными о тех или иных компонентах сайта.
Блоки на главной странице консоли можно брать мышкой и менять местами, а также скрывать те блоки, которые вам не нужны. Для этого нажмите в правом верхнем углу «Настройки экрана» и снимите галочки с пунктов, которые хотите убрать.
Вверху страницы вы увидите чёрную плашку с опциями — панель быстрого доступа. С её помощью вы сможете совершать популярные действия, находясь на любой странице вашего интернет-магазина.
Также из этой панели можно перейти консоль. Для этого наведите курсор на название сайта в левой части плашки и выберите «Консоль». Таким же образом можно наоборот — перейти из консоли на сайт, чтобы просмотреть изменения.
Настроить WordPress
Некоторые стандартные настройки WordPress — вроде часового пояса, формата времени и дат, внешнего вида ссылок — не подходят для Украины. Их стоит изменить сразу после установки.
Перейдите на боковой панели WordPress в раздел «Настройки». Вы увидите, что в нём много подразделов. В этой инструкции затронем только самые общие настройки. Подробнее про каждый подраздел читайте в нашей отдельной статье:
Настройка WordPress после установки на хостинг
В подразделе «Общие» рекомендуем изменить значения в опциях «Часовой пояс», «Формат даты» и «Формат времени». Они отвечают за то, как время и даты будут отображаться на страницах сайта.
После этого не забудьте нажать внизу кнопку «Сохранить изменения».
Также стоит изменить структуру ссылок. Для этого перейдите в разделе «Настройки» в подраздел «Постоянные ссылки». В нём нас интересует первая же опция — «Общие настройки». Она отвечает за то, какая информация будет присутствовать в URL страниц и записей.
По умолчанию будет выбран вариант «День и название». Это значит, что в URL будет присутствовать дата публикации, из-за чего она будет длиннее и менее читабельной. Рекомендуем выбрать вариант «Название записи».
После этого не забудьте нажать внизу кнопку «Сохранить изменения».
Базовые настройки изменили, теперь опишем этапы создания сайта на WordPress.
Выбрать тему
Тема — это шаблон с готовым дизайном сайта и функционалом, который даёт возможность менять дизайн. Посмотреть установленные темы и добавить новые можно в разделе «Внешний вид — Темы».
После установки WordPress ваш сайт будет использовать стандартную тему, которую разработчика движка выпускают каждый год. Дополнительно будут предустановлены стандартные темы двух предыдущих лет. Названия этих тем — это номера годов, в которых их выпустили.
Дизайн активной темы меняют в разделе «Внешний вид – Настроить». У разных тем в этом разделе будут разные опции. Из-за этого сайт, который получилось сделать на одной теме, может не получиться сделать на другой.
Например, в одной теме может быть возможность закрепить шапку сайта и сделать её прозрачной, а в другой нет. Или в одной теме в разделе с параметрами шапки будет всего несколько простых настроек вроде логотипа и расположения меню, а в другой — целый сложный конструктор с возможностью создавать шапку из нескольких уровней. И так с любым другим функционалом.
Чтобы добавить новую тему, нажмите большую кнопку с плюсом под установленными темами в разделе «Внешний вид – Темы» или кнопку «Добавить» вверху страницы под её заголовком.
Откроется библиотека с тысячами бесплатных тем. Если нажать возле какой-то из них кнопку «Установить», она сохранится в разделе «Внешний вид – Темы». Чтобы включить её для сайта, нужно нажать «Активировать».
На вкладке «Популярные» будут темы с наибольшим количеством активных установок. Обычно это темы с удобным функционалом, чьи разработчики регулярно выпускают обновления, а часто даже обучающие материалы и дополнения, которые расширяют функционал темы.
У многих популярных бесплатных тем есть платные версии, которые открывают дополнительные возможности по настройке внешнего вида. И, как часто бывает, многие классные функции есть только в платных версиях. Но всё равно создать сайт на WordPress бесплатно вполне реально.
В этом руководстве речь будет идти только про бесплатные инструменты. Общий принцип можно будет применить ко всем темам, но показано всё будет на примере одной из самых популярных сейчас тем — Astra.
При помощи Astra получится сделать любой сайт — интернет-магазин, блог или медиа, лендинг для рекламы мероприятия или курсов, портфолио или визитку для компании. Вот детальный обзор этой темы, чтобы вам было проще разобраться:
Установить плагины
Если вам нравится какая-то тема, но в ней не хватает чего-то, что есть в другой, или вы в принципе не можете найти тему с необходимым функционалом, попробуйте найти плагин, который этот функционал добавит.
Плагины — это дополнения, которые расширяют возможности сайта или панели управления WordPress. Посмотреть уже установленные плагины и установить новые можно в разделе «Плагины».
По умолчанию после установки WordPress здесь уже будет два плагина. Они не очень полезные, поэтому от них смело можно избавиться, чтобы не занимали место. Для этого возле каждого из них есть кнопка «Удалить».
Другой вариант — поставить возле каждого плагина галочку, затем выбрать в меню «Действия» над таблицей вариант «Удалить» и нажать рядом «Применить».
Чтобы добавить новый плагин, нажмите кнопку «Добавить новый» вверху возле заголовка раздела или перейдите в боковом меню в раздел «Плагины – Добавить новый».
Откроется библиотека с тысячами бесплатных плагинов для самых разных задач: от простых блоков «Подпишитесь на рассылку» и чатов со службой поддержки до конструкторов страниц и инструментов по ускорению загрузки сайта.
Как и в случае с темами, если нажать возле какого-то плагина «Установить», он сохранится в разделе «Плагины – Установленные». Затем точно так же нужно нажать «Активировать», чтобы плагин начал работать.
Главное — устанавливать только те плагины, которые добавляют на сайт критически важный функционал. Не устанавливайте слишком много плагинов, потому что каждый из них создаёт нагрузку на сервер. Если плагинов будет слишком много, сайт может начать тормозить.
Отдельный момент — по возможности устанавливайте плагины только с высоким рейтингом на основе как можно большего количества оценок. Как правило это показатель того, что плагин активно развивается, его регулярно обновляют и устраняют уязвимости.
В первое время вам может показаться, что в WordPress не хватает многих функций, но это не так — если задача действительно популярна, с вероятностью 99% для неё уже есть плагин. Главное уметь его найти.
Чтобы вам было с чего начать, мы создали статью с подборкой популярных плагинов WordPress для основных задач, с которыми по опыту часто сталкиваются люди. Вы наверняка найдёте в ней что-нибудь полезное для своего сайта.
Подборка полезных плагинов для WordPress
Создать страницы
Перейдите в консоли WordPress в раздел «Страницы». После установки WordPress здесь уже будет две страницы: демонстрационная страница с названием «Sample Page» и страница политики конфиденциальности с названием «Privacy Policy».
Наведите курсор на любую из этих двух страниц, чтобы увидеть действия, которые с ней можно выполнить: изменить, открыть свойства, удалить и просмотреть.
Чтобы создать новую страницу, нажмите кнопку «Добавить новую» в боковом меню или вверху возле заголовка страницы.
Редактор блоков Gutenberg
Сразу после создания новой страницы откроется стандартный визуальный редактор WordPress — Gutenberg. Слева в нём будет зона для работы с содержимым при помощи заготовленных заранее блоков, а справа — свойства страницы или выбранного блока.
Добавляются новые блоки при помощи кнопки + в левом верхнем углу редактора. Их внешний вид можно затем изменить при помощи опций во всплывающем меню над блоком и на боковой панели.
Блоки можно размещать друг под другом, а можно комбинировать, создавая сложные многоуровневые конструкции. Кратко проиллюстрировать все возможности редактора не выйдет, поэтому мы написали подробный обзор с примерами популярных блоков, чтобы вам было проще разобраться:
Как пользоваться редактором блоков Gutenberg
Конструктор страниц Elementor
Ещё в WordPress есть конструкторы страниц, которые устанавливают отдельно, чтобы использовать вместо стандартного редактора Gutenberg. У них будут свои блоки и другой интерфейс для редактирования. Возможно, для вас конструктор окажется удобнее стандартного редактора.
Самый популярный конструктор называется «Elementor». В нём очень много тонких настроек, по ощущениям даже больше, чем в Gutenberg. Хотя сделать красивый сайт на WordPress можно и там и там.
У нас на сайте есть подробный обзор этого конструктора, чтобы вы могли сравнить его со стандартным редактором и решить, при помощи какого из этих инструментов создать сайт на платформе WordPress будет проще:
Как пользоваться конструктором страниц Elementor
Одна из особенностей Elementor — готовые блоки и целые страницы, которые можно импортировать себе на сайт, а потом передать их содержимое под свои нужды. Это делает создание сайта на WordPress с нуля намного проще, потому что можно не придумывать дизайн самостоятельно, а воспользоваться готовыми вариантами.
Свойства страницы
Находятся на боковой панели редактора Gutenberg на вкладке «Страница». В них можно изменить URL страницы, указать титульное изображение страницы, включить для неё комментарии. Подробно про каждую опцию читайте в нашем руководстве по работе с Gutenberg:
Стандартные свойства страницы в редакторе Gutenberg
В зависимости от темы и плагинов, которые вы установили на сайт, на боковой панели могут появляться дополнительные опции. Например, возможность скрыть заголовок страницы или шапку, изменить макет страницы или добавить боковую панель.
Подобные уникальные свойства есть и у темы Astra, которую мы рекомендовали использовать выше. Читайте о них в руководстве по работе с темой:
Дополнительные свойства страницы в теме Astra
Настройки главной страницы
Отдельный момент — сразу после установки WordPress при переходе на сайт люди будут видеть в качестве главной страницы последние опубликованные записи. Чтобы вместо них отображалась статическая страница, недостаточно просто создать её, нужно также назначить её главной. Вот как это сделать.
Перейдите в меню слева в раздел «Настройки – Чтение», найдите настройку «На главной странице отображать», поставьте переключатель на «Статическую страницу» и в строке «Главная страница» выберите из выпадающего списка страницу с нужным названием. Затем нажмите внизу «Сохранить изменения».
Точно так же можно создать отдельную домашнюю страницу для блога и указать её в строке «Страница записей».
Создать блог
Перейдите в консоли в раздел «Записи». После установки WordPress тут уже будет одна демонстрационная запись с названием «Hello World!».
Как и в разделе со страницами, если навести курсор на запись, появятся опции: изменить, свойства, удалить и перейти/просмотреть. И точно так же запись при удалении сначала попадёт в корзину, откуда её ещё можно будет восстановить. А после удаления из корзины восстановить запись можно будет только из резервной копии, если она есть.
Чтобы создать новую запись, нажмите кнопку «Добавить новую» в боковом меню или вверху возле заголовка страницы.
Редактор блоков Gutenberg
Сразу после создания новой записи, как и в случае со страницами, откроется редактор Gutenberg. И точно так же: слева в нём будет зона для работы с содержимым, справа — свойства страницы или выбранного блока. Подробнее о работе в этом редакторе читайте в нашем руководстве:
Как пользоваться редактором блоков Gutenberg
Конструктор страниц Elementor
Записи, как и страницы, тоже можно редактировать при помощи конструктора вместо стандартного редактора. Если делаете сайт в Elementor, вот инструкция, которая поможет понять основные нюансы:
Как пользоваться конструктором страниц Elementor
Свойства записи
Свойства записи будут немного отличаться от свойств страницы. В них тоже можно будет изменить URL статьи и картинку для соцсетей, но будут также и другие опции: например, возможность выбрать рубрику, назначить метку или придумать текстовый отрывок для превью.
Прочитать подробнее об основных свойствах записи вы можете в нашем руководстве по работе с редактором Gutenberg:
Если используете тему Astra, для записей будут доступны такие же дополнительные свойства, которые доступны для страниц. Читайте о них в руководстве по работе с этой темой:
Дополнительные свойства в теме Astra
Рубрики и метки
Также для статей можно создавать рубрики и метки. У каждой из них будет своя автоматически сгенерированная страница, которая будет содержать только принадлежащие к этой рубрике или метке статьи.
Допустим, вы торгуете музыкальным оборудованием и решили вести про него блог. Рубрики можно создать для разных форматов материалов: обзоры, советы, настройка, ремонт и обслуживание. А метки — для названий производителей.
Создаются и рубрики и метки одинаково. Перейдите в соответствующий подраздел в разделе «Записи», придумайте название рубрики или метки, затем URL латинскими буквами, если нужно, составьте описание и нажмите внизу кнопку «Добавить».
После создания рубрики или метки, их нужно присвоить той или иной статье. Для этого в разделе «Записи – Все записи» наведите курсор на нужную статью и выберите «Свойства», после чего вы увидите поля с рубриками и метками.
Чтобы присвоить рубрику сразу нескольким статьям, поставьте галочки возле них в разделе «Записи – Все записи», выберите в выпадающем списке «Действия» в верхней части таблицы вариант «Изменить», затем выберите нужную рубрику.
Создать товары
Изначально на WordPress можно было создать только блог, но со временем на нём начали делать и другие сайты, в том числе интернет-магазины. Для этого нужно установить специальный плагин, который позволит добавлять товары.
Есть много плагинов, которые добавляют на сайт функционал по созданию товаров, но самый популярный из них — WooCommerce. Это официальный плагин от разработчиков WordPress. Его использует большинство магазинов.
После установки WooCommerce в консоли WordPress появится раздел «Товары». В нём будет много функций, а у самих товаров много различных параметров. Подобно рубрикам и меткам можно будет создавать атрибуты и категории. Для товаров можно будет создавать вариации: цвета или размеры.
Работа с товарами — объёмная и сложная тема, в двух словах о ней не расскажешь, поэтому вот отдельная статья, которая поможет во всём разобраться:
Как работать с товарами в WooCommerce
Создать шапку и подвал
В WordPress отдельно настраивается внешний вид шапки с подвалом и отдельно создаётся навигационное меню с разными страницами сайта, которое обычно добавляют в шапку.
Редактор Gutenberg
В редакторе Gutenberg шапка с подвалом настраиваются в разделе «Внешний вид – Настроить». Функционал и даже название раздела, который отвечает за настройку, будут отличаться в зависимости от используемой темы.
Например, в стандартной теме WordPress можно разместить в шапке логотип и навигационное меню со ссылками на выбранные вами страницы, а у темы Astra есть целый конструктор с возможностью сделать шапку из нескольких уровней, добавить в неё номер телефона, иконки соцсетей и поиск по сайту.
Подробнее про конструктора шапки и подвала в теме Astra читайте в нашем руководстве по настройке темы:
Как создать шапку и подвал в теме Astra
Конструктор Elementor
В конструкторе Elementor шапка и подвал создаются по такому же принципу, как и страницы. Единственное, нужно установить специальный плагин, но в остальном интерфейс редактора и его инструменты остаются такими же.
При этом, как и в случае с созданием страниц, вы можете использовать шаблоны для шапки или подвала: найти их в интернете, загрузить в конструктор и переделать содержимое под свой сайт.
Чтобы вам было проще разобраться, вот ссылка на инструкцию по созданию шапки в руководстве по работе с Elementor:
Как создать шапку и подвал в конструкторе Elementor
Навигационное меню
В каком бы редакторе вы ни делали сайт, создавать меню нужно отдельно в разделе «Внешний вид – Меню». Потом вы просто указываете его при создании шапки или подвала и отобранные для него страницы начинают отображаться.
В разделе «Внешний вид – Меню» сначала нужно создать меню, а потом добавить в него страницы. Чтобы создать новое меню, введите его название в единственное пустое поле на странице, затем нажмите «Создать меню» внизу.
Дальше остаётся только добавить в меню страницы. В левой части экрана найдите зону «Добавьте элементы меню», поставьте галочки на нужных страницах и нажмите «Добавить в меню».
Если какая-то из страниц не отображается, убедитесь, что ставите галочки, находясь во вкладке «Все». По умолчанию будет открыта вкладка «Самые свежие».
По такому же принципу вы можете создать отдельное меню для футера и других областей на сайте. Количество и местоположение таких областей зависит от темы, которую вы используете.
Например, в стандартной теме WordPress за 2021 год зоны всего две: для шапки и для подвала. А в теме Astra таких зон пять — кроме шапки и подвала можно создать отдельное меню для сайдбара и залогиненных пользователей.
Посмотреть количество областей для меню можно на вкладке «Управление областями» в разделе «Внешний вид – Меню». Там же вы можете назначить меню для каждой из областей.
На этом всё. Мы рассмотрели основные функции WordPress и рассказали, как сделать сайт на этом движке своими руками. Теперь поделимся ссылками на дополнительные материалы, которые помогут улучшить работу сайта.
Дополнительные материалы для обучения
Статьи в блоге. Здесь вы найдёте подборки популярных плагинов и советы, которые помогут улучшить работу сайта. Вот некоторые статьи:
Вики. Здесь есть руководства по работе с каждым разделом панели управления и ответы на общие вопросы. Несколько статей для примера:
- Как сделать резервную копию сайта на WordPress
- Как ускорить сайт на WordPress
- Как подключить и настроить Cloudflare
Оставьте комментарий, если какой-то информации не хватает или вы хотите поблагодарить за руководство.