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

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

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

Шаблон архива может быть оформлен с использованием сеток и других макетов в соответствии с вашей темой. Категории используются для запроса похожих по содержанию записей в шаблоне архива. Им можно присвоить имена и добавить их в меню для удобства навигации пользователей. Например, это могут быть категории «Новости», «Спорт», «Образ жизни», «События» или «Погода».

Давайте для начала посмотрим на макет. Вот у меня есть макет, где есть страницы клиник. Сделаем поближе. И это можно назвать категориями или рубриками. А сами клиники, например «Центр физкультуры», «Клиника Мельниченковой», «Клиника Караваева», — это уже будут записи.

Также есть рубрика «Экскурсии». А вот это уже будет записью. Или ещё проще, например, рубрика «Новости», а вот это уже будет записью. «Связь поколений», «По Чеховским местам…» — это отдельные записи будут.

Давайте перейдём в админку WordPress. Для начала давайте установим дополнительный плагин. Заходим в «Плагины» — «Добавить плагин». В поиске плагинов ищем плагин с названием Cyr-To-Lat. Он преобразует нелатинские символы в латинские. Cyr-To…

Вот он, сразу же нашелся, самый первый. Cyr-To-Lat преобразует нелатинские… Давайте установим и активируем его.

Вот у нас он теперь добавился. Теперь перейдём в настройки, в «Постоянные ссылки», и поставим галочку в «Название записи». У меня уже стоит. «Сохранить изменения».

Теперь, чтобы создать категории, рубрики и записи, переходим в «Рубрики» и создаём новую категорию, или, по-другому, новую рубрику. Так как у нас есть «Клиники», «Экскурсии» и «Новости», то так и сделаем. Напишем название: «Клиники», например.

Остальные поля заполнять необязательно. После того как мы установили плагин Cyr-To-Lat, у нас… Забыл сохранить. «Добавить новую рубрику». У нас автоматически ярлык поставился, как надо: латинскими буквами в нижнем регистре.

Давайте ещё создадим рубрики. «Экскурсии», например. Добавим новую рубрику. И «Новости». Добавляем новую рубрику.

Например, у нас ещё в «Клиниках» есть клиники Москвы и Санкт-Петербурга. Можно создать подрубрики. Например, «Москва» назовём. И создать её в родительскую рубрику — у нас будут «Клиники». «Добавить новую рубрику». Также «Санкт-Петербург». Также «Родительская рубрика» будет «Клиники». И вот у нас появились подрубрики. Другими словами, подкатегории.

После того как мы создали рубрики, можно добавлять записи. Заходим: «Добавить запись». Теперь тут можно добавить заголовок и содержимое записи. У нас есть заголовок, например давайте возьмём «Центр физкультуры и реабилитации». Скопируем. Вставим.

Возьмём, например, весь вот этот текст. Скопируем и вставим. С правой стороны у нас есть панель инструментов для записей. Здесь нужно установить изображение записи. У меня уже есть несколько изображений. Давайте возьмём вот это, например. Похоже.

И в атрибуте Alt обязательно нужно прописать описание картинки. Например, давайте для примера возьмём также заголовок. Пропишем.

И устанавливаем изображение записи. Также можно добавить отрывок. У нас отрывок — это вот эта маленькая статейка. Давайте её возьмём. Вставляем. И после того как мы добавили картинку и отрывок, переходим в «Рубрики» и обязательно выбираем, к какой категории или к какой рубрике относится эта запись. У нас она относится к «Клинике» и «Москве». Если не поставить здесь галочки, она будет по умолчанию без рубрики.

После того как мы всё установили, все поля, можно опубликовать. Опубликуем. И можно посмотреть запись. Вот у нас так будет выглядеть запись пока что. Это ещё только черновик. Мы всё это будем редактировать в Elementor.

Давайте перейдём обратно в нашу админку. «Записи». И вот у нас появилась эта запись — «Центр физкультуры и реабилитации». Рубрика — «Клиники», подрубрика — «Москва». У нас тут была уже одна запись «Привет, мир!». Её можно смело удалить.

Давайте добавим ещё несколько записей. Можно добавить здесь или добавить здесь.

Также возьмём вот эту, например. Заголовок. Так как у нас другого текста нет, мы, опять же, возьмём отсюда текст. Вставим. Установим изображение записи. Например, вот это. Или вот это. Также прописываем атрибут Аlt, установим изображение записи и добавим отрывок. Возьмём, опять же, вот этот. Скопируем. Вставим. И в рубриках ставим «Клиники», опять клиника Москвы. Опубликуем.

