Как создать и настроить сайт на WordPress в 2024 году

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

Видео-руководство: How to create and set up a WordPress website in 2024

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

Содержание

  1. Планирование
  2. Регистрация домена и выбор хостинга
  3. Установка WordPress
  4. Установка и настройка темы Prespa
  5. Настройка веб-сайта
  6. Создание контактной формы
  7. Встраивание карты
  8. Резервное копирование

Планирование

Прежде чем приступать к созданию нашего веб-сайта, нам нужно спланировать, чего мы хотим достичь и о чем будет наш сайт. Будет ли это блог о путешествиях, сайт портфолио музыканта, мастер-класс по кулинарии, сайт-визитка или интернет-магазин? Планируем ли мы монетизировать его или это будет просто для удовольствия? Как только у нас будет четкое представление и хорошо продуманный план, мы можем переходить к следующему этапу.

Регистрация домена и выбор хостинга

Чтобы иметь веб-сайт, вам сначала нужно место для хранения ваших файлов, например, на хостинге HostArmada, и уникальное доменное имя. Для того чтобы ваш сайт был доступен в Интернете, он должен быть размещен или храниться на специальном компьютере, называемом сервером. Этот сервер должен постоянно быть подключен к Интернету. Когда вы вводите адрес веб-сайта или доменное имя в браузере, например, yourawesomesite.com, вы отправляете запрос на удаленный сервер, который затем обрабатывает этот запрос и отображает запрашиваемую страницу в вашем браузере. Это значит, что перед установкой WordPress необходимо убедиться, что у вас уже есть работающий хостинг и зарегистрированное доменное имя.

Различия между WordPress.com и WordPress.org (спойлер — всегда выбирайте WordPress.org)

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

WordPress.org

WordPress.org, также известный как «настоящий WordPress» — это популярное программное обеспечение для создания и управления веб-сайтами, которое получило значительное признание и популярность вo всем мире. Оно обладает неограниченными возможностями настройки благодаря своему открытому исходному коду и обширной поддержке сообщества. С помощью WordPress вы можете создавать веб-сайты без каких-либо технических знаний.

Это программное обеспечение с открытым исходным кодом, и оно на 100% бесплатно. Всё, что вам нужно для его использования — это домен и хостинг. Вот почему его также называют самостоятельно размещаемым WordPress (self-hosted).

Преимущества:

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

Вот ключевые преимущества использования WordPress.org для создания вашего веб-сайта и вот почему мы считаем его лучшим выбором для построения веб-сайта:

  • Низкая стоимость: Программное обеспечение WordPress предоставляется бесплатно. Вам нужны только хостинг и домен для начала работы.
  • Простота использования: Программное обеспечение WordPress не только бесплатное и с открытым исходным кодом, но и удобное в использовании. Неудивительно, что оно используется более чем на 43% всех веб-сайтов в интернете. Теперь вам не нужно быть разработчиком, чтобы создавать, настраивать и управлять сайтом на WordPress.
  • Полный контроль: Вы полностью владеете своим веб-сайтом и его данными. Нет риска, что ваш сайт будет закрыт из-за условий обслуживания кого-то другого. Контроль полностью в ваших руках.
  • Бесконечные возможности настройки: У вас есть гибкость включать в свой сайт все плагины/приложения WordPress, которые когда-либо были созданы, будь то бесплатные, платные или сделанные на заказ.
  • Бесконечные дизайнерские возможности: Дизайн вашего сайта полностью под вашим контролем. Вы можете выбирать из всех бесплатных или платных тем WordPress, или даже использовать полностью настраиваемые дизайны и модификации.
  • Свобода монетизации: Вам разрешается показывать собственную рекламу. Вы свободны монетизировать ваш сайт WordPress по-своему. Вы не будете делить прибыль с посредниками.
  • Расширенная аналитика: Доступ к продвинутым инструментам, таким как Google Analytics, для настроенной аналитики и отслеживания.
  • Дружественность к электронной коммерции: Самостоятельно размещаемый WordPress позволяет вам настроить интернет-магазин.
  • Возможности членства: Вы также можете создавать сайты для членства, ограничивать доступ к премиальному контенту, создавать курсы, форумы и т.д.

