Пошаговое руководство по созданию и публикации веб-сайта

Знание того, как создать веб-сайт с нуля, необходимо любому владельцу бизнеса.

Вам не нужен опыт программирования, чтобы создать свой бизнес-сайт с помощью WordPress.

В этой статье представлено пошаговое руководство по созданию веб-сайта с нуля.

Оглавление

Шаг 1: Зарегистрируйтесь на веб-хостинге

Я использую Bluehost для размещения всех своих сайтов WordPress. Когда вы впервые зарегистрируетесь в Bluehost, вы получите БЕСПЛАТНОЕ доменное имя на один год. Или вы можете купить свое доменное имя в других местах, таких как Namecheap (я часто им пользуюсь).

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

Шаг 2: привяжите домен от Namecheap к Bluehost

Обновите серверы имен на ns1.bluehost.com и ns2.bluehost.com. Вам необходимо установить эти серверы имен как Пользовательские для вашего домена. Вы можете сделать это, выполнив следующие действия:

  • После входа в свою учетную запись выберите Список доменов на левой боковой панели.
  • Нажмите кнопку Управление рядом с вашим доменом в списке.
  • Затем найдите раздел Серверы имен и выберите Пользовательский DNS в раскрывающемся меню:

Панель управления Bluehost – › Домены – › Назначить

  • Введите новое доменное имя
  • Выберите Добавить домен.

Потому что мне нужен совершенно новый веб-сайт для urbesth.com, отдельный от моего основного домена.

  • Создайте новый каталог:

Для удобства я просто использую свое доменное имя urbesth в качестве имени подкаталога.

Теперь в области Мои домены urbesth.com отображается как дополнительный домен.

Шаг 3: Создайте новый сайт WordPress на Bluehost

Перейдите в Панель управления Bluehost –› Мои сайты > Добавить сайт > Создать новый сайт.

Продолжайте завершать первоначальную настройку нового сайта WordPress для urbesth.com:

Теперь сайт urbesth.com отображается в области Мои сайты:

Шаг 4: Установите и активируйте тему WordPress — Blocksy

Нажмите Управление сайтом, чтобы войти в панель управления WordPress.

Панель управления -> Внешний вид -> Темы -> Установить новую тему -> Blocksy

Вот как выглядит сайт:

Шаг 5: Создайте и опубликуйте новые сообщения

Перейдите в раздел Панель инструментов WordPress -> Сообщения -> Добавить новый.

Добавьте заголовок и опубликуйте контент. Не забудьте добавить категорию и избранное изображение.

Давайте посмотрим, как выглядит пост в режиме предварительного просмотра (Предварительный просмотр -> Предварительный просмотр в новой вкладке)

В режиме предварительного просмотра выглядит хорошо.

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

