Все для создания и продвижения сайтов

Верстка, программирование, SEO

PrettyTags - дружелюбные теги в MODX

Представляю мой новый компонент PrettyTags. Компонент, который даёт возможность создавать и управлять тегами с красивыми ЧПУ ссылками. Компонент уже выложен в репозиторий modstore.pro.

Приемущества компонента

  • Дает возможность создавать динамические красивые url для тегов. Например, site.com/tag/some-tag.
  • Есть страница по управление тегами, где мы указываем: alias, название, описание. Можно добавлять, удалять, редактировать и отключать теги.
  • Есть собственное TV-поле, в которые подгружаются все добавленные теги и нельзя нечаянно добавить новый тег, что удобно при работе с контент-менеджерами, также не показываются отключенные теги
  • Есть собственный сниппет для вывода облака тегов, который легко кастомизируется.
  • Страница с выводом тега сразу получает все поля, где мы можем легко их вывести и использовать с другими компонентами
  • Вы можете менять названия и другие поля тегов, при этом в ресурсах ничего не потеряется.
  • Намного производительнее по сравнению с ТВ «Авто-метка», так как теги собираются не у каждого ресурса, а из одной сущности

Обзор компонента

Компонент добавляет новую страницу в админке по управлению тегами. Где вы можете добавлять, удалять и редактировать новые теги.

PrettyTags - страница тегов

Добаляется новое TV-поле, аналогичное "Авто-метка", за исключением, добавления новых тегов

PrettyTags - TV тега

Подключению к сайту

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

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

Cоздаём TV-поле с типом "prettytagstv" для вывода и работы с тегами. Добавляем новые теги на странице "Пакеты - Pretty Tags"

Для отображении тегов в ресурсе, вызываем сниппет prettyTagsResource

[[!prettyTagsResource?
    &tpl=`tags_item`
    &input=`[[*tags]]`
]]
// в Fenom
{$_modx->runSnippet('!prettyTagsResource', [
    'input' => $_modx->resource.tags,
    'tpl' => 'tags_item'
])}

Доступны следующие параметры:

  • input - значение TV-поля с тегами
  • tpl - tpl тега
  • sortby - сортировка по полю, например: sortby='name'
  • sortdir - направление сортировки, ASC или DESC
  • limit - маскимальное количество тегов на страницу, например: limit='10'
  • outputSeparator - разделить между тегами, например: outputSeparator=','

в tpl указываем свою разметку одного тега, если нужно:

<li>
    <a href="[[+url]]">[[+name]]</a>
</li>

<!-- [[+url]] - полный url на страницу тега -->
<!-- [[+alias]] - alias тега -->
<!-- [[+id]] - id тега -->
<!-- [[+name]] - название тега -->
<!-- [[+description]] - описание тега -->

Страница для отображения ресурсов по тегу

Нужно создать новый ресурс, который будет отлавливать наши теги. Важно: В данном ресурсе, снять галочку с “Кэшируемый” во избежании проблем.. Затем нужно указать ID этого ресурса в системной настройке prettytags_resource_id.

Теперь в шаблоне можно указывать все поля тега:

[[+pretty_tags_id]]     
[[+pretty_tags_alias]]  
[[+pretty_tags_name]]   
[[+pretty_tags_description]]

// Fenom
{$_modx->getPlaceholder('pretty_tags_id')}
{$_modx->getPlaceholder('pretty_tags_alias')}
{$_modx->getPlaceholder('pretty_tags_name')}
{$_modx->getPlaceholder('pretty_tags_description')}

Для вывода ресурсов по тегу, используем pdoResource или PdoPage

[[!pdoPage?
    &parents=`0`
    &includeTVs=`tags`
    &tpl=`tpl_article`
    &where=`["FIND_IN_SET('[[+pretty_tags_id]]', tags) > 0"]`
]]
[[!+page.nav]]

// в Fenom
{$_modx->runSnippet('!pdoPage', [
    'parents' => 0,
    'includeTVs' => 'tags',
    'tpl' => 'tpl_article',
    'where' => '["FIND_IN_SET(\''~$_modx->getPlaceholder('pretty_tags_id')~'\', tags) > 0"]',
])}
{$_modx->getPlaceholder('page.nav')}

Небольшая трудность, если вы вызваете хлебные крошки, так как теги динамичные, в хлебных крошках тега не будет, вариант обойти:

[[!pdoCrumbs?
    &tplWrapper => `@INLINE <ol class="breadcrumb">
        [[+output]]
        <li class="breadcrumb-item active">
            <a itemprop="item" href="[[*alias]]/[[+pretty_tags_alias]]">
                [[+pretty_tags_name]]
            </a>
        </li>
    </div>`
]]

// в Fenom
{$_modx->runSnippet('!pdoCrumbs', [
    'tplWrapper' => '@INLINE <ol class="breadcrumb">
        {$output}
        <li class="breadcrumb-item active">
            <a href="'~$_modx->resource.alias~'/'~$_modx->getPlaceholder('pretty_tags_alias')~'">
                '~$_modx->getPlaceholder('pretty_tags_name')~'
            </a>
        </li>
    </ol>',
])}

Облако тегов

В любом месте сайта, вы можете отобразить облако тегов, с помощью сниппета prettyTagsCloud

[[!prettyTagsCloud?
    &tvId=`1`
    &tpl=`tags_item`
]]

// в Fenom
{$_modx->runSnippet('!prettyTagsCloud',[
    'tvId' => 1,
    'tpl' => 'tags_item',
])}

Доступны следующие параметры:

  • tvId - Id TV-поля с тегами, обязательный параметр
  • tpl - tpl тега
  • sortby - сортировка по полю, например: sortby='name'
  • sortdir - направление сортировки, ASC или DESC
  • limit - маскимальное количество тегов на страницу, например: limit='10'
  • outputSeparator - разделить между тегами, например: outputSeparator=','
  • includeUnpublished - включить неопубликованные ресурсы, например: includeUnpublished='1'
  • includeDeleted - включить удаленные ресурсы, например: includeDeleted='1'

в tpl указываем свою разметку одного тега, если нужно:

<li>
    <a href="[[+url]]">[[+name]]</a>
</li>

<!-- [[+url]] - полный url на страницу тега -->
<!-- [[+alias]] - alias тега -->
<!-- [[+id]] - id тега -->
<!-- [[+name]] - название тега -->
<!-- [[+description]] - описание тега -->
<!-- [[+count]] - количество использования тега в ресурсах -->

Все пожелания и проблемы, прошу обсуждать здесь, для быстрого реагирования.

Обновление 1.0.1, сделано:

  • Теперь работает как со слешом на конце, так и без на странице тегов (https:/site.com/tag/some-tag или https:/site.com/tag/some-tag/)
  • Добавлена системная настройка - если тега не существуюет (на странице тегов), то отправлять на 404 страницу, по умолчанию включено

Обновление 1.0.2, сделано:

  • Сортировка по названию тега в ресурсе в тв
  • Автоматическое заполнение alias при создания тегов

Обновление 1.0.3, сделано:

  • добавлен плейсхолдер [[+count]] для tpl в сниппете prettyTagsCloud
  • добавлены параметры сниппета prettyTagsCloud: tvId (id TV с тегами, обязательный), includeUnpublished (включать с неопубликованными ресурсами), includeDeleted (включать с удаленными ресурсами)
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.