WordPress: Добавить ещё одну область виджетов (widget area) в шаблон главной страницы

WordPress: Добавить ещё одну область виджетов (widget area) в шаблон главной страницы Это относится к шаблону Twenty Twelve (шаблон по-умолчанию в WordPress 2012 года), хотя идея и для следующих шаблонов думаю применима. Мне понадобилось в футере не две колонки иметь, а три. В шаблоне каждая колонка - это область виджетов, поэтому и хочу добавить 3-ю область widget area.

Добавления коснутся 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" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

Далее в sidebar-front.php перед строкой </div><!-- #secondary --> добавим

<?php if ( is_active_sidebar( 'sidebar-front-third' ) ) : ?>
	<div class="third front-widgets">
		<?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-й колонке на сайте.

Вот как выглядит - колонка с последними новостями в 3-й области:

 

добавить 3-ю область виджетов в шаблон Wordpress

 

 

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.




Комментарии (1)     Подпишитесь на RSS комментариев к этой статье.

1 комментарий

#1317
Алиса говорит:
January 21, 2015 at 05:37 pm
Спасибо, у меня все получилось. Даже и не думала, что выйдет так просто. А шаблон у меня не дефолтный, но принцип-то тот же, так что сработало.