Создание колонок записей на главной странице

Часто в т.н. премиум-темах (Premium Themes) используется дополнительный вывод на главной странице нескольких колонок записей. В MaxSite CMS главная страница может выводиться несколькими способами, просто отмечая и указывая соответствующие опции в админ-панели.

Вывод колонками - задача довольно простая, но требующая небольшого программирования. В рамках Default-шаблона задача решается буквально за 10 минут. Рассмотрим этот вопрос подробно.

Визуальный порядок формирования главной страницы

Пусть у нас сохранится полностью стандартный вывод главной, со всеми её настройками и возможностями, а вот вывод колонок сделаем перед стандартным выводом.

Сделаем вывод трех колонок по одной записи. Обычно это самая распространенная комбинация.

Какие именно записи будут выводиться в колонках

Для задания записей, которые попадут в колонки можно указывать специальную рубрику, сделать отдельное мета-поле или сделать отдельный тип страницы. Поскольку тип страницы сделать проще всего, то остановимся на этом варианте.

Предположим, что это будут какие-то видеозаметки. Идем в Настройки - Типы страниц создаем новый тип.

В данном примере я сделал тип video.

Теперь при редактировании или создании страниц можно отметить нужный тип.

Перед дальнейшими шагами было бы неплохо сделать несколько video-записей.

Где размещается код вывода

Поскольку выводить колонки мы будем на главной перед основным контентом, то код удобней всего разместить в custom/main-out-start.php. Он подключается как раз перед выводом $MAIN_OUT.

Алгоритм работы

Тут все довольно просто. Вначале мы должны убедиться, что у нас главная страница. Далее необходимо сформировать параметры для получения нужных нам страниц. После получить записи и вывести их по колонкам.

Полный код

Вначале я приведу полностью готовый код, а ниже уже его объясню.

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
if (!is_type('home')) return;
 
$par = array( 'limit' => 3, 
		'cut' => mso_get_option('more', 'templates', 'Читать полностью »'),
		'type'=> 'video', 
		'custom_type'=> 'home', 
		'pagination'=> false, 
		'get_page_categories'=> false, 
		'get_page_count_comments'=> false, 
		);
			
$pages = mso_get_pages($par, $temp);
 
if ($pages)
{
	echo '<div class="home3col-header">Видео</div>';
	
	echo '<div class="home3col">';
	
	foreach ($pages as $page)
	{
		extract($page);

		echo '<div class="left w33"><div class="margin10">';
			mso_page_date($page_date_publish, array('format' => 'j F Y г.'), '<span class="gray">', '</span>');
			mso_page_title($page_slug, $page_title, '<h3>', '</h3>', true);
			echo '<div class="home3col-page-content">';
				mso_page_content($page_content);
			echo '</div>';
		echo '</div></div>';
	}
	
	echo '</div>'; // .home3col
	
	echo '<div class="clearfix"></div>';
}

Это главная?

Код из одной строчки:

if (!is_type('home')) return;

Если это не главная, то выходим из файла. Объяснять больше нечего.

Получение записей

Вначале формируем параметры, после получаем данные.

$par = array('limit' => 3, 
	'cut' => mso_get_option('more', 'templates', 'Читать полностью »'),
	'type'=> 'video', 
	'custom_type'=> 'home', 
	'pagination'=> false, 
	'get_page_categories'=> false, 
	'get_page_count_comments'=> false, 
);
 			
$pages = mso_get_pages($par, $temp);

• limit - количество получаемых записей
• cut - текст для «Далее...» (берем из настроек)
• type - тип страниц
• custom_type - по какой схеме получаем записи
• pagination - пагинация (листалка страниц) не нужна
• get_page_categories - данные рубрик не нужны
• get_page_count_comments - количество комментариев не нужно

Параметры передаем в mso_get_pages(), которая собственно и возвращает массив записей в переменной $pages.

Вывод записей

Для вывода используется стандартный цикл foreach, вот по такой схеме:

if ($pages)
{
	echo '<div class="home3col-header">Видео</div>'; // заголовок
	echo '<div class="home3col">'; // блок 
	
	foreach ($pages as $page)
	{
		extract($page);
		... тут сам вывод ...
	}

	echo '</div>'; // home3col
	echo '<div class="clearfix"></div>'; // прекращаем обтекание колонок
}

Я сразу добавил DIV-блоки, чтобы был понятен обрамляющий HTML-код. В цикле foreach мы получаем данные каждой записи из $page и, поскольку у нас всего три записи, то выводим каждую колонку-запись в отдельном DIV-блоке.

Если вы планируете выводить в колонке несколько записей, то нужно предусмотреть счетчик записей, по которому и задавать разные css-классы или обрамляющие DIV-блоки.

Сам вывод записей следующий:

echo '<div class="left w33"><div class="margin10">';
	mso_page_date($page_date_publish, array('format' => 'j F Y г.'), '<span class="gray">', '</span>');
	mso_page_title($page_slug, $page_title, '<h3>', '</h3>', true);
	echo '<div class="home3col-page-content">';
		mso_page_content($page_content);
	echo '</div>';
echo '</div></div>';

Здесь мы задаем два DIV-блока:

• первый - задает строго колонку
• второй - задает внутренний отступ

Строго говоря, можно было бы обойтись и одним блоком, но с двумя будет несколько проще задавать отступы и оформление.

Из данных мы выводим только дату записи, заголовок и сам текст. Текст мы помещаем в отдельный div.home3col-page-content на случай, если потребуется изменить его дизайн.

Использование css-хелперов (помощников)

Обратите внимание на то, что в некоторых DIV я использую уже готовые css-классы. В частности это

• left - плавающий блок влево
• w33 - ширина 33.33%
• margin10 - отступ 10px
• clearfix - прерывает обтекание плавающих блоков
• gray - серый цвет

Данные хелперы находятся в css-файле default-шаблона, поэтому нет смысла их задавать заново.

Проверяем

Если перейти на сайт, то увидим примерно такую картину:

Очевидно, что нам следует добавить css-стили для более приличного оформления.

Наводим лоск

Напомню, что работать с css-стилями в Default-шаблоне можно множеством способов. Ну поскольку у нас custom-файл, то есть часть шаблона, то наверное есть смысл использовать add_style.css.

Подсказка для разработчиков. Во время тестирования, пока стили еще окончательно не определены, можно сделать тестовый css-профиль и подключить его в Настройке шаблона.

У меня получилось вот так:

div.home3col h3 {font-size: 11pt; margin: 5px 0;}
div.home3col-page-content {font-size: .8em;}
div.home3col-header {font-size: 20pt; background: #EEE; padding: 3px 5px;}
div.home3col span {font-size: .9em;}

Стили, в общем-то несложные.

Как вариант, можно было бы использовать для оформления css-хелперы и задать стили прямо в style DIV-блоков. Минус здесь только в том, что придется менять файл от шаблона к шаблону. В любом случае тут много разных вариантов - какой использовать зависит от вебмастера.