MODX теги — тегирование для ресурсов, при помощи MIGX.

MODX теги - тегирование для ресурсов, при помощи MIGX. MODX Revo

В данном уроке реализуем активные элементы — теги для любых MODX ресурсов при помощи MIGX. Тегирование будет сделано под SEO курс от Антона Маркина, который недавно прошел: SEO Геном. В тегах мы сможем ссылаться куда угодно: на любые ресурсы, сайты и саму страницу с тегами. Не будет ссылок с Get параметрами типа resours/&tag=kakoyto-teg, следовательно не будет мусорных страниц.

Создание MIGX конфигурации для тегов

Переходим в MIGX и добавляем новый элемент с именем «tag», в поле «Замена «Добавить элемент»» пишем: «Добавить теги» и переходим во вкладку Formtabs.

Добавляем конфигурацию MIGX для тегов

На вкладке Formtabs жмем на кнопку «Добавить элемент», откроется новое окно, в нем еще раз жмем на кнопку «Добавить элемент». И заполняем первый элемент: Fildname — name, Caption — Название тега и нажимаем «Выполнено».

Добавляем поля для элементов

Далее снова ждем на кнопку «Добавить элемент» и добавляем второй элемент: Fildname — link, Caption — Ссылка и нажимаем «Выполнено» и Снова «Выполнено».

Добавляем второй элемент

Теперь переходим во вкладку «Columns» и снова добавляем эти 2 элемента.

  1. Header: Название тега и Fild: name.Создаем разметку колонок
  2. Header: Ссылка и Fild: link.
    Создаем разметку колонок для тегов

Выполняем все.

Создание дополнительного поля (TV) для тегов с MIGX конфигурацией

Переходим во вкладку «Элементы» в дереве ресурсов и создаем новое TV поле:

  • Название: tags;
  • Подпись: Тегирование и переходим во вкладку «Параметры ввода»;Создание дополнительного поля (TV) для тегов с MIGX конфигурацией
  • Тип ввода: MIGX;
  • Конфигурации: tag и переходим во вкладку «Доступно для шаблонов»;
    Настраиваем параметры ввода tv
  • Выбираем шаблоны где будет доступно TV для ввода тегов и сохраняем.
    Выбираем шаблоны где будет доступно TV для ввода тегов

Заполнение тегов в ресурсах

Переходим в ресурс, во вкладку Дополнительные поля к которому назначили TV поле tags и заполняем теги нажав на кнопку: Добавить тег.

Добавляем теги к статье

Так вы можете добавить неограниченно количество тегов.

Заполнение ссылок на теги

Как я говорил выше в тегах можно ссылаться куда угодно, рассмотрим примеры:

  • на другой сайт: https://site.ru/;
  • на текущий ресурс: # — если вы решили проблему с якорными ссылками при помощи плагина или к примеру так [[~9]] — на fenom {$_modx->makeUrl(9)}, где 9 id текущего ресурса или вообще так /blog/statya — кусок URL без адреса сайта/
  • на другие страницы сайта: добавляются идентично тому как на текущий ресурс
  • на якорные ссылки (к примеру если у вас есть авто оглавление которое создает якоря к заголовкам) — вы можете ссылаться на эти якоря, к примеру так [[~9]]#imya-yakorya или {$_modx->makeUrl(9)}#imya-yakorya, где 9 id текущего ресурса.

Вывод тегов в ресурсах

Открываем шаблон ресурсов, где нужно выводить теги (в моем случае чанк tpl.4). В нем есть вот такая разметка тегов:

<div class="tags">
    <p class="mb-0"><i class="fa fa-tags text-theme-colored"></i> <span>Теги:</span> Law, Juggement, lawyer, Cases</p>
</div>

В плане SEO она немного неправильная, т.к. здесь теги — просто перечислены через запятую. Правильно чтобы они были активными элементами — ссылками. В общем удаляем данную разметку и на месте ее пишем вывод MIGX:

<div class="tags">
    <p class="mb-0"><i class="fa fa-tags text-theme-colored"></i> <span>Теги:</span> [[getImageList? &tvname=`tags` &tpl=`tplTag`]]</p>
</div>

Где tplTag чанк со следующей разметкой.

<a href="[[+link]]">[[+name]]</a>

Вывод тегов на fenom

На феном вызов getImageList будет выглядеть так:

<div class="tags">
    <p class="mb-0">
        <i class="fa fa-tags text-theme-colored"></i> <span>Теги:</span> 
        {set $rows = json_decode($_modx->resource.tags, true)}
        {foreach $rows as $row}
            <a href="{$row.link}">{$row.name}</a>
        {/foreach}
    </p>
</div>

Сейчас у нас вывод тегов идет сплошным текстом (нет разделения)

пример вывода тегов на сайте

исправим это при помощи CSS, для этого откройте файл со стилями сайта и внесите в него следующий код:

.tags a:not(:last-child):after {
  content: ', '
}

получим нормальный вывод.

нормальный вывод тегов

Вот так легко и просто реализовать тегирование ресурсов в MODX Revolution.

Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
web-revenue.ru
Добавить комментарий