Создание колонок записей на главной странице
Часто в т.н. премиум-темах (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-блоков. Минус здесь только в том, что придется менять файл от шаблона к шаблону. В любом случае тут много разных вариантов - какой использовать зависит от вебмастера.
Спасибо за документацию. Сегодня попробую.
На форуме поднималась похожая тема про вывод постов колонками. Но там все на css было реализовано.
Я так понимаю, что записи типа blog тоже можно так же сделать в несколько колонок?
Да, тип записей произвольный. Только следует учитывать, что на главной и так выводятся записи blog, поэтому может быть дублирование.
То есть если мне надо выводить записи blog, то лучше использовать метод описанный на форуме?
Ссылку дадите?
Мне тоже интересно было бы почитать на форуме.
Как сделать то же самое, только чтобы выводились не 3 записи, а 9 записей по 3 в каждой строке?