Здравствуй, дорогой читатель. В предыдущих статьях мы начали настраивать тему сайта Астра. Установили основные параметры внешнего вида и создали шапку. Сегодня продолжим оформлять ваш ресурс. С помощью этой статьи вы настроите блог, установите внешний вид страниц, рубрик и записей, научитесь подключать встроенную функцию Похожие записи. Из этой статьи вы также узнаете, что такое хлебные крошки, зачем нужен этот навигационный инструмент на сайте и как его добавить. Настроите сайдбар и дополните его нужными виджетами.
Содержание
Блог сайта
Блог, или тело страницы — это основная ее часть для размещения различного контента по тематике сайта. Инструменты настройки размещены в разделе Блог. Войдя в него, увидим два подраздела: Блог/Архив (в нем настраивается страница рубрики) и Запись (здесь находится настройка внешнего вида страницы записи).
Настройка рубрик
Перейдем в подраздел Блог во вкладку Генеральные. Настроим элементы записи, видимые на странице рубрики. За включение и выключение видимости отвечает иконка с изображением глаза.
В блоке Структура записи включим видимость в строке Изображение записи и в строке Заголовок и метаданные. Ниже в блоке Мета из предложенных метаданных включим Комментарии и Рубрика. В строке Содержание записи выбираем Отрывок. Это значит, на странице рубрики у всех записей будут представлены изображения, названия, принадлежность к рубрике, количество комментариев и первый абзац текста.
Переходим во вкладку Дизайн. Видим уже выставленные размеры шрифтов заголовка рубрики (40) и заголовка записи (30). Оставим их без изменений. Нажимаем Опубликовать. Страница рубрики у меня выглядит вот так.
Настройка записей
Теперь перейдем в подраздел Запись во вкладку Генеральные и настроим внешний вид страницы с записью. Выставляем видимость изображения записи, ее заголовка и метаданных (видимость комментариев и рубрики). Внесение корректировок сразу видим в поле отражения результатов.
Можно заголовок статьи и метаданные разместить над изображением. Для этого в боковой панели мышкой цепляем строку Изображение и перетаскиваем его в нужное место. Вот так получилось. Таким же способом можно вернуть обратно. Также можно менять местами и метаданные.
Добавим в запись секцию Похожие записи
Функция Похожие записи предлагает читателю после статьи подборку постов по данной тематике. Благодаря этому пользователь сможет ознакомиться не только со свежими статьями блога или читаемыми им по запросу, но и с другими полезными материалами.
Кроме того, данная функция добавляет перелинковку страниц ресурса. Эту полезную секцию можно вставить с помощью плагина Related Post, а также без него в ряде тем WordPress. Например, в Астре.
Для ее включения в боковой панели инструментов (в которой настраиваем запись) спускаемся ниже. Включаем ролик в строке Включить похожие записи. После этого ниже открываются настройки их вывода. В поле Заголовок — пишем «Похожие записи:», выбираем его выравнивание по левому краю. Далее в строке Общее количество похожих записей — ставим 3. Количество колонок — выставляем 3. Видим в поле результатов появилась подборка похожих 3 записей (если у вас они есть) размещенных в 3 колонки.
Далее нажимаем на карандаш в строке Запрос записей. Настраиваем выбирать похожие записи по Рубрике. В следующей строке Сортировать — выбираем Случайным образом. Порядок — оставляем Возрастание. Закрываем меню Запрос записей крестиком и двигаемся ниже.
Выставляем параметры видимости похожих записей. В Структуре записей оставляем видимыми изображение записи и ее заголовок. Для всех Мета — отображение закрываем. В строке Включить отрывок записи ролик не включаем. Изменения от внесенных корректировок видим в поле отражения результатов. После выполнения всех настроек нажимаем кнопку Опубликовать.
Также на страницу можно добавить слайдер с изображениями. Он позволит просто и выгодно продемонстрировать большое количество информации, повысить визуальную привлекательность сайта и контента.
Хлебные крошки
Хлебные крошки — это инструмент навигации, показывающий пользователю его местонахождение на сайте и путь к нему в виде цепочки, как правило, от Главной страницы.
Данный инструмент бываем динамическим. И тогда отражает пройденный пользователем путь по посещенным именно им страницам. Причем путь указывается, начиная с первой посещенной страницы, а не от Главной и без учета их иерархии.
Обратные хлебные крошки используют кнопку Назад, при этом сохраняя на всех посещенных страницах установленные пользователем фильтры.
Хлебные крошки с выпадающим меню подразделов на каждом шаге позволяют читателю перейти в любой подраздел без возвратов на предыдущие позиции.
Кроме обеспечения комфортного пребывания пользователя на сайте, хлебные крошки являются элементом сниппета. Отображаясь в результатах выдачи наравне с заголовком и описанием страницы, инструмент предоставляет больше информации читателю еще до посещения ресурса. Этот навигатор также добавляет дополнительную перелинковку страницам.
Для больших инфосайтов, интернет-магазинов, форумов это незаменимое красивое средство его оптимизации и помощи посетителям. На маленьких сайтах, вероятно, в нем нет необходимости, но разработчики порой используют этот инструмент просто потому, что он нравится.
Каждый блок строки хлебных крошек — это отдельная ссылка, в которой можно использовать ключевые слова. Но не стоит этим злоупотреблять. Целиком вся строка должна выглядеть гармонично.
Навигатор хлебные крошки нужно располагать на виду. Излюбленное место под шапкой сайта. И правда, доступно и красиво. Нельзя размещать на главной странице. На ней эта строка выглядит несуразно. Последний блок в списке должен быть выделен и иметь название страницы, на которой находится пользователь. Остальные должны иметь короткие, но понятные наименования. Вся строка должна вписываться в общий дизайн сайта.
Как сделать хлебные крошки
Инструменты настройки этого блока находятся в разделе Хлебные крошки. В него из Консоли попадаем через раздел Внешний вид и подраздел Настроить.
Перейдя затем в раздел Хлебные крошки, попадаем во вкладку Генеральные и выбираем позицию данного инструмента относительно хедера — После. Выбираем разделитель между его элементами. Далее идет ролик, включением которого отключаем данный инструмент на главной странице. Остальные ролики отставляем отключенными. Листаем вниз и проверяем выравнивание хлебных крошек по левому краю.
Переходим во вкладку Дизайн и выставляем следующие настройки: цвет фона — розовый, цвет текста страницы нахождения — серый, цвет разделителя — черный, цвет текста со ссылками в обычном состоянии — черный, при наведении — красный.
Двигаемся ниже и в строке Шрифт текста выбираем семейство шрифтов — Roboto, размер — 18, насыщенность — Средний 500. В поле результатов видим внешний вид навигатора после настроек. Если устраивает, нажимаем клавишу Опубликовать.
Как сделать сайдбар: настройка виджетов
Сайдбар — это блок в виде визуально выделенной боковой панели сайта, который отображается на каждой его странице. Данный вид блоков на информационных сайтах используют очень часто. Реже используют два: правый и левый одновременно. На видном месте в сайдбаре размещают навигационное меню, потому что первоочередная задача — это комфорт пользователя при использовании сайта. Часто здесь можно увидеть строку Поиск по сайту. Так же в этот блок попадают рекламные баннеры. Инструменты его настройки находятся в разделе Сайдбар. Познакомимся с ними.
Из Консоли переходим в раздел Внешний вид и в подраздел Настроить. Далее заходим в раздел Сайдбар. Здесь уже есть настройки. Сайдбар по умолчанию имеет ширину 30% от ширины сайта и находится с правой стороны контентной части на всех страницах, записях и рубриках. Но можно разместить его слева или сделать сайт без него. Возможно изменить ширину сайдбара. Я оставлю данные настройки. Нажимаем кнопку Опубликовать.
За размещение контента в сайдбаре отвечают виджеты. Поэтому далее перейдем к инструментам работы с ними.
Возвращаемся в боковой панели на шаг назад и заходим в раздел Виджеты. Здесь только один подраздел — Основной сайдбар. Заходим в него и появляется доступ ко всем виджетам для их редактирования, удаления и добавления новых.
Как удалить виджет
Для удаления устаревшего виджета щелкаем в боковой панели по нему мышью. На его месте появляется форма его редактирования и меню с командами. В меню находим кнопку с троеточием, нажимаем ее и в следующем появившемся меню выбираем строку Удалить Устаревший виджет. Все, виджет удален. Удалите остальные. В пустой сайдбар добавим свои виджеты.
Как добавить виджет Рубрикатор
Для добавления виджета используем кнопку с плюсом Добавить блок. После нажатия на нее появляется меню с поисковой строкой. Вбиваем в нее Группа виджетов. Далее из предложенного списка выбираем соответствующую иконку. Внутри появившегося виджета снова нажимаем кнопку Добавить блок и в открывшемся меню находим иконку Список рубрик. Затем вместо слова Заголовок вбиваем «Рубрики:». Рубрикатор готов. У меня он состоит пока только из одной рубрики. Потому что только в ней имеются статьи. При добавлении постов в другие рубрики они в этом меню появятся автоматически.
Как добавить виджет Последние записи
Для добавления виджета нажимаем кнопку Добавить блок. В открывшемся меню находим и выбираем иконку Группа виджетов. Внутри появившегося виджета снова нажимаем кнопку Добавить блок и в открывшемся меню находим и выбираем иконку Последние записи. Вместо слова Заголовок пишем, например, «Свежие статьи:». У меня появилось меню со свежими статьями. При добавлении новых постов на сайт этот список будет автоматически обновляться.
Как добавить виджет рекламного баннера
Для добавления виджета нажимаем кнопку Добавить блок. В открывшемся меню находим и выбираем иконку Изображение. В появившемся виджете нажимаем клавишу Загрузить. Выбираем подготовленный на компьютере файл с баннером и нажимаем Открыть. Возможны и другие варианты загрузки, в зависимости от того, где расположен баннер. С инструментами загрузки изображений мы уже знакомились ранее. Об этом можно прочитать в статье Наполнение сайта контентом.
Для крепления ссылки к баннеру щелкаем по нему. В появившемся сверху меню выбираем кнопку Вставить ссылку. Вставляем в появившуюся для этого строку ссылку с адресом на нужной страницы и нажимаем стрелочку рядом. Нажимаем Опубликовать.
Получился вот такой сайдбар. В данном виде он будет представлен на всех страницах, записях и рубриках сайта. Теперь можно перейти на ресурс и проверить работу ссылки.
В сайдбаре удобно размещать поисковую строку.
Заключение
С помощью данной статьи вы настроили блог своего сайта. Познакомились с инструментами и установили нужные параметры внешнего вида его страниц, рубрик и записей. Добавили удобные инструменты для пользователей: меню Последние записи, навигатор Хлебные крошки и другие. Вы теперь умеете настраивать сайдбар и подключать в нем различные виджеты для вывода необходимой информации.
В следующей статье познакомимся с инструментами настройки подвала.
