Помочь проекту Отзывы Обратная связь Заказать шаблон/сайт Супер-шаблон MF
Войти / Регистрация
Закрыть

или зарегистрироваться

MaxSite CMS

  • Преимущества
  • Возможности
  • Основы
  • Документация
  • Скачать
Каталог шаблонов для MaxSite CMS
Дополнительные возможности шаблона Default

Пример создания компонента для шаблона MaxSite CMS

Архив записейПросмотров: 105810 ноября 2011 г.

Рассмотрим несложный пример создания компонента для шаблона 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.

Итоговый результат

Итоговый компонент

Каталог шаблонов для MaxSite CMS
Дополнительные возможности шаблона Default
twitter.com facebook.com google.com yahoo.com

Еще записи по теме

  • 4. Опции
  • 2. Типы данных. Сегменты URL
  • Организация данных в MaxSite CMS
  • Type-файлы в MaxSite CMS
  • Изучение MaxSite CMS
  • Type-файлы. Типы данных в MaxSite CMS
  • Предлагайте свои css-профили!
  • Использование CSS-стилей в шаблоне Default
  • Собственные опции шаблона
  • 7. Типы страниц. Делаем свой Twitter

Комментариев: 3 RSS

1dark10401-03-2012 11:42

Почему нельзя повторить название опции в разных файлах, например у меня два компонента sale.php и advert.php В ini файле я пробовал задать одинаковое название поля - Первое изображение, в результате опция не появляется в админ-панели. Ведь это же не ключ.

[Первое изображение]
options_type = templates
options_key = image4
type = textfield
description = "Адрес первой картинки. Указывать в полном формате с http://"
default = ""
section = "Advert"
section_description = ""

2dark10401-03-2012 11:44

Речь идёт об одинаковом названии в разных ini файлах

3Аноним01-03-2012 11:53

Если выводятся объединенные опции, то ключ ([Первое изображение]) должен быть уникальным или выведется только последний ключ.

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Learn more about buy Instagram likes check popular website Friendlylikes
Find more information why people are used to buy Instagram likes for photos and videos these days.
Рубрики
  • Блог 36
  • Версии (релизы) 93
  • Архив записей 180
Последние записи
  • Переход к минимальной PHP 7.1
  • Обновление документации
  • MaxSite CMS 11 лет
  • MaxSite CMS 103
  • Каталог студий и фрилансеров MaxSite CMS
  • Мы переходим к одной ветке разработки MaxSite CMS
  • MaxSite CMS 102
  • MaxSite CMS 101
  • Установка и начальная настройка MaxSite CMS (видео)
  • Landing Page на MaxSite CMS
Поиск по сайту
Архив сайта

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.

Другие проекты
  • Сайт автора — MaxSite.org
  • UniCSS (Universal Atomic CSS)
  • Landing Page Framework
  • Бесплатные HTML-курсы
Соцсети
  • Twitter
  • Github
  • YouTube
© MaxSite CMS, 2008-2019 | Время: 0.2789 | SQL: 20 | Память: 1.42MB | Вход