И далее также добавляем запись. После того как мы создаём запись, у нас ссылка приобретает вот такой правильный вид после установки плагина Cyr-To-Lat.

Теперь, когда я создал несколько записей, перейдём во «Все записи». Я сделал для клиник. Можно также сделать, например, для экскурсий. Берётся экскурсия. Заголовок. Например, вот этот текст описания. «Запись», и устанавливается изображение. Также атрибут Altдобавляется, и также — отрывок. И уже рубрику мы добавляем к «Экскурсиям». Опубликуем. И добавляем всё по той же схеме.

Также добавляем новости. Вот у нас новости. Перейдём на эту картинку. Вставляем. Вот здесь у нас немножко сложнее. Идёт сначала основная картинка, как здесь. Потом идёт текст. А потом идёт ещё одна картинка, потом — ещё текст. Это можно сделать вот так. Выбираем текст, вставляем. Потом в блоке выбираем изображение. Или загружаем, или берем из библиотеки файлов, если она уже подгружена. Я уже подгрузил. Также прописываем атрибут. Напишем: «Две женщины в галерее».

И также дальше в блоке ниже прописываем этот текст. Для изображения выбираем изображение. У меня эта картинка уже подгружена.

В атрибуте Alt обязательно напишем описание. Например, «Четыре человека в галерее». Отрывок выберем этот, небольшой. И в рубрике ставим «Новости». Также опубликовываем.

И таким образом мы создаём все записи для всех рубрик.

Я создал несколько записей: новостные записи, экскурсии. Теперь можно создавать шаблоны для записей. Для этого заходим в «Шаблоны», «Конструктор тем». И выбираем «Одиночная запись». Нажимаем плюсик. Как обычно, у нас появилась библиотека, но мы её не будем использовать. И у нас с левой стороны появились новые виджеты: «Заголовок записи», «Анонс записи», «Содержимое записи», «Сопутствующее изображение» и др.

Давайте создадим структуру. Вот эту. И давайте сразу же в дополнительных опциях по HTML-тегу добавим тег section. Также в «Расширенных» сделаем отступ снаружи 90 пикселей. Теперь добавляем заголовок записи, и у нас он будет добавляться из последней записи, которую мы добавили здесь. Вот у нас последняя запись — «От Красной площади до Воробьёвых гор». И тут он так же отображается. Но на рабочем сайте он будет отображаться, как надо. Давайте опять HTML-тег поменяем — H2. Но он точно так же стилизуется, как все остальные виджеты.

Теперь добавим контейнер. Для начала сделаем ему направление, и в этот контейнер добавим содержимое записи. У нас сюда добавляется содержимое. Также он стилизуется, как обычный.

Давайте добавим теперь сопутствующее изображение. И также оно стилизуется. Ширина, например, скругление углов. У нас здесь такие: 40, 40, 0. Также сделаем для наглядности, чтобы красиво было. Слева уберём, и у нас вот так получается. Для наглядности, чтобы было.

Давайте ещё посмотрим на макет. У нас, например, для записей новостей используется дата. Здесь дата используется, здесь дата используется. Для вывода этих дат используется виджет «Информация о записи». Добавим. Добавим контейнер и в контейнер уже поставим информацию о записи и содержимое. «Расширенные», ширину по умолчанию сделаем.

Не видно. Поменяем текст сразу на чёрный. В информации о записи выводится у нас вся информация. Автор, например, дата, время публикации записи и комментарии. Также можно добавить какой-нибудь элемент. Выбрать, например, из выпадающего списка — давайте «Термины» сделаем. Выберем «Рубрики». И вот у нас ещё добавилась рубрика «Экскурсии» сюда.

Но на самом деле они не нужны. У нас по макету только дата идёт. Давайте все удалим. Оставим дату. И её тоже можно поменять немножко. Формат даты сделать, например, вот такой. Или можно даже сделать индивидуальный. Вот: «Используйте символы» — тут подсказка у нас. Давайте сделаем вот так: дата, точка, месяц, точка и год с большой буквы.

У нас вывелась дата: 24.07. Это как раз выводится дата, когда была опубликована эта запись. Но можно, например, поменять. Давайте зайдём вот сюда. Нет, давайте зайдем в другую запись. В новостную какую-нибудь. Давайте «Связь поколений». «Изменить». И вот: дату и время здесь можно поменять, на какую вам надо. Давайте посмотрим, какая у нас здесь. 03.04.2023. Давайте вот так сделаем. Третьего апреля 2023-го. И сохраним.

Теперь у нас в записях она ушла вниз, потому что она, как бы получается, опубликована раньше всех.

