Использование меток

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

Очень часто метки используются для уточнения рубрики записи. Например, если запись относится к «Супы и бульоны» и «Холодные супы», то для записи можно сделать метку «окрошка». Если на неё кликнуть, то появятся все записи с этой меткой.

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

Как создавать метки

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

Виджет меток

Если мы хотим вывести список меток в сайдбаре, то для этого нам пригодится плагин tagclouds. Активируйте его и добавьте в сайдбар. В настройках виждета будет много настроек. Пока рассмотрим его дефолтный вариант.

И вот так он выгладит на сайте:

Рассмотрим некоторые настройки этого виджета.

Поле «Формат» задаёт html-код для вывода каждой метки. В нём вставки [SIZE] [URL] [TAG] [COUNT] автоматически заменятся на размер, адрес, метку и количество соответственно.

Размер в формате задаётся в виде кода font-size: [SIZE]%. Это CSS-стили, где свойство font-size задаёт размер шрифта. Здесь он указывается в процентах от основного размера текста сайта (он равен 100%). Опции «Мин. размер (%)» и «Макс. размер (%)» ограничивают диапазон размера текста. Плагин сам подсчитает количество записей для каждой метки и распределит его между мин. и макс. То есть в нашем примере это будет 90..230%.

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

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

Поле, аналогичное «Формат», в том или ином виде часто используется в плагинах, виджетах, в настройках MaxSite CMS. Здесь мы уже работаем с HTML, а значит возможности оформления доступны в очень широких пределах.

Сейчас формат задан так:

<span style="font-size: [SIZE]%"><a href="[URL]">[TAG]</a> <sub style="font-size: 12px;">[COUNT]</sub></span>

Давайте попробуем его изменить на что-то другое. Скопируйте в поле «Начало блока»:

<div class="mso-tagclouds t-white links-no-color-imp">

и поле «Формат»:

<a class="b-inline bg-blue600 hover-bg-blue500 pad10-rl pad5-tb mar5-b rounded5 hover-no-underline" href="[URL]">[TAG] <sub>[COUNT]</sub></a>

После сохранения получится вот такой вариант:

Здесь мы используем css-классы Berry CSS. Вам не нужно их запоминать, но для полноты объяснения, приведу их назначение:

• mso-tagclouds — системный класс, в принципе его можно не указывать
• t-white - белый текст
• bg-blue600 - синий (blue) фон (bg — background) (значение цвета — 600)
• hover-bg-blue500 - при наведении (hover) фон будет blue500 (то есть чуть ярче)
• pad10-rl - внутренний (pad — padding) отступ 10px справа (r — right) и слева (l — left)
• pad5-tb - внутренний отступ 5px сверху (t — top) и снизу (b — bottom)
• mar5-b - внешний (mar — margin) нижний отступ 5px
• rounded5 - скругление углов радиусом 5px
• b-inline - css-свойство, позволяющее применять к строковым элементам блочные свойства
• links-no-color-imp — для внутренних ссылок не менять цвет, а использовать родительский (у нас это t-white)
• hover-no-underline — при наведении не подчеркивать ссылки

У вас может возникнуть вопрос — что это за цвета и откуда их брать? В комплект Default шаблона включена специальная страница по адресу https://ваш-сайт/mfdesign, где вы можете ознакомиться с цветами и некоторыми элементами шаблона.

Сам по себе шаблон написан на Berry CSS, а значит вы можете применять эти же css-классы где угодно.