Начальный уровень
Опции компонентов
В нашей шапке справа оказалось довольно большое пустое место, где мы можем разместить какой-то блок. Это может быть реклама или какой-то текст. Содержимое этой ячейки вынесем в отдельную опций, чтобы ей было удобно управлять из админ-панели.
То есть схема расположения будет уже такой:
| лого | Название сайта | Блок | | | Описание | | -------------------------------- | меню | иконки |
Для создания опций компонентов используется описательный ini-файл. В нём задаются параметры опций, которые будут отображены в панели управления.
Создадим файл компонента options.ini
[Дополнительный блок] section = "MyHeader1" section_description = "Настройка компонента MyHeader1" options_key = "block" options_type = "%TEMPLATE%" type = "textarea" default = "" description = "Содержимое дополнительного блока шапки"
Это стандартный формат ini-файлов, где описывается каждая секция.
Название секции — это название опции в админ-панели. Дальше мы указываем данные опции.
- options_key — это ключ опции
- options_type — тип/группа опции.
%TEMPLATE%означает, что группа будет совпадать с каталогом шаблона, что позволяет создавать одинаковые (ключи) опции для разных шаблонов, чтобы они не пересекались между собой. - type — это вид поля для ввода значения опции. В данном случае это textarea — многострочное поле.
- default — значение опции по-умолчанию. Именно им будет заполнено поле, если опция ещё не определена.
- description — описание опции.
- section — определяет новую вкладку в настройках шаблона. Обычно указывается в первой опции ini-файла. В последующих опциях файла этот параметр указывать не нужно.
- section_description — описание секции.
После сохранения options.ini в настройках шаблона появится новая вкладка:
Теперь в файле index.php нужно получить значение опции. Как обычно это делается с помощью mso_get_option(), только вторым параметром (тип) мы указываем текущий шаблон. Приведу php-часть файла, чтобы вы не запутались:
$name_site = mso_get_option('name_site', 'general');
$description_site = mso_get_option('description_site', 'general');
$block = mso_get_option('block', getinfo('template'), '');
?>
...
C помощью getinfo('template') мы получаем текущий шаблон. Третий параметр указывает на значение по умолчанию.
Для вывода $block добавим ещё одну блок-ячейку:
<div class="layout-wrap flex pad30-tb flex-vcenter">
<div class="pad20-rl">
<img src="<?= getinfo('template_url') ?>assets/images/logo.png" alt="">
</div>
<div class="flex-grow5">
<div class="t200 t-blue600"><?= $name_site ?></div>
<div class="italic"><?= $description_site ?></div>
</div>
<div>
<?= $block ?>
</div>
</div>
</div>
Обратите внимание, что для средней ячейки я поменял класс с w100 на flex-grow5 — это класс задаёт «жадность» ячейки. В данном случае она в 5 раз больше остальных.
Текущий вид шапки:
То есть работа с опциями сводится к двум этапам. Вначале опцию нужно задать в ini-файле, после получить её в php-коде и дальше вывести в нужном месте.
Опций для компонентов может быть любое количество. Смысл опций в том, чтобы вынести настройку компонента в панель управления, вместо того, чтобы править php-файл. Понятно, что при этом увеличивается сложность самого файла, но с другой стороны, повышается удобство для пользователя.
Например мы можем добавить ещё одну опцию, которая будет хранить адрес логотипа. Очевидно, что этот элемент будет меняться от сайта к сайту, а значит его сделаем настраиваемым.
Открываем options.ini и добавляем после первой опции:
[Логотип]
options_key = "logo"
options_type = "%TEMPLATE%"
type = "textfield"
default = "<?= getinfo('template_url') ?>assets/images/logo.png"
description = "Адрес логотипа"Обратите внимание, что мы не указываем section, поскольку у нас она уже объявлена выше. Поле type — однострочное textfield. А в default мы выведем изображение по умолчанию.
В настройках шаблона появится новая опция:
Теперь используем эту опцию в index.php компонента, как это делали ранее. Я привожу полный код:
$name_site = mso_get_option('name_site', 'general');
$description_site = mso_get_option('description_site', 'general');
$block = mso_get_option('block', getinfo('template'), '');
$logo = mso_get_option('logo', getinfo('template'), getinfo('template_url') . 'assets/images/logo.png');
?>
<div class="layout-center-wrap">
<div class="layout-wrap flex pad30-tb flex-vcenter">
<div class="pad20-rl">
<img src="<?= $logo ?>" alt="">
</div>
<div class="flex-grow5">
<div class="t200 t-blue600"><?= $name_site ?></div>
<div class="italic"><?= $description_site ?></div>
</div>
<div>
<?= $block ?>
</div>
</div>
</div>
<div class="layout-center-wrap bg-indigo100">
<div class="layout-wrap flex flex-vcenter">
<div>
<?php
if ($fn = mso_fe('components/_menu/_menu.php')) require $fn;
?>
</div>
<div class="t150">
<?php
if ($fn = mso_fe('components/_social/_social.php')) require $fn;
?>
</div>
</div>
</div>
Итоговый вид шапки:
