---
title: "Layouts и subLayouts в Joomla - WebTolk"
description: "В Joomla есть понятие layout. Это кусочек вёрстки, который можно многажды использовать в любом месте сайта: как в панели администратора, так и во фронтенде. Можно рассматривать лейауты как оторванные от контекста элементы дизайна. Находятся они в папке layouts в корне сайта. Как их использовать?"
url: "https://web-tolk.ru/blog/layouts-i-sublayouts-v-joomla"
date: "2024-08-25T10:27:47+00:00"
language: "ru-RU"
---

# Layouts и subLayouts в Joomla

 Автор: Сергей Толкачев Создано: 25 августа 2024 Обновлено: 01 сентября 2025 Просмотров: 1121    ![](https://web-tolk.ru/blog/images/blog/layouts-i-sublayouts-v-joomla/header.webp)

В Joomla есть понятие `layout`. Это кусочек вёрстки, который можно многажды использовать в любом месте сайта: как в панели администратора, так и во фронтенде. Можно рассматривать лейауты как оторванные от контекста элементы дизайна. Находятся они в папке `layouts` в корне сайта. Как их использовать? Один из вариантов - использование `LayoutHelper`.

```
<?php
use Joomla\CMS\Layout\LayoutHelper;

// $item - ваш объект или массив с данными, которые нужно использовать  в верстке

echo LayoutHelper::render('components.swjprojects.project.icons', ['item' => $item]);
```

1-й аргумент - это dot-separated (разделенный точками) путь к файлу лейаута. Название папки
"layouts" в данном случае пропускается как само собой разумеющееся. На скриншоте путь отмечен цифрами 1-4. Внутрь файла приходит массив `$displayData`, в котором будет лежать наш `$item` - `$displayData['item']`.

```
<?php
extract($displayData);

echo '<button role="button" class="btn btn-primary">'.$item->title.'</button>';
```

Либо же, если макет можно раздробить на более мелкие примитивы - тулбар с иконками разбить на отдельные иконки - то можно использовать метод `subLayout()`. В первом примере кода мы "вошли" в лейаут `icons`. А в файле `icons.php` можно вызвать подмакеты. Для этого нужно создать рядом папку с таким же названием - `icons`. А в нём уже будут лежать файлы подмакетов.

```
<?php
// icons.php
extract($displayData);

// обращаемся к /icons/downloads.php
echo $this->sublayout('downloads', $displayData);

// обращаемся к /icons/hits.php
echo $this->sublayout('hits', $displayData);
```

Передавать туда можно как целиком `$displayData`, так и какую-то часть от него. Тут уже как вам удобно.

Также помним, что файлы из `layouts` подвержены переопределениями в шаблонах.

Где это применимо? Да в принципе везде, хотя данный пример относится к разработке компонента.

- [Этот пост в моём Telegram-канале](https://t.me/webtolkru/292)

## Об авторе

![Толкачев Сергей Юрьевич](https://web-tolk.ru/images/uslugi/sergey-tolkachyov-apr-2023.webp)

### Толкачев Сергей Юрьевич

Joomla-разработчик. [Контрибьютер ядра Joomla](https://github.com/joomla/joomla-cms/pulls?q=is%3Apr+author%3Asergeytolkachyov+). Один из ведущих Telegram-канала русскоязычного Joomla-сообщества [JoomlaFeed](https://t.me/joomlafeed), один из модераторов [чата русскоязычного Joomla-сообщества](https://t.me/joomlaru). Мои расширения в официальном маркетплейсе расширений Joomla - [Joomla Extensions Directory](https://extensions.joomla.org/profile/profile/details/528051/). Имею публикации в [официальном журнале международного Joomla-сообщества - Joomla Community Magazine](https://magazine.joomla.org/authors/sergeytolkachyov) и на [официальном сайте русскоязычного Joomla-сообщества](https://joomlaportal.ru/users/sergey-tolkachyov).

Муж. Отец 3 детей.

Россия, Саратов.

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/blog",
                "name": "Блог"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "name": "Layouts и subLayouts в Joomla"
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/blog/layouts-i-sublayouts-v-joomla",
            "name": "Layouts и subLayouts в Joomla - WebTolk",
            "description": "В Joomla есть понятие layout. Это кусочек вёрстки, который можно многажды использовать в любом месте сайта: как в панели администратора, так и во фронтенде. Можно рассматривать лейауты как оторванные от контекста элементы дизайна. Находятся они в папке layouts в корне сайта. Как их использовать?",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "Article",
            "@id": "https://web-tolk.ru/#/schema/com_content/article/100",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebPage/base"
            }
        }
    ]
}
```