Настройки темы дизайна

Содержание...

Помимо прямого доступа к исходному кода дизайна фронтенда (HTML, CSS, JavaScript), тема дизайна может также предоставлять пользователю возможность указывать различные параметры, влияющие на отображение сайта, например: заголовок в шапке сайта, цвет фона, логотип, вариант оформления меню и т. п. Такие настройки позволяют пользователю изменять внешний вид сайта, не внося изменений в исходный код шаблонов. Вот так может выглядеть раздел настроек темы дизайна в бекенде Вебасиста:

Для настройки темы дизайна могут использоваться следующие виды элементов управления:

Если тип элемента настроек не указан, то он будет интерпретирован как поле для ввода текста (text).

Для создания элементов настроек необходимо в файле-манифесте theme.xml указать общий элемент settings с вложенными элементами setting, каждый из которых должен содержать атрибут control_type с указанием типа элемента настроек (см. список выше) и атрибут var с именем переменной для доступа к значению элемента настройки в шаблонах темы дизайна.

Каждый элемент setting должен содержать следующий набор вложенных элементов (именно в таком порядке):

Элементы name, description и value могут указываться для каждого элемента настроек в нескольких экземплярах — по одному для каждой языковой локали. У каждого такого элемента должен присутствовать атрибут locale с указанием локали, для которой предназначено значение элемента.

Ниже показан фрагмент файла theme.xml с примером указания различных элементов настроек темы дизайна:

<settings>
    <setting control_type="text" var="caption">
        <value locale="en_US">Sample caption</value>
        <value locale="ru_RU">Пример заголовка</value>
        <name locale="en_US">Header caption</name>
        <name locale="ru_RU">Заголовок сайта</name>
    </setting>
    <setting control_type="select" var="color_scheme">
        <value>light</value>
        <name locale="en_US">Color scheme</name>
        <name locale="ru_RU">Цветовая схема</name>
        <options>
            <option value="light">
                <name locale="en_US">light</name>
                <name locale="ru_RU">светлая</name>
            </option>
            <option value="dark">
                <name locale="en_US">dark</name>
                <name locale="ru_RU">темная</name>
            </option>
        </options>
    </setting>
    <setting control_type="checkbox" var="show_subscription_form">
        <value>1</value>
        <name locale="en_US">Show subscription form</name>
        <name locale="ru_RU">Показывать форму подписки</name>
    </setting>
    <setting control_type="radio" var="menu_type">
        <value>dropdown</value>
        <name locale="en_US">Main menu type</name>
        <name locale="ru_RU">Тип главного меню</name>
        <options>
            <option value="simple">
                <name locale="en_US">simple</name>
                <name locale="ru_RU">простое</name>
                <description locale="en_US">Simple tree-like menu in the left sidebar.</description>
                <description locale="ru_RU">Простое древовидное меню в левой панели сайта.</description>
            </option>
            <option value="dropdown">
                <name locale="en_US">dropdown</name>
                <name locale="ru_RU">выпадающее</name>
                <description locale="en_US">Dynamic menu with great visual effects.</description>
                <description locale="ru_RU">Динамическое меню с привлекательными визуальными эффектами.</description>
            </option>
        </options>
    </setting>
    <setting control_type="color" var="header_color">
        <value>#777777</value>
        <name locale="en_US">Header color</name>
        <name locale="ru_RU">Цвет заголовка</name>
    </setting>
    <setting control_type="image" var="logo">
        <value></value>
        <filename>images/logo.*</filename>
        <name locale="en_US">Your logo</name>
        <name locale="ru_RU">Логотип</name>
        <description locale="en_US">128×128px large image.</description>
        <description locale="ru_RU">Изображение размером 128×128 пикселей.</description>
    </setting>
    <setting control_type="image_select" var="background_image">
        <value>images/themesettings/backgrounds/01.png</value>
        <name locale="en_US">Background image</name>
        <name locale="ru_RU">Фоновое изображение</name>
        <options>
            <option value="images/themesettings/backgrounds/01.png" />
            <option value="images/themesettings/backgrounds/02.png" />
            <option value="images/themesettings/backgrounds/03.png" />
            <option value="images/themesettings/backgrounds/04.png" />
        </options>
    </setting>
</settings>

Использование значений настроек в шаблонах

Значения, выбранные или введенные пользователем на странице настройки темы дизайна, доступны в шаблонах темы в виде конструкций {$theme_settings.var}, где вместо var нужно подставить значение атрибута var соответствующего элемента настроек. Например, чтобы добавить в дизайн сайта загруженный пользователем логотип (допустим, для поля загрузки логотипа указано значение var="logo"), необходимо добавить в шаблон темы дизайна код следующего вида:

{if $theme_settings.logo} {* проверяем, был ли загружен логотип в настройках темы дизайна *}
<img src="{$theme_settings.logo}">
{/if}