Эти преимущества ясно демонстрируют, почему WordPress.org так широко распространен и считается лучшей платформой в мире для создания универсальных и полностью контролируемых сайтов.

Nasio Themes banner

Недостатки:

  • Вам потребуется веб-хостинг и домен. Это не бесплатно. Вам нужно место для хранения файлов вашего сайта в интернете. Для этого вам нужен хостинг провайдер. Начальная стоимость составляет около $3-$10 в месяц. Вам также понадобится домен. Стоимость типичного домена составляет около $10 в год.
  • Вам нужно установить WordPress. К счастью, качественные хостинг-компании, такие как HostArmada, предлагают опции установки WordPress в один клик, что делает установку и настройку сайта очень простой.

WordPress.com

WordPress.com — это сервис веб-хостинга от Automattic, компании, которая стоит за WordPress. Эта связь часто приводит к путанице между WordPress.com и широко известным, с открытым исходным кодом, программным обеспечением WordPress.org.

Хостинг-сервис, предоставляемый WordPress.com, доступен в шести различных ценовых категориях:

  • Бесплатный – Предлагает базовые функции.
  • Персональный – Цена составляет 48 долларов в год.
  • Премиум – Стоит 96 долларов в год.
  • Бизнес – Доступен за 300 долларов в год.
  • Электронная коммерция – Предлагается за 540 долларов в год.
  • VIP – Начинается с 5000 долларов в месяц.

Теперь давайте рассмотрим преимущества и недостатки использования WordPress.com.

Преимущества:

  • Это бесплатно, пока вы не достигнете 3 ГБ места. После этого вам необходимо перейти на платный план.

Недостатки:

  • Если вы не перейдете на платный план на вашем веб-сайте будут отображаться рекламные объявления. Ваши пользователи увидят эти объявления, но у вас прибыль не будет.
  • Вам не разрешается продавать рекламу на вашем веб-сайте.
  • Вам не разрешается добавлять дополнительные функции на вашем веб-сайте (установка плагинов возможна только если вы участвуете в программе VIP, начиная с $5000 в месяц).
  • Вам не разрешается настраивать веб-сайт сверх существующих опций. Бесплатные пользователи могут выбирать только из небольшого списка тем и не могут изменять внешний вид и ощущение веб-сайта с помощью дополнительного CSS.
  • Вам необходимо обновить ваш тарифный план, чтобы использовать собственное доменное имя, иначе вы останетесь с адресом myawesomesite.wordpress.com
  • WordPress.com оставляет за собой право удалить ваш сайт в любой момент, если он будет признан нарушающим их условия обслуживания.
  • Ссылка «Powered by WordPress.com» всегда будет видна на вашем сайте, если вы не обновите его до бизнес-плана.
  • Вам не разрешается продавать товары на вашем веб-сайте, если вы не обновите его до плана электронной коммерции.
  • Вам не разрешается создавать веб-сайты для членства (это просто невозможно).

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

Регистрация домена и хостинга

В этом уроке мы будем зарегистрировать домен и хостинг и также привязять домейн к хостингу. Мы будем использовать HostArmada — качественный хостинг-провайдер и регистратор доменов. Я пользуюсь их услугами уже давно и вполне им доволен. Более того, они щедро предоставляют нашим читателям скидку 75%. Чтобы получить его, вам нужно просто нажать на нашу партнерскую ссылку и использовать код NASIO75 при оформлении заказа (только для новых клиентов).

Hostarmada buying a domain name