Тут же, в «Метаданных», можно ещё менять. Закрыть ссылку, чтобы не использовалось как ссылка, и также иконку можно отключить, так как у нас там ее нет. Или можно добавить какую-нибудь индивидуальную из библиотеки иконок. Или svg. Но у нас ее нет, так что давайте отключим. И точно так же всё стилизуется. Иконки у нас нет. Текст давайте сделаем. Давайте возьмём отсюда, вот этот… Font Montserrat, Weight… 18, 20, 700…

И так же поменяем: 18, 700, 20. Также можно посмотреть, какой тут шрифт: Montserrat. Скопируем. Поменяем ещё вот это. И вот. Как всё получилось красиво.

Также, например, у нас сделаны карточки. Вот карточки, вот карточки для вывода записей. Вот карточки для вывода записей. Для этого — для вывода записей — используется виджет «Записи». Вот он выводит все наши записи, которые были последние. Давайте отступ снаружи сделаем тоже побольше.

Но на самом деле это уже устаревший виджет. Я теперь использую виджет, который называется Loop Grid. Он точно так же выводит записи. Давайте добавим. Но только здесь можно его настроить очень гибко, как надо. Давайте опять сделаем отступ.

Посмотрим, что он из себя представляет. Давайте сначала выберем «Запрос», источник у нас будет «Записи». Также можно выбрать вручную. Включить по «Термину», и например, у нас будет рубрика… Давайте «Клиники» возьмём. «Клиники».

Выбираем «Рубрики: Клиники». Можно какие-нибудь другие рубрики, какие у нас есть: «Экскурсии» или «Новости». Также дату — это всё мы пропускаем пока что. И можно теперь нажать на кнопку Create a template. Нажимаем «Сохранить». И теперь можно создать карточку. Вот такую вот. Такую можно, или вот такую… Давайте сделаем для клиники, раз выбрали. Выберем сопутствующее изображение, заголовок, анонс, кнопку. Давайте так и сделаем. «Сопутствующее изображение» — давайте для начала сделаем макет. И уже сейчас сюда «Сопутствующее изображение». Также можно стилизовать.

Скругление углов у нас 40, и в конце 0. Также давайте добавим контейнер под сопутствующее изображение. А у этого контейнера мы, например, 0 сделаем. Теперь в этот контейнер давайте добавим заголовок записи. Также стилизуем: поставим H3. Стилизуем — поменьше сделаем. На глаз. Не буду брать отсюда.

Также анонс записи сюда добавляется. Это как раз вот этот, который в записях идёт у нас отрывком. Так, давайте посмотрим… Вот у нас отрывок. И вот как раз подтягивается этот отрывок. И также можно поставить кнопку. Ставим кнопку. Также её стилизуем, как надо. И сюда в динамические теги (ссылки), вспоминая предыдущие уроки, ставим URL-записи.

Так, давайте контейнер мы всё-таки немножко стилизуем. Отступ внутри сделаем 30 пикселей. Вот у нас получилась карточка. Белое на белом.

Давайте добавим контейнеру границу. Тень. Так, чуть-чуть поменьше, чтоб не так ярко было. Так, смотрим. И давайте ещё сделаем вот так. Отрицательный margin добавим. Примерно 30 пикселей сделаем. А картинке, чтобы она была поверх нашего контейнера, давайте добавим Z-индекс 2. Вот она поверх нашего контейнера. Контейнеру мы теперь ещё зададим отступ внутри. Ещё добавим 30 пикселей дополнительных. Вот и всё.

Теперь можно сохранить и выйти. Вот у нас подтягиваются все записи. Теперь мы можем всё это настроить. Давайте настроим. Сделаем чтобы только три записи выводилось, а не шесть. В «Запросе» мы зададим «Записи». Хотя нет, давайте сделаем «Похожие». И сделаем по термину… «По термину», «Рубрики».

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

Теперь можно опубликовать. Нажимаем «Опубликовать», «Добавить условие». Выберем рубрику. И давайте выберем рубрику «Клиники». «Сохранить и закрыть».

Давайте теперь посмотрим на действующий сайт. Зайдём в «Записи» и, например, давайте откроем, раз у нас для клиник сделано, «Центр физкультуры…».

Зайдём в предпросмотр новой вкладки. И вот у нас подтягиваются наш заголовок, наше содержимое, картинка. Также давайте посмотрим сюда, в «Больницу Вольнинскую», например. Так… Вот у нас подтянулось — «Больница Вольнинская».

