Transcript
Введение
В этом уроке мы применим всё, что узнали до этого, — создадим страницы, записи, логотип сайта и навигационное меню.
Создание страниц
Сначала создадим страницы. Для этого я перехожу в раздел «Страницы», нажимаю «Добавить новую страницу», и после этого могу выбрать шаблон (паттерн), который идёт вместе с моей темой. Я использую стандартную тему Twenty Twenty-Four. Я выбираю подходящий шаблон и называю страницу «Главная». После публикации возвращаюсь в раздел страниц и создаю следующую — на этот раз без шаблона, с названием «Блог». Далее я создаю страницу «О нас» и выбираю соответствующий шаблон. И наконец, создаю страницу «Контакты» без шаблона. Теперь у меня есть все основные страницы.
Настройка отображения главной страницы
Далее я иду в «Настройки» «Чтение». Для главной страницы я выбираю “статическую страницу”: устанавливаю «Главную» как статическую главную страницу, а «Блог» как страницу записей. Напоминаю, если вы выбрали вариант «Ваши последние записи» для отображения главной, то в этом случае нужно будет редактировать шаблон Главная страница блога, так как страница сама по себе не создаётся.
Важно: если открыть статическую главную страницу и боковую панель настроек, то мы увидим, что она назначена шаблону «Страница» или «Страница по умолчанию», а страница «Блог» — шаблону «Главная страница блога». Это изменить нельзя. Остальные страницы также назначаются «Страница по умолчанию».
Создание записей
Теперь перейдём к записям. У меня уже есть две записи, а также рубрики и метки. Напоминаю: рубрики используются для группировки содержимого по основным темам, а теги — это как метки, которые уточняют детали. В качестве примера я создаю новую запись о Нью-Йорке, добавляю тестовый текст. В настройках выбираю рубрику «Путешествия» и создаю новую метку «Город». Затем устанавливаю изображение записи. Это главное изображение публикации. После публикации мы видим все три записи с рубриками и метками.
Настройка навигационного меню
Теперь рассмотрим меню навигации. Перехожу в «Внешний вид» «Редактор». Открывается Редактор сайта, справа видим главную страницу. Если открыть её, то сверху будет заголовок сайта из темы. При попытке редактировать заголовок сайта появляется сообщение: «Отредактируйте шаблон, чтобы изменить этот блок». Жмём «Редактировать шаблон». Теперь можно редактировать заголовок для шаблона страницы. Этот же заголовок используется и в шаблоне “Главная страница” блога, поэтому изменения будут применяться и там.
Навигационное меню в верхнем правом углу появилось автоматически при создании страниц. В списке видно, что пункты меню пока связаны со списком страниц. Чтобы сделать их отдельными, нажимаем «Редактировать» в боковой панели и отсоединяем список страниц. После этого можно управлять пунктами меню вручную, менять их порядок в Список или с помощью стрелок в панели блока.
Далее я добавлю социальные ссылки в меню: в “Блок навигации” выбираю “Кнопки социальных сетей” и добавляю X и Instagram, прописываю ссылки. В настройках Навигации можно создать новое меню или выбрать существующее, изменить выравнивание и ориентацию, включить «гамбургер» для мобильных устройств. В разделе Стили можно дополнительно оформить меню.
Добавление логотипа сайта
В хедере темы есть блок “Лого сайта”. Я кликаю по нему и добавляю изображение из медиатеки или загружаю с компьютера. Загружаю логотип и немного увеличиваю.
Добавление меню в подвал сайта
Я также хочу добавить меню навигации в подвал. Пролистываю вниз, вижу тестовое содержимое под «Быстрыми ссылками» (часть подвала по умолчанию). В “Списке” выбираю Блок навигации, нажимаю на три точки и прикрепляю нужное меню.
Выбор стиля
Теперь у меня есть меню в заголовке и подвале. В шаблоне “Главная страница” блога заголовок и подвал одинаковые. Следующий шаг — выбрать стиль сайта. В разделе Стили можно настраивать типографику, цвета, макет. Если нажать «Посмотреть стиль», откроется обзор всех доступных стилей темы. В качестве примера я выберу стиль Rust.
Добавление содержимого
Теперь, когда у нас есть страницы, записи, меню, логотип и стиль, можно добавлять содержимое на страницы и редактировать шаблоны. Например, страницу «Контакты» без шаблона можно строить с нуля. Чтобы изменить отображение записей, идём в шаблон “Главная страница” блога и настраиваем блок Query Loop, чтобы определить, как именно будут показываться записи.
Практическое задание
Перейдите в WordPress Playground и выполните следующие задачи:
- Создайте 4 страницы: Home, Blog, About, Contact.
- Установите статическую главную страницу и страницу записей, назначив Home и Blog.
- Создайте запись и добавьте изображение записи. Если нет картинок на компьютере, используйте https://unsplash.com/.
- Добавьте рубрику и метку, примените их к записи.
- Перейдите в Редактор и откройте шаблон Страницы. Добавьте логотип сайта в хедер шаблона. Ваши страницы автоматически появятся в меню.
- Добавьте значки и ссылки на X и Instagram в навигационное меню. В URL можно указать тестовый адрес.