Создание учетной записи в HostArmada и настройка хостинга и домена включает в себя несколько шагов:

  1. Посетите веб-сайт HostArmada: Начните с перехода на веб-сайт HostArmada.
  2. Выберите тарифный план хостинга: HostArmada предлагает различные тарифные планы хостинга (общий хостинг, VPS-хостинг, хостинг серверов с выделенным ЦПУ и т.д.). Выберите план, который лучше всего соответствует вашим потребностям. Для большинства начинающих пользователей обычно достаточно плана общего хостинга.
  3. Выберите доменное имя: После выбора плана хостинга вам будет предложено выбрать доменное имя. Это может быть новое доменное имя, которое вы хотите зарегистрировать, или существующее доменное имя, которое у вас уже есть. Если вы регистрируете новое доменное имя, HostArmada предоставит его вам бесплатно в рамках их хостинг-пакета.
  4. Создайте учетную запись: Для продолжения вам нужно будет создать учетную запись. Это обычно включает предоставление личной информации, такой как ваше имя, адрес электронной почты и контактные данные.
  5. Введите платежные данные: Вам будет предложено ввести платежные данные для хостинг-сервиса. Это включает в себя детали оплаты, такие как информация о кредитной карте или PayPal.
  6. Выберите срок действия хостинг-пакета: Определитесь со сроком действия вашего хостинг-пакета. Более длительные сроки часто предлагаются со скидками, но требуют большей предоплаты.
  7. Добавьте дополнительные услуги (по желанию): HostArmada может предложить дополнительные услуги, такие как инструменты SEO, решения для резервного копирования или улучшенные функции безопасности. Выберите те, которые вам кажутся необходимыми для вашего веб-сайта.
  8. Просмотрите и завершите покупку: Просмотрите все детали вашей покупки, включая план, доменное имя, срок действия и дополнительные услуги. Убедитесь, что все правильно, прежде чем завершить покупку.
  9. Получите доступ к панели управления хостингом: После завершения покупки вы получите электронное письмо с данными для входа в панель управления хостингом. Здесь вы можете управлять настройками хостинга, устанавливать WordPress (или другую CMS), создавать электронные почтовые аккаунты и многое другое.

В конце концов, позвольте себе сделать 30-минутный перерыв (обычно столько времени требуется для распространения настроек DNS) и попробуйте посетить ваш новый веб-сайт через адрес браузера. Если все прошло хорошо, вы должны быть в состоянии загрузить стандартную HTML-страницу от HostArmada. Обратите внимание, что в некоторых редких случаях распространение настроек DNS может занять до 48 часов, так что будьте терпеливы. Если вам нужна помощь в устранении неполадок, проверьте, привязан ли домен к хостинг-провайдеру (проверьте вкладку «Домены» в панели управления) или свяжитесь со службой поддержки. Вы можете отправить им электронное письмо или воспользоваться функцией чата. Лично я предпочитаю функцию чата. Они очень дружелюбны и отвечают мгновенно.

Установка WordPress

На панели управления Hostarmada перейдите в контрол панель и нажмите «WordPress Manager от Softaculous».

WordPress Manager by Softaculous

В Softaculous нажмите «Установить» и введите информацию о веб-сайте. В разделе «choose installation url» выберите имя домена (если вы не можете найти доменное имя, вам нужно будет сначала добавить его на вкладке «Домены» в панели управления, а затем повторить попытку). Добавьте название сайта, а также свой адрес электронной почты. В качестве имени пользователя и пароля используйте надежное имя пользователя и пароль и скопируйте информацию в безопасное место (через некоторое время она понадобится вам чтобы зайти в админ-панель WordPress). Пропустите раздел с дополнительными параметрами и темами. Мы добавим их позже. Когда все будет готово, нажмите «Install» внизу страницы. Softaculous сделает за вас тяжелую работу и через несколько секунд предоставит вам ссылку на веб-сайт, по которому вы сможете зайти по адресу myawesomesite/wp-admin.php.

Поздравляю вас! Если вы зашли так далеко, у вас уже есть веб-сайт WordPress. Теперь давайте настроим его!

HostArmada Доступный облачный SSD-хостинг

Установка и настройка темы Prespa

