Создание главной страницы в журнальном стиле

Теперь, когда мы узнали, как именно WordPress работает с шаблонами, мы можем приступить к настройке нашей темы.

Стандартное представление и поведение Thematic является типично «блоговым». Конечно, в этом нет ничего плохого, однако нам хотелось бы несколько расширить область применения указанного фреймворка. В дальнейшем мы постараемся модифицировать главную страницу: уберем сайдбар, определим область, в которой будет выводиться список цитат и миниатюр для нескольких новых сообщений, а также добавим футер, в котором будет продублирован список страниц. Также мы добавим к каждой записи ссылки на биографию автора и популярные средства социального общения.

Удаление сайдбара

При работе с фреймворком темы одним из наиболее простых способов создания собственного шаблона является копирование соответствующего файла родительской темы и размещение его в директории с дочерней темой. Как мы только что видели, WordPress, пытаясь представить страницу, обращается сначала к дочерней теме, следовательно, любой шаблон, добавленный в дочернюю тему, будет переопределять эквивалентный шаблон в Thematic. Для начала мы попытаемся удалить сайдбар с главной страницы нашей темы. WordPress, пытаясь представить главную страницу, сначала проверит, определил ли администратор блога какую-либо страницу в качестве главной; если этого не было сделано, то для отображения главной страницы будет использован шаблон home.php.

В Thematic отсутствует файл шаблона home.php, однако нас вполне устроит и шаблон index.php. Скопируем index.php и поместим в папку с нашей дочерней темой, после чего переименуем его в home.php. Вот его полное содержание:

<?php// calling the header.php
get_header( );

// action hook for placing content above #container
thematic_abovecontainer( );

?>

<div id="container">

<?php thematic_abovecontent( ); ?>

<div id="content">

<?php

// create the navigation above the content
thematic_navigation_above( );

// calling the widget area 'index-top'
get_sidebar('index-top');

// action hook for placing content above the index loop
thematic_above_indexloop( );

// action hook creating the index loop
thematic_indexloop( );
// action hook for placing content below the index loop
thematic_below_indexloop( );

// calling the widget area 'index-bottom'
get_sidebar( 'index-bottom' );

// create the navigation below the content
thematic_navigation_below(  );

? >

</div><!-- #content -->

<?php thematic_belowcontent(); ?>

</div><!-- #container -->

<?php

// action hook for placing content below #container
thematic_belowcontainer();

// calling the standard sidebar
thematic_sidebar();

// calling footer.php
get_footer();

?>

Вы ожидали увидеть здесь кучу HTML-кода, фигурных скобок и if-конструкций? Все, что мы имеем, это несколько div элементов и большое количество PHP функций. Причина такого упрощения заключается в том, что шаблоны Thematic обладают высокой модульностью — папка extensions содержит все необходимое для совершения различных действий. В дальнейшем мы рассмотрим, что делает каждая из функций; сейчас же постараемся выполнить поставленную перед нами задачу, а именно ликвидацию сайдбара.

Изучая наш шаблон, можно увидеть, что сайдбар загружается в следующем участке:

// calling the standard sidebar
thematic_sidebar();

Удалим этот участок кода (или закомментируем).

Теперь нам необходимо сделать так, чтобы основной контент занимал всю ширину страницы. Реализовать это позволяют CSS стили. В качестве примера мы возьмем таблицы стилей фреймворка Thematic. Селекторы #container и #content, каждый из которых определяет интересующую нас ширину, применяются к блокам div. Как мы узнали из предыдущей главы, Thematic загружает к элементу body набор различных классов, один из которых отвечает за определение главной страницы (#home). Сделаем так, чтобы блоки div с идентификаторами #container и #content имели нужную нам ширину в том случае, если они расположены на главной странице (т.е. если они имеют класс home). Чтобы выполнить это, достаточно просто добавить следующие стили в файл style.css:

/* =Homepage specific styles
-------------------------------------------------------------- */
body.home #container {
float: none;
margin: 0;
width: 960px;
}
body.home #content {
width: 900px;
overflow: hidden;
margin: 0 0 0 10px;
}
body.home .hentry {
width: inherit;
}

Теперь, откройте свой браузер и посмотрите на представление главной страницы — контент будет занимать всю ее ширину. Если вы переместитесь на любую другую страницу, то увидите, что традиционное представление не изменилось — сайдбар, как и базовая ширина контента остались нетронутыми.

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