Это относится к шаблону Twenty Twelve (шаблон по-умолчанию в WordPress 2012 года), хотя идея и для следующих шаблонов думаю применима. Добавления коснутся 3 файлов:
- functions.php
- sidebar-front.php
- style.css
Сначала добавим следующий код в functions.php, чтобы зарегистрировать нашу 3-ю область
register_sidebar( array( 'name' => __( 'Third Front Page Widget Area', 'my-child-theme' ), 'id' => 'sidebar-front-third', 'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'my-child-theme' ), 'before_widget' => '<aside id="%1$s">', 'after_widget' => '</aside>', 'before_title' => '<h3>', 'after_title' => '</h3>', ) ); Далее в sidebar-front.php перед строкой </div><!-- #secondary --> добавим
<?php if ( is_active_sidebar( 'sidebar-front-third' ) ) : ?> <div> <?php dynamic_sidebar( 'sidebar-front-third' ); ?> </div><!-- .third --> <?php endif; ?> Теперь css. Было 2 колонки, теперь нам надо 3 колонки. В media-queries для широких экранов - будем показывать 3 колонки в ряд, для узких - как и было все 3 области будут располагаться одна под другой. Для IE надо скопировать эти стили (без директивы @media screen and (min-width: 600px) и фигурных скобок) в css/ie.css, так как Explorer не понимает media-queries
@media screen and (min-width: 600px) {
.template-front-page.two-sidebars .widget-area .front-widgets,
.template-front-page .widget-area .widget:nth-child(even),
.template-front-page.two-sidebars .widget-area .front-widgets + .front-widgets {
float: left !important;
width: 30.3% !important;
margin-left: 1.5% !important;
margin-right: 1.5% !important;
}
.template-front-page .widget-area .widget:nth-child(odd) {
clear: none !important;
}
.template-front-page .widget-area .widget:nth-child(3n+3) {
clear: right;
}
}
Теперь в админке WordPress в Appearance -> Виджеты мы должны увидеть 3-ю область и может совать туда виджеты, которые хотим показать в 3-й колонке на сайте.