Чтобы получить максимальную пользу от этого урока, я советую вам использовать тему Prespa. По-моему, эта самая красивая и универсальная тема, когда-либо созданная нашей командой (Nasio Themes). Вы можете создать веб-сайт любого типа благодаря ей обширным возможностям тем и многочисленным шаблонам. В то же время тема чрезвычайно легкая и простая в использовании. В этом уроке мы создадим веб-сайт фитнес-зала, но вы увидите, насколько легко и просто создать с ее помощью дизайн любого типа. И самое приятное то, что с темой Prespa вам не нужны никакие дополнительные плагины для настройки вашего сайта — мы будем использовать только блоки Gutenberg, которые находятся редактором WordPress по умолчанию. Никаких дополнительных затрат или дополнительного обучения не требуется! Ну давайте начнем. После входа в админ-панель WordPress, перейдите в «Внешний вид => Темы» и нажмите кнопку «Добавить новую тему» ​​в правом верхнем углу. В строке поиска введите «Prespa», а затем установите и активируйте тему. После активации темы перейдите в «Внешний вид» => «Настроить», и вы загрузите стартовый контент для темы Prespa. Нажмите «Сохранить». Не волнуйтесь, если некоторые разделы вам не нужны или вы хотите их настроить — я покажу вам, как это сделать в следующем разделе.

Настройка веб-сайта

Если вы следовали за нами до сих пор, значит, вы создали веб-сайт на WordPress и добавили демонстрационный контент в тему Prespa. Теперь давайте внесем некоторые изменения. Чтобы настроить главную страницу, нажмите на «Редактировать страницу» в верхней панели, и вы увидите страницу в административной панели WordPress. Kaждая страница состоит из блоков Gutenberg, а эти блоки Gutenberg собраны в шаблоны (patterns). Чтобы получить хороший обзор всех используемых на сайте блоков, вы можете нажать на три черточки в верхнем левом углу.

Gutenberg Blocks - list view

Чтобы настроить любой из блоков, сначала вам нужно его выбрать, и этот список делает вещи очень простыми. Чтобы удалить любой из разделов, вы можете просто нажать на три точки в верхней части выбранного блока и нажать на «удалить». Чтобы изменить стиль блока, нажмите на иконку стилей в правом углу экрана. Например, чтобы изменить цвет кнопки «Request demo», нажмите на элемент, а затем нажмите на вкладку «Styles».

Styles tab - change color of a button in the Gutenberg editor

Чтобы изменить текст и ссылку кнопки, просто нажмите на неё и введите желаемый текст. Нажмите на значок вложения, чтобы добавить ссылку.

Чтобы изменить изображение, нажмите на него и нажмите «Заменить» (Replace), затем загрузите выбранное изображение.

Gutenberg blocks - Replacing images

Пожалуйста, не забудьте предварительно сжать изображения. Важно сжимать изображения перед их загрузкой на сайт, потому что большие изображения могут снизить скорость загрузки вашего сайта, что негативно влияет на пользовательский опыт и SEO. С другой стороны, сжатие изображений перед загрузкой на веб-сайт может положительно сказаться на вашем сайте по нескольким причинам, включая более быстрые времена загрузки, снижение использования пропускной способности, повышение производительности сайта и эффективность использования места для хранения. Вы можете сжать изображения с помощью приложения Squoosh. Оно разработано Google и позволяет сжимать и изменять размер изображений онлайн, так что вам не нужно ничего устанавливать на ваш ПК или ноутбук. Вы также можете использовать расширение (плагин), которое будет делать это за вас автоматически. Я рекомендую WP Optimize для этого.

Шаблоны (patterns)

Посмотрите на все шаблоны (patterns), которые предлагает тема Prespa. Как мы уже отметили — шаблоны (patterns) — это набор блоков, которые собраны особым и визуально привлекательным способом, готовы к использованию на вашем веб-сайте. Prespa есть много предварительно созданных шаблонов, готовых к использованию вами. Все это бесплатно. Чтобы выбрать шаблон, нажмите на значок плюса в верхнем левом углу, затем перейдите на вкладку шаблонов и нажмите на «Prespa». Вы увидите список всех шаблонов, предоставленных темой Prespa. Вставьте шаблон, чтобы добавить его в редактор блоков.

Prespa theme patterns

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

Название и описание сайта

Перейдите в настройки темы Prespa (Внешний вид => Настроить) и нажмите на «Идентичность сайта». Здесь вы можете добавить логотип, а также обновить название и описание вашего сайта. Вы также можете добавить значок сайта (favicon) в этом разделе.

Site Identity tab in the theme customizer - adding site logo and changing site title and description

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

Создать или отредактировать меню сайта

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

Creating a menu in WordPress

Подробное руководство по функциям темы Prespa можно найти в официальной документации темы Prespa.

