Бесплатный шаблон на UIkit 3 для новостных сайтов и сайтов компаний. Здесь собрано всё, что нужно знать, чтобы поставить его, настроить и не наступить на известные грабли: как устроена страница, где живут настройки, как шаблон режет картинки и ставит canonical, чем дочерний шаблон отличается от копии стиля. Все снимки сняты с демо-сайта «Вестник», который ставится вместе с шаблоном.
Схема страницы wmarka: 37 позиций модулей. Наведите курсор или нажмите на позицию — справа появится описание. Две нижние позиции видны только в мобильной панели.
Шаблон в Joomla отвечает за то, как выглядит сайт: шапка, колонки, карточки, подвал. Содержимое — статьи, метки, контакты — хранит сама Joomla, а шаблон решает, как его показать. Wmarka строит этот вид на UIkit 3: компоненты UIkit заменяют и Bootstrap, и большинство самописных стилей.
Шаблон вырос из работы над новостными сайтами, поэтому многое в нём сделано под редакцию: рубрика над заголовком, дата в виде «Сегодня, 14:32», карточка автора под статьёй, лента новостей, значки видео- и фотоновостей. Сайту компании это не мешает: те же позиции и стили модулей собирают лендинг или главную из блоков.
Для тех, кто собирает сайт руками и правит файлы, есть чистая сборка — wmarka clean: те же позиции, блоки и превью через JUImage, но ни одной настройки в админке. Раскладка задана в index.php, размеры картинок — в макетах вступительного и полного изображения.
Полная установка — один архив pkg_wmarka-4.1.0.zip. Joomla ставит из него десять расширений по порядку: сначала то, на что опираются остальные.
| Порядок | Расширение | Что делает | Можно ли без него |
|---|---|---|---|
| 1 | lib_juimage 5.21 | режет превью и переводит их в WebP | да, но картинки будут оригиналами |
| 2 | tpl_wmarka 4.1.0 | сам шаблон | — |
| 3 | plg_system_wmarka 1.0.0 | вкладка «Опции WMARKA» в пунктах меню | нет: без него опции стираются при сохранении пункта |
| 4 | tpl_wmarka_vestnik 1.0.3 | дочерний шаблон демо-сайта | да |
| 5 | com_blank 2.0.1 | пустая страница, собранная из модулей | да, главная из модулей соберётся и на другом пункте |
| 6–9 | Webmarka Articles Grid, Slider, Portfolio, Gallery 1.0.0 | сетка, карусель, плитки с окном, галерея материалов | да |
| 10 | plg_sampledata_wmarka | разворачивает демо-сайт «Вестник» | да |
pkg_wmarka-4.1.0.zip. Пакет сам включит компонент, плагин и установщик демо.Шестой шаг перезаписывает стиль шаблона и общие опции компонентов. На живом сайте ставьте пакет, а демо разворачивайте на копии.
Позиции от block-a до block-k выводит один метод шаблона, и правило у них одно. Если у всех модулей позиции стиль оформления blank, шаблон ничего вокруг не рисует: модуль сам приносит секцию во всю ширину — обложку, видеоблок, полосу с подпиской. Иначе шаблон оборачивает позицию сам: секция с фоном и отступами, контейнер, сетка с колонками по числу модулей, но не больше четырёх.
Суффикс класса модуля uk-width-… перебивает ширину колонки. Так на главной «Вестника» главная новость занимает две трети, а лента — треть.
Сколько модулей в позиции, какой у них стиль и нужен ли суффикс ширины.
У модуля два независимых переключателя. Стиль оформления («Дополнительно → Стиль модуля») решает, во что модуль обёрнут: белая карточка, акцентная, тёмная, приглушённый фон, плитка или ничего. Макет («Дополнительно → Макет») решает, как модуль показывает свои материалы: карточками, списком с миниатюрой, каруселью или лентой со временем.
| Стиль | Как выглядит | Где уместен |
|---|---|---|
wmarka | заголовок и содержимое; в блочной позиции заголовок становится заголовком секции | по умолчанию везде |
card, primary, secondary | белая, акцентная и тёмная карточки | сайдбар, подписка, баннер |
muted, tile | приглушённый фон и плитка | врезки, справки |
navbar | без обёртки, для навбара | позиции шапки |
blank | без обёртки вообще | секции во всю ширину |
Для модулей материалов есть четыре макета: wm-cards, wm-media, wm-slider и wm-feed. Переопределены все 25 модулей сайта Joomla 6, а ещё компоненты материалов, контактов, меток, умного поиска и пользователей.
Настроек у шаблона два уровня. Общие — в стиле шаблона: девять вкладок, больше 120 параметров, от логотипа до счётчиков. Частные — в пункте меню, на вкладке «Опции WMARKA»: вид блога, переключатель «сетка / список», положение картинки в карточке, текст страницы com_blank.
Со вторым уровнем в версиях 4.0.x была ошибка, которую стоит понимать. Joomla строит форму пункта меню по XML макета компонента, а XML из папки шаблона читает только для альтернативного макета вида шаблон:макет. Копии XML штатных макетов, которые лежали в шаблоне, не читались никогда. Вкладки не было, а значения, записанные установщиком демо, жили до первого сохранения пункта.
С версии 4.1 поля добавляет плагин «Система — wmarka». Он берёт штатную форму ядра и дописывает к ней только поля шаблона. Поля ядра остаются те, что даёт установленная Joomla, поэтому новые параметры — в 6.2 это «Изображения подкатегорий» — появляются сами.
Пункт «Новости» (блог категории) и «Позиции модулей» (com_blank), как в демо. Переключите плагин.
Замер: формы загружены моделью пункта меню Joomla 6.1.4 и 6.2.0 и сохранены так же, как кнопкой «Сохранить».
Мегаменю включается словом в поле «CSS-класс ссылки» у пункта первого уровня. Колонки и ссылки удобнее всего держать во вспомогательном меню, которое модулем не выводится: пункты первого уровня станут колонками, их дети — ссылками. Ссылки лучше делать псевдонимами настоящих страниц, тогда адреса останутся чистыми, а текущая страница подсветится. Псевдоним, который ссылается на другой псевдоним, Joomla не маршрутизирует — ведите псевдоним прямо на страницу.
wm-mega:news-mega: колонки разделены линией, у ссылок подписи из «Примечания» пункта, справа промо-колонка с модулем. Справа — окно во весь экран wm-mega-modal:template-mega.Выберите, что нужно, — внизу готовая строка для поля «CSS-класс ссылки».
Если подписи не помещаются в строку навбара — длинные русские слова, другой язык, узкий экран, — лишние пункты уходят в «Ещё» с конца списка. Решает браузер по замеру, а не по числу пунктов. Пункты с выпадающим списком и мегаменю остаются на месте.
Подачу шаблон взял у новостных сайтов РК — zakon.kz, nur.kz, baq.kz, — но собрал только из классов UIkit. Над заголовком стоит рубрика, под ним — автор, дата, просмотры и время чтения. Первый абзац статьи становится лидом, цитата получает крупную кавычку подложкой. В конце статьи идут метки плашками, кнопки «Поделиться» и карточка автора со ссылкой на все его материалы.
Порядок слов задают языковые строки шаблона, поэтому китайскому и американскому английскому не нужен свой код.
Картинки режет библиотека JUImage. Шаблон держит одно превью на картинку для всех мест сайта: карточки блога, метки, поиск и модули берут один и тот же файл. Статья получает второй, крупный размер. Для соцсетей делается отдельный JPG 1200 × 630.
Два размера — это один кадр, поэтому карточки получают srcset из этих двух файлов и sizes по раскладке. Выбирает браузер: он берёт наименьший файл, которого хватает на ширину места, умноженную на плотность экрана.
Превью 720 px и 1200 px. Подвигайте ширину экрана и выберите раскладку.
Для новостей задайте превью 16 : 9 — 720 × 405 и 1200 × 675, как в демо. После смены размеров очистите папку img/: новые файлы появятся при первом заходе на страницу.
Canonical — ссылка, которой страница сообщает поисковику свой основной адрес. До версии 4.0.12 шаблон собирал его заново: спрашивал у роутера Joomla, где «живёт» статья, и роутер иногда называл соседний пункт меню или корень сайта. Если главный пункт меню — блог категории, это стоило бы индексации почти всех материалов.
Теперь canonical строится как у Aimy Canonical и плагина «Система — SEF» ядра: это адрес самой страницы, приведённый к одному виду. Дубли адресов убирает «Строгая маршрутизация» плагина SEF — 301-м перенаправлением.
Домен сайта — https://site.kz. Выберите адрес, с которым пришёл посетитель.
Разметку Schema.org шаблон отдаёт единым графом JSON-LD: организация, сайт с поиском, хлебные крошки, статья или новостная статья, страницы-списки, автор. Плагин ядра «Система — Schema.org» включён в Joomla по умолчанию и на чистой установке тоже выводит хлебные крошки — второй граф рядом с первым. Карточка «Состояние шаблона» предупреждает об этом: выключите плагин ядра или разметку шаблона.
Самые частые причины, по которым страница на телефоне становится шире экрана, — широкие таблицы в тексте, видео с фиксированной шириной и карусели без контейнера. Шаблон оформляет таблицы ещё на сервере: на экранах до 959 px ячейки идут столбиком, у каждого значения подпись столбца. Плееры YouTube и Vimeo не шире колонки, выпадающие списки и окна скрыты, даже если скрипты не загрузились.
Красным — до исправлений 4.0.15–4.0.17, зелёным — после. Полосы не в масштабе друг к другу: каждая пара сравнивает свою страницу.
В сетке с текстом задавайте колонке minmax(0, 1fr), а не 1fr, и min-width: 0 элементу сетки. 1fr не даёт колонке стать уже своего содержимого, и одна широкая таблица раздвинет всю страницу.
Свои правки держат в дочернем шаблоне, а не в самом wmarka: тогда обновление их не тронет. Создают его штатно: «Система → Шаблоны сайта → wmarka → Создать дочерний шаблон». Joomla сделает папку с манифестом, где указан родитель, пустую папку html/ и медиапапку для стилей, скриптов и картинок. Пример — wmarka_vestnik из пакета.
Дочерний шаблон и копия стиля — разные вещи. Копия стиля (кнопка «Копировать») — тот же шаблон с другими настройками. Дочерний шаблон — отдельная папка, где можно заменить любой файл родителя.
Сначала у дочернего шаблона, потом у родителя. Выберите, что ищем.
Форму стиля Joomla строит по манифесту дочернего шаблона — копии настроек родителя на день создания. Поэтому при каждом обновлении установщик wmarka переносит свои поля во все дочерние шаблоны: новые дописывает, прежние заменяет, свои поля дочернего шаблона не трогает.
Что проверено на стенде, а что держится только на коде. Чистая установка Joomla, пакет, демо-сайт, обход страниц с показом всех сообщений PHP.
| PHP 8.1–8.2 | PHP 8.3 | PHP 8.5 | |
|---|---|---|---|
| Joomla 5.x | по коду | по коду | по коду |
| Joomla 6.1.4 | — (ядру нужен 8.3) | проверено | проверено, 8.5.11 |
| Joomla 6.2.0 | — (ядру нужен 8.3) | проверено | по коду |
«По коду» значит: шаблон не использует ничего, чего нет в этой версии (например, createQuery() есть в Joomla с версии 5.0), но живого прогона на стенде не было.
Нажмите на версию, чтобы раскрыть подробности.
createQuery() вместо устаревшего getQuery(true).Чек-лист для запуска сайта на wmarka. Отметки сохраняются в этом браузере.
Если на сайте стоит Aimy Canonical, 4SEO или похожее расширение, выключите canonical шаблона. Тег на странице останется один в любом случае — шаблон берёт чужой canonical за основу, — но двум механизмам незачем работать над одним адресом.
Плагин ядра «Система — Schema.org» включён по умолчанию. Выключите его или разметку шаблона, иначе поисковик получит два графа.
С Joomla 6.2 редактор TinyMCE следует фильтру текста Joomla. Атрибуты uk-lightbox, uk-grid и другие сохраняются у групп без фильтрации; группам с фильтрацией их нужно разрешить в «Общих настройках → Фильтры текста».
Всё, что изменено в папке templates/wmarka, обновление перезапишет. Свои стили — в user.css (его обновление не трогает) или в дочернем шаблоне.
Копия XML штатного макета ядра в папке шаблона ни на что не влияет: Joomla читает XML из шаблона только для макетов вида шаблон:макет. Если такие копии остались в вашем дочернем шаблоне, их можно удалить.
Слова, без которых этот текст не прочитать. У каждого — откуда оно пришло и что значит в Joomla и в wmarka.
Расширение Joomla, которое задаёт вид сайта: разметку страницы, позиции, стили. Как трафарет, шаблон один, а оттиски — страницы — разные. В wmarka к шаблону прилагаются переопределения макетов ядра и библиотека классов PHP.
Именованное место в разметке шаблона, куда Joomla выводит модули: navbar-right, block-a, footer. Список позиций объявлен в манифесте шаблона, и менеджер модулей предлагает именно его.
Самостоятельный блок страницы: меню, список материалов, произвольный HTML. Модуль привязан к позиции и к пунктам меню, на которых он виден.
Обёртка модуля: заголовок, рамка, фон. Как хромированный кант на кузове — отделка вокруг, а не сама вещь. У wmarka восемь стилей, от белой карточки до blank без всякой обёртки.
Файл, по которому компонент или модуль выводит свои данные: блог категории, карточка контакта, лента новостей. Один и тот же список материалов разные макеты показывают по-разному.
Копия макета ядра в папке шаблона (html/…). Joomla находит её раньше оригинала и выводит страницу по ней. Переопределение должно уважать опции ядра — иначе настройки в админке перестают действовать.
Шаблон, который хранит только отличия от родителя: свои переопределения, стили, картинки. Всё, чего у него нет, Joomla берёт у родителя. Создаётся штатной кнопкой в менеджере шаблонов.
Условное слово в поле класса, которое шаблон понимает как команду: wm-mega:news-mega включает мегаменю, wm-blank — страницу из одних модулей, uk-icon:camera — иконку у пункта меню.
Выпадающее меню в несколько колонок, иногда с картинками и модулями внутри. У wmarka — выпадающая панель или окно во весь экран, собранные из вспомогательного меню.
Ссылка rel="canonical", которой страница называет поисковику свой основной адрес. В wmarka это адрес самой страницы, приведённый к одному виду: домен, без /index.php, без меток вроде utm_*.
Способ записать разметку Schema.org отдельным блоком в коде страницы, а не атрибутами в тексте. Шаблон собирает её в один граф: организация, сайт, крошки, статья, автор.
Общий для поисковиков язык описания сущностей: «это новость», «это организация», «это автор». По нему поисковики строят расширенные сниппеты.
Атрибуты картинки, которые дают браузеру выбор: вот два файла разной ширины, а вот сколько места займёт картинка. Файл браузер выбирает сам, учитывая ширину экрана и его плотность.
Уменьшенная копия картинки. Слово «миниатюра» сначала значило рисунок киноварью в рукописи и лишь потом — малый размер. В wmarka превью одно на картинку для всех мест сайта, второе — для статьи.
Формат, который при том же качестве весит заметно меньше JPEG. JUImage переводит превью в WebP; картинку для соцсетей шаблон оставляет в JPG — так её понимают все мессенджеры.
Первый абзац новости, который отвечает на главные вопросы. В wmarka он получает крупный шрифт (uk-text-lead) автоматически.
Раздел новостного сайта. В карточке и статье wmarka рубрика стоит строкой над заголовком, как на новостных сайтах.
Метка, записанная со знаком решётки. В карточках wmarka метки идут хэштегами в служебной строке, в статье — плашками в конце.
Просмотр снимка крупно поверх страницы, с листанием. В демо так открываются фоторепортажи (uk-lightbox).
Запас готовых результатов, чтобы не считать их снова. У wmarka — папка img/ с нарезанными превью; у Joomla — кэш страниц и модулей.
Расширение, которое вмешивается в работу Joomla на определённых событиях. Плагин «Система — wmarka» ловит подготовку формы пункта меню и дописывает в неё поля шаблона.
Реестр стилей и скриптов. Шаблон описывает свои файлы в joomla.asset.json, и Joomla сама подключает их в нужном порядке; дочерний шаблон подменяет файлы родителя по относительному пути.
Набор готовых компонентов: сетка, карточки, навбар, выпадающие списки, окна, карусели. Wmarka строит на нём всю вёрстку без Bootstrap.
Режет и сжимает картинки на лету, складывая результат в кэш. Входит в пакет wmarka; без неё сайт работает, но показывает оригиналы.
Не установлена JUImage или она выключена на вкладке «Изображения». Карточка «Состояние шаблона» показывает, найдена ли библиотека.
Не установлен или выключен плагин «Система — wmarka». Он идёт в пакете; при установке одного шаблона поставьте его отдельным архивом и включите.
Языковые файлы шаблона не установились. Переустановите шаблон тем же архивом.
Включите ЧПУ и .htaccess, создайте пункт «Умный поиск» и выберите его в настройке «Пункт меню поиска». Индекс обновляется командой php cli/joomla.php finder:index.
Опубликуйте его в блочной позиции со стилем blank. Модуль сам задаёт секцию, например <section class="uk-section uk-section-muted"><div class="uk-container">…</div></section>.
Проверьте токен в «CSS-класс ссылки» именно у пункта первого уровня и то, что во вспомогательном меню есть пункты первого уровня. Колонка с модулем требует, чтобы модуль был опубликован в любой позиции и виден на всех страницах.
Да. Главная из модулей соберётся на любом пункте меню с токеном wm-blank в «CSS-класс страницы».