MaxSite.org 11 лет
Блог вебмастера о сайтостроении
Внимание! Данная запись отмечена как устаревшая и может содержать неточную или неактуальную информацию!

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

MaxSite CMS / Общие вопросыПросмотров: 13281 (185)

Часто в т.н. премиум-темах (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-блоков. Минус здесь только в том, что придется менять файл от шаблона к шаблону. В любом случае тут много разных вариантов - какой использовать зависит от вебмастера.

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

2Руслан Сафин05-12-2011 13:49

На форуме поднималась похожая тема про вывод постов колонками. Но там все на css было реализовано.

Я так понимаю, что записи типа blog тоже можно так же сделать в несколько колонок?

3MAX05-12-2011 15:02

Да, тип записей произвольный. Только следует учитывать, что на главной и так выводятся записи blog, поэтому может быть дублирование.

4Руслан Сафин05-12-2011 16:16

То есть если мне надо выводить записи blog, то лучше использовать метод описанный на форуме?

7max01-04-2012 22:11

Как сделать то же самое, только чтобы выводились не 3 записи, а 9 записей по 3 в каждой строке?

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

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

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

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.