Создание контактной формы

WordPress — это отличное программное обеспечение, которое поставляется со всеми базовыми функциями, необходимыми для веб-сайта. Теперь, когда мы добавили тему и настроили макет, пришло время добавить дополнительные функциональные возможности. Можно сравнить WordPress с Windows, на которой еще не установлены программы. Чтобы иметь контактную форму, нам нужна «программа» или «плагин», если использовать терминологию WordPress. Так что давайте установим плагин контактной формы. Мы будем использовать плагин Contact Form 7. Это отличный бесплатный плагин, который позволяет создавать и настраивать любые типы контактных форм на вашем сайте.

Добавление контактной формы на ваш сайт WordPress с помощью плагина Contact Form 7 — это довольно простой процесс. Чтобы установить его, перейдите в Плагины => Добавить новый. В поле поиска плагинов введите «Contact Form 7» и нажмите «Enter». После установки нажмите «Активировать», чтобы начать использовать плагин.

После установки и активации плагина создайте страницу в Разделы => Добавить новую и назовите её «Контакт». В содержимом добавьте блок контактной формы Gutenberg, нажав на знак плюса «Добавить блок» в содержимом страницы (блок был добавлен плагином Contact Form 7).

Contact Form 7 Gutenberg Block

Добавьте контактную форму и сохраните страницу. Если все прошло хорошо, вы увидите контактную форму на своем сайте:

A basic Contact form with Contact Form 7 plugin

Встраивание карты в WordPress

Самый простой способ добавить карту в WordPress — это встроить её с помощью пользовательского HTML-блока Gutenberg. Для этого сначала перейдите на Google Карты и найдите местоположение, которое вы хотите отобразить. Как только вы выбрали местоположение, нажмите на кнопку «Поделиться» в правом углу всплывающего окна с информацией о местоположении. В новом всплывающем окне переключитесь на вкладку «Встроить карту».

Embedding a Google Map iframe

Здесь вы увидите HTML-код iframe, который можно скопировать, нажав кнопку «Копировать HTML». Наконец, вставьте этот HTML-код в код внутри пользовательского блока HTML. При этом будет встроен iframe Google Maps, отображающий выбранное местоположение прямо на вашем веб-сайте.

Резервное копирование вашего сайта WordPress

Чтобы создать резервную копию веб-сайта WordPress с помощью плагина Duplicator, начните с установки и активации плагина через панель управления WordPress. В интерфейсе администратора WordPress перейдите в плагины => добавить новый. В поле поиска плагинов введите «Duplicator» и нажмите «Enter». Установите и активируйте плагин. Как только Duplicator будет активирован, перейдите в раздел Duplicator на вашей панели управления. Здесь вы найдете опцию создания нового пакета; пакет в Duplicator по сути является полной резервной копией вашего сайта.

Duplicator plugin - adding a package

Начните процесс создания пакета, и Duplicator проведет вас через серию шагов для настройки вашего резервного копирования. Это включает в себя название пакета и выбор того, что включить в резервную копию. После настройки параметров переходите к созданию пакета. Duplicator затем собирает все необходимые файлы и информацию базы данных в один загружаемый пакет. После завершения процесса сборки вам будут предоставлены два файла для загрузки: установщик и архивный файл. Загрузите оба файла и храните их в безопасности. Эти файлы вы будете использовать для восстановления вашего сайта WordPress в случае сбоя или если вы захотите клонировать сайт в другое место. Регулярное создание новых пакетов — это хорошая практика, чтобы убедиться, что у вас есть актуальная резервная копия вашего сайта.

Поздравляю вас! Если вы дошли до этого момента, вы смогли создать и настроить веб-сайт на WordPress, не затрагивая ни одной строки кода! Как вы увидели, создать веб-сайт на WordPress теперь не так уж сложно, и вы можете сделать это с минимальными затратами. В то же время, вы сделали большое достижение, и самое лучшее во всем этом то, что перед вами откроились неограниченные возможности! Если вам понравилось это руководство, не забудьте поделиться в социальных сетях — это помогает нам расти и мотивирует создавать полезные для сообщества материалы. Желаю удачи в вашем проекте!