Рассмотрим несложный пример создания компонента для шаблона Default (или основанного на нём). Вся теоретическая часть нами уже рассмотрена, поэтому я буду показывать конкретные шаги реализации.
Иногда на сайтах в шапке бывает расположен блок в котором слева/справа выводится какой-то текст, а с противоположной стороны - картинка/лого. Вот примерно так:
Определимся с ТЗ
Как видно из картинки у нас будет два поля: текст и картинка. Для блогера удобней сделать так, чтобы текст можно было произвольно менять, поэтому мы будем использовать обычный textarea, в котором можно использовать HTML. Для картинки удобней просто указать адрес изображения.
Также было бы здорово предусмотреть настройку, позволяющую выводить изображение как слева, так и справа.
Создадим файлы компонента
Компонент располагается в каталоге шаблона components. Пусть это будет text-and-image.php. В начале пусть он будет с одной строчкой-защитой:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
Этого уже достаточно, чтобы компонент появился в админ-панели.
Сохраним выбор блоков.
Добавим опции компонента
Опции компонента находятся в каталоге components/options. Имя файла совпадает с именем компонента: text-and-image.ini.
Опции задаются как обычно, поэтому я привожу сразу же содержимое этого файла.
[Текст для компонента text-and-image] options_type = templates options_key = component_text_and_image_text type = textarea description = "Текст для компонента <b>text-and-image</b>. Используйте HTML для оформления текста." default = "<h3>Привет!</h3>_NR_Добро пожаловать на мой сайт! Здесь вы найдете много интересного и полезного." section = "Компонент text-and-image" section_description = "" [Изображение для компонента text-and-image] options_type = templates options_key = component_text_and_image_image type = textfield description = "Адрес изображения для компонента <b>text-and-image</b>. Адрес следует указывать в полном формате (с http://)." default = "" [Выравнивание изображения в компоненте text-and-image] options_type = templates options_key = component_text_and_image_align type = select description = "Укажите вариант расположения изображения в компоненте <b>text-and-image</b>." values = "left||Влево # right||Вправо" default = "left"
Тут все стандартно, разве что обращу внимание на несколько интересных моментов.
- Код «_NR_» используется для создания переноса строки. Чисто визуальный эффект для textarea.
- section и section_description используются для визузального отделения опций.
Теперь, если заглянуть в админку, то увидим созданные опции.
Поскольку мы ещё их не обновили, то они не занесены в базу данных и подсвечиваются красным цветом. Это правило используется для всех опций в MaxSite CMS.
HTML-структура компонента
Теперь самое время создать HTML-каркас компонента. Это будут два DIV'а: основной и вложенный wrap. Для изображения на основе опции сформируем IMG, а текст выведем как есть без обработки.
Результирующий text-and-image.php:
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
// получим опции компонента
$text = mso_get_option('component_text_and_image_text', 'templates', '');
$img = mso_get_option('component_text_and_image_image', 'templates', '');
$align = mso_get_option('component_text_and_image_align', 'templates', 'left');
// выводим
echo '
<div class="component-text-and-image">
<div class="component-text-and-image-wrap">'
. '<img class="' . $align . '" src="' . $img . '" alt="" title="">'
. $text
. '<div class="clearfix"></div></div><!-- div class=component-text-and-image-wrap -->
</div><!-- div class=component-text-and-image -->';
Обратите внимание, как мы указываем выравнивание изображения. В стилях Default-шаблона есть хелпер img.left и img.right. Таким образом нам нет необходимости их отдельно задавать. В конце блока мы прописываем div.clearfix с тем, чтобы корректно завершить обтекание текстом картинки.
Теперь, если обновить страницу сайта, мы увидим наш блок.
Настраиваем оформление
Для компонента необходимо прописать хотя бы базовые css-стили. Делается это в файле text-and-image.css в каталоге components/css/.
div.component-text-and-image {
font-family: Georgia;
font-size: 14pt;
font-style: italic;
color: #404040;
}
div.component-text-and-image-wrap {
margin: 5px 10px;
padding: 10px;
border-bottom: 1px silver dashed;
}
div.component-text-and-image h3 {
font-size: 20pt;
font-weight: normal;
}
div.component-text-and-image img {
padding: 3px;
border: 1px silver solid;
}
Поскольку для заголовка мы использовали H3, то для него прописали отдельный стиль.
Напомню, что для случаев, если требуется изменить стиль произвольного элемента на сайте, можно использовать множество способов работы с CSS.
Комментариев: 3 RSS
1dark10401-03-2012 11:42
Почему нельзя повторить название опции в разных файлах, например у меня два компонента sale.php и advert.php В ini файле я пробовал задать одинаковое название поля - Первое изображение, в результате опция не появляется в админ-панели. Ведь это же не ключ.
2dark10401-03-2012 11:44
Речь идёт об одинаковом названии в разных ini файлах
3Аноним01-03-2012 11:53
Если выводятся объединенные опции, то ключ ([Первое изображение]) должен быть уникальным или выведется только последний ключ.