Site icon Vavik96

Как добавить виджеты в Footer WordPress темы

Обязательно сохраните резервные копии файлов “functions.php” и “footer.php” на случай, если вы ошибётесь при изменении кода.

Добавление виджетов в современную тему

1. Регистрация виджета в области нижнего колонтитула-

Откройте файл functions.php в редакторе тем WordPress  и с помощью поиска (Ctrl+F) найдите следующую строку кода:

register_sidebar

Это должно быть в районе, где зарегистрированы боковые колонки вашей темы.
Добавьте следующий код чуть ниже кода боковой панели (в примере идёт речь о регистрации трёх виджетов в нижнем колонтитуле):

register_sidebar( array(
'name' => 'Footer Sidebar 1',
'id' => 'footer-sidebar-1',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 2',
'id' => 'footer-sidebar-2',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => 'Footer Sidebar 3',
'id' => 'footer-sidebar-3',
'description' => 'Appears in the footer area',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

На скриншоте файл functions.php темы “Twenty Twelve”, который должен дать вам некоторое представление о том, где нужно вставить блок кода.

2. Покажите виджет в области нижнего колонтитула вашей темы

Откройте файл footer.php и вставьте следующий блок кода там, где вы хотите показать виджеты (это покажет области 3 подвал виджета, если они имеют какие-либо виджеты в них:

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php
if(is_active_sidebar('footer-sidebar-1')){
dynamic_sidebar('footer-sidebar-1');
}
?>
</div>
<div id="footer-sidebar2">
<?php
if(is_active_sidebar('footer-sidebar-2')){
dynamic_sidebar('footer-sidebar-2');
}
?>
</div>
<div id="footer-sidebar3">
<?php
if(is_active_sidebar('footer-sidebar-3')){
dynamic_sidebar('footer-sidebar-3');
}
?>
</div>
</div>

 

3. Настройте стиль виджета по своему вкусу

Добавьте следующий код в CSS файл style.css вашей темы, чтобы определить некоторые основные стили нижнего колонтитула и виджетов, которые только что добавили. Настройте их в соответствовии с вашим потребностями.

 

#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}

Добавление нижних виджетов в старую тему

1. Регистрация сайдбара в WordPress теме

Перейдите в редактор тем WordPress и откройте файл Функций темы (functions.php). С помощью поиска найдите следующую строку:

if ( function_exists('register_sidebar') )

Как только вы найдете эту строку, то посмотрите на следующую строку, которая должна быть похожа на одну из следующих, в зависимости от того, сколько у вас сайдбаров:

register_sidebar(array(

или

register_sidebars(2,array(

Скажем, например, у вас есть один сайдбар в вашей теме, и вы хотите добавить ещё три дополнительных виджета в нижний колонтитул, необходимо внести изменение в коде:

 

register_sidebars(4,array(

>Регистрируем 4 сайдбара (тот, который у вас уже есть, и еще три, что вы собираетесь добавить в нижний колонтитул WordPress темы).

2. Вставьте сайдбары в тему WordPress

Теперь давайте вставим siderbars туда, где мы хотим их видеть в теме. В нашем случае мы собираемся вставить их в области нижнего колонтитула. Откройте файл Footer (footer.php) и вставьте следующий код прямо над секцией “footer”:

<div id="footer-sidebar" class="secondary">
<div id="footer-sidebar1">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) : ?>
<?php endif; ?>
</div>

<div id="footer-sidebar3">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(4) ) : ?>
<?php endif; ?>
</div>

</div>
<div style="clear-both"></div>

 

3. Добавьте стиль

Наконец, давайте добавим немного стилей для нижних виджетов, которые мы только что внедрили. Откройте файл стилей style.css и вставьте следующий код (вероятно, придется настроить CSS под ваши потребности в зависимости от WordPress темы, которую вы используете).

#footer-sidebar {
display:block;
height: 250px;
}

#footer-sidebar1 {
float: left;
width: 340px;
margin-left:5px;
margin-right:5px;
}

#footer-sidebar2 {
float: left;
width: 340px;
margin-right:5px;
}

#footer-sidebar3 {
float: left;
width: 340px;
}

Надеюсь это поможет! Теперь вам не нужно менять свю любимую тему WordPress только, чтобы получить нижние виджеты.
Источник

Exit mobile version