Как добавить место под виджеты в WordPress?

widgetЭто относится к шаблону 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-й колонке на сайте.


Запись навигация

Top