Пользовательские стили в конструкции jdoc:include - причины, методы и способы создания

Как известно одним из методов вывода контента на страницы сайта является конструкция вида <jdoc:include />, мы о ней как раз говорили в предыдущей статье. С её помощью можно выводить информацию в head страницы, контент, модули и т.д.

Для стилизации выводимых модулей и их позиций используется специальный атрибут style, в качестве параметра которому передается значение определенного стиля. Он отвечает за то, каким образом будет выведен модуль. Таких предустановленных стилей в Joomla на данный момент насчитывается 7 штук, они описаны в файле /templates/system/html/modules.php.

Но бывают ситуации, когда необходимо создать собственный стиль, причин тому может быть множество (о них позже), как быть в таком случае? Как вариант можно создать собственный стиль, это делать нам никто не запрещает! Для чего это может понадобиться и как создавать собственные стили как раз и пойдет речь в данной статье.

Для чего может потребоваться создание собственного стиля, давайте рассмотрим один очень простой и достаточно распространенный пример. Вам необходимо выводить заголовки определенных или даже всех модулей в семантически нейтральном теге <span>, а все стандартные (предустановленные) стили выводят заголовок в теге <h3> либо не выводят вовсе. В таком случае потребуется создать собственный стиль, чем мы сейчас и займемся.

Тут можно поступить двумя способами – внести изменения в файл /templates/system/html/modules.php, либо создать переопределение (новый файл который будет располагаться в папке шаблона используемого по умолчанию). Второй способ гораздо предпочтительнее, в этом случае после обновления Joomla наши изменения никуда не исчезнут, ведь самостоятельно созданные фалы не перезаписываются.

Приступим, для начала создаем новый пустой файл modules.php, который необходимо закинуть в папку /templates/имя_вашего_шаблона/html. С этим файлом мы и будем работать.

Открываем вновь созданный файл и пишем следующий php код:

<?php
function modChrome_mystyle($module, &$params, &$attribs)
{
    if (!empty ($module->content)): ?>
        <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
        <?php if ($module->showtitle != 0) :  ?>
            <span id="modtitle"><?php echo $module->title; ?></span>
        <?php endif; ?>
            <div id="modcontent">
                <?php echo $module->content; ?>
            </div>
        </div>
    <?php endif;
}
?>

Что это за код такой? На самом деле тут нет ничего сложного. В самом начале мы вызываем функцию modChrome с именем нашего стиля, в моем случае это mystyle:

function modChrome_mystyle($module, &$params, &$attribs)

Потом идет обычная проверка на наличие модуля в данной позиции:

 if (!empty ($module->content)): ?>

Если модуль существует, то выполняется следующая часть кода. А следующая часть как раз нужна для вывода самого модуля в блоке div с классом moduletable. После имени класса и перед закрывающейся кавычкой можно дописать небольшой код, который позволит подставлять к классу определенный суффикс, указанный в настройках модуля (что такое суффикс класса и как его использовать читайте в данной статье). Это позволит сделать каждый модуль уникальным для облегчения дальнейшей вёрстки:

<div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">

Если Вы не планируете пользоваться суффиксами класса для модулей, то код можно сократить до такого вида:

<div class="moduletable">

Далее идет проверка на наличие заголовка, если в настройках модуля переключатель «Показать заголовок» установлен в положение «Да», тогда заголовок модуля будет выведен в теге span с идентификатором modtitle, как раз то чего мы и добивались:

<?php if ($module->showtitle != 0) : ?>
 <span id="modtitle"><?php echo $module->title; ?></span>
<?php endif; ?>

И в заключение выводим основное содержимое модуля:

<div id="modcontent">
 <?php echo $module->content; ?>
</div>

На этом все, можно сохранять файл. Теперь в индексном файле шаблона (index.php) указываем наш новый стиль в качестве параметра атрибута style:

<div id='wrap'>
 <div id="right-menu"><jdoc:include type="modules" name="position-2" style="mystyle"/></div>
</div>

Результат данных манипуляций следующий:

Результат применения собственного стиля оформления модуля

На этом статью считаю оконченной, если у Вас остались какие либо вопросы пишите в комментариях, я обязательно отвечу.

Добавить комментарий