Вот как это выглядит на живом сайте (https://urbesth.com/):

Давайте добавим больше постов разных категорий в качестве хорошей демонстрации:

Шаг 6: Создайте заголовок

Панель управления WordPress – › Внешний вид – › Настройка – › Общие – › Макет

Вы можете изменить макет содержимого здесь:

Пока давайте просто оставим настройку по умолчанию.

Добавить кнопку подписки

Поскольку это веб-сайт журнала, давайте добавим кнопку Подписаться для аудитории.

Демонстрация: добавление кнопки "Подписаться"

Добавить логотип

Панель управления > Внешний вид > Настройка > Общие > Заголовок > Логотип

  • Загрузите свой логотип
  • Отключить заголовок сайта
  • Включите слоган сайта и добавьте слоган для своего веб-сайта.

Демонстрация: добавление логотипа

Добавьте меню

  • Главное правое меню — Меню 1

Вот как выглядит Меню заголовка 1:

Совет: не забудьте нажать Сохранить меню после создания нового меню.

Демонстрация: добавить главное правое меню — Меню 1

  • Добавить главное левое меню — Меню 2

Вот как выглядит меню заголовка 2:

Демонстрация: добавить главное левое меню — Меню 2

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

Демонстрация: оптимизируйте заголовок для просмотра на мобильных устройствах

  • Опубликовать новые изменения

Шаг 7: Настройте домашнюю страницу

1. Создайте новую пустую страницу в качестве главной страницы веб-сайта.

Панель управления WordPress -> Страницы -> Добавить новую -> ..-›Опубликовать

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

Вот как выглядит домашняя страница на живом сайте:

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

2. Отключите заголовок страницы «Главная» на нашей новой домашней странице (главной странице сайта WordPress).

Панель инструментов – › Страницы – › Все страницы – › Нажмите «Изменить» на главной странице — Первая страница

На главной странице нажмите Настройки страницы Blocksy.

Выберите Заголовок страницы > Отключено > Обновить

Обновите домашнюю страницу нашего веб-сайта (Cmd + R), вы увидите, что заголовок страницы «Главная» исчез.

Демонстрация: отключите заголовок главной страницы

3. Быстро создавайте блоки Post Grid с помощью плагина — PostX

Панель инструментов WordPress – › Плагины – › Добавить новый – › Поиск плагина «postX» – › Установить сейчас – › Активировать

Перейдите на нашу домашнюю страницу и обновите ее. Теперь мы увидим новую кнопку под названием «Наборы шаблонов», созданную PostX.

Нажмем кнопку и импортируем бесплатный журнал, например Magazine 2.

Тогда главная страница сразу становится такой:

Демонстрация: импорт шаблона PostX на главную страницу

Нажмите кнопку Обновить в правом верхнем углу, чтобы обновить новый дизайн нашего работающего веб-сайта:

4. Уточните дизайн блока сообщений на главной странице.

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

Вы можете найти параметр запроса либо на панели инструментов блока, либо в Настройки:

Панель инструментов «Блок» — «Запрос»: выберите целевой блок, который вы хотите изменить —> Нажмите Запрос —> Источники: Опубликовать—> Таксономия: category –› Значение таксономии: ИИ и здравоохранение

Настройки — Конструктор запросов: выберите целевой блок –> Нажмите кнопку Настройки в правом верхнем углу –> Прокрутите вниз, чтобы найти Конструктор запросов. option –› Источники: Post –› Таксономия:категория –› Значение таксономии: ИИ и здравоохранение

Демонстрация: запрос сообщений по категориям

Вот как это выглядит на нашем сайте:

Шаг 8: Настройте страницу сообщения

1. Добавьте оглавление в длинную публикацию.

Сначала откройте целевую публикацию, активируйте панель инструментов блока, введя «/», и найдите оглавление.

Демонстрация: добавление ToC (оглавление) к длинному сообщению

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

На панели инструментов блока выберите «Запрос» -> «Источники: пост» -> «Таксономия: категория» -> «Значение таксономии: ИИ и здравоохранение».

Демонстрация: отображение определенных сообщений по категориям в сообщении

Результат:

3. Настройте отдельный пост

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

Панель инструментов WordPress – Внешний вид – Настройка – Типы сообщений: одиночное сообщение

Давайте включим «Поделиться», «Навигация по записям», «Похожие записи» и «Комментарии», как показано ниже:

Результат:

Шаг 9: Настройте нижний колонтитул

1. Создайте меню нижнего колонтитула

Создание нового меню, отображаемого в качестве нижнего меню, означает, что созданное новое меню будет отображаться везде, где находится нижнее меню.

Демонстрация: создание нижнего колонтитула

2. Настройте нижний колонтитул — добавьте значки социальных сетей и меню нижнего колонтитула.

Панель инструментов WordPress > Внешний вид > Настройка > Нижний колонтитул

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

Демонстрация: настройка нижнего колонтитула

Шаг 10: Обновите глобальные стили

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

Пример: заменить значок сайта

Панель инструментов WordPress > Внешний вид > Настройка > Идентификация сайта > Выбрать значок сайта

Демонстрация финального веб-сайта

Заворачивать

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

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

Я надеюсь, что вы найдете его полезным для создания вашего бизнес-сайта.

В будущем я сделаю больше руководств по использованию WordPress для начинающих.

Как я создаю сайт на WordPress для проекта iReadAction:



[Документ iReadAction #3] Создание веб-сайта WordPress: пошаговое руководство
Это третья часть серии «Журнал проекта iReadAction. blog.ireadaction.com»