Так как мы здесь сделали похожие записи (запрос похожих записей), то у нас сюда выводятся похожие записи. Так, у нас немножко карточки сбились. Давайте подредактируем. Давайте для этого контейнера зададим минимальную высоту. Примерно 300 сделаем. И для вот этого анонса записей сделаем «Растягивать». Вспоминаем прошлые уроки, и теперь у нас кнопка будет прижата всегда книзу. Давайте обновим.

Так… Посмотрим. Тут тоже обновим страницу. И вот у нас всё ровненько и аккуратненько. Сохраняем.

Теперь давайте зайдём в «Конструктор тем». И переименуем шаблоны для нашего удобства. Например, вот это будет шаблон не «Одиночная запись» #1545 (непонятно, что она из себя представляет), а «шаблон клиники». Включаем изменения. Так, перейдём на сайт… И также сделаем для карточек, чтобы было не Elementor Loop item, а также переименуем. Давайте в «карточки клиник».

Ещё раз повторяю: это для нашего же удобства. Потому что, если тут будет несколько шаблонов: шаблон для экскурсий, шаблон для новостей… Карточка для экскурсий, карточка для новостей… Чтобы в них не запутаться, мы их переименовываем.

Есть ещё архивы записей. Давайте создадим архив записей. Опять у нас библиотека, как обычно. Давайте создадим опять структуру. Зададим отступ. И давайте добавим заголовок архива. Также зададим сразу HTML-тег H3 или H2. Можно также стилизовать, как обычно.

И ещё здесь, в архивах, нажимаем на вот этот гаечный ключик. Можно убрать галочку «Встроить контекст». Я вам покажу, для чего это нужно. Пока я сейчас оставлю. Также есть «Расширенные». Можно, например, чтобы писалось не «Архивы», а добавить фоллбэк. Давайте «Клиники» добавим. «Клиники»… Что-то не сработало… Ладно. Удалим.

Тогда можно опять добавить ещё этот наш виджет — наши записи, Loop Grid. И в макете можно выбрать макет сделанной нами уже карточки. Давайте «клиники». Вот: «карточки клиник (Шаблон)». И она сразу у нас подтягивается, что очень удобно. Но в «Запросах» нужно заново задавать записи, что тоже очень удобно, потому что мы можем включить какие-нибудь другие. Давайте включим также по термину «Клиники» рубрику «Клиники». Вот, у нас подтянулось.

Также давайте сделаем порядок. Поменяем не по убыванию, а по возрастанию. Вот у нас поменялся порядок. Также можно сортировать по- другому, по дате. Также можно в «Макете» создать в архивах побольше страниц. Например, 10. Но так как у нас всего 6 записей для клиник, то у нас и выводится всего 6. Давайте сделаем 3 пока что. И покажу, что можно добавить нумерацию страниц. Например, сделать «Номера». Или добавить «Номера + Пред/Следующий». Нажимаю — будет переключаться.

Также это всё стилизуется. В «Стилях» можно поменять всю типографику. Давайте текстом сделаем. Ещё что-нибудь. Отступы от карточек. Также в «Макете», забыл сказать, можно добавить расстояние между карточками. Например, давайте сделаем побольше — 40. Давайте обратно вернёмся и нумерацию страниц уберём, а в запросах (в макете, вернее) добавим 10.

Теперь, когда мы всё сделали, давайте опубликуем. Добавим условие: не все архивы, а выберем именно по рубрике. Мы возьмём «Клиники». «Сохранить и закрыть».

Так, давайте теперь посмотрим нашу рубрику. Вот эти «Клиники». Нажмём «Перейти». И вот как мы сделали в шаблоне, у нас здесь пишется «Архивы», а здесь уже пишется «Рубрика: Клиники». Вот для чего я говорил, что вот эту галочку лучше убрать. Обновим. Обновим. И вот у нас теперь просто «Клиники».

Также, как мы сделали, теперь можно скопировать наш URL-адрес. Давайте зайдём: «Внешний вид», «Меню». И для примера у нас есть пустая ссылка. Давайте для примера сюда, в пустую ссылку, добавим наш URL-адрес. Сохраняем меню. Давайте теперь в какую-нибудь страницу зайдём. Обновим.

Так, почему-то у нас так показывает. Ну ладно. Нажмём вот сюда, на ссылку. И вот у нас рубрика «Клиники». Теперь можно нажать, например, на клинику Мельниченковой. И вот: мы переходим на клинику Мельниченковой.

Также нажмём… Давайте Балтийскую выберем. И у нас всё подтягивается. Если вернуться в архивы, так как мы создали всё с шаблонами, автоматически у нас подтягиваются нужные нам данные.

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

На этом у меня всё. Увидимся на следующем уроке. Пока.