Как добавить инкрементный класс к виджетам сайдбара?

Question

Как добавить инкрементный класс к виджетам сайдбара?

4 мар. 2011 г., 16:22:58

Просмотры: 1.25K

Голосов: 1

Мой код сайдбара в functions.php выглядит так...

if ( function_exists('register_sidebar') )
register_sidebar(array(
    'name' => 'Home Sidebar',
    'id' => 'home-sidebar-widget',
    'before_widget' => '<div class="menu side %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="sidebarTitle">',
    'after_title' => '</h4>',
));

Что создаёт такую разметку на сайте...

<div class="menu side widget_text">
    <h4>widget 1 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

<div class="menu side widget_text">
    <h4>widget 2 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

А мне нужно вот что (просто добавить номер к классам)...

<div class="menu side s1 widget_text">
    <h4>widget 1 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

<div class="menu side s2 widget_text">
    <h4>widget 2 title</h4>
    <div class="textwidget">Lorem ipsum dolor sit amet</div>
</div>

Я хочу добавить счётчик, чтобы каждый виджет сайдбара получал номер, который я смогу использовать для CSS стилизации. Как это сделать?

Scott B

5.7K

разработка тем виджеты

Комментарии

Помните, что имя класса не может начинаться с цифры, поэтому лучше использовать что-то вроде <div class="menu side widget_1 widget_text">

Dalton Rooney

4 мар. 2011 г. 17:23:50

Верное замечание. Не знаю, как я это упустил :-)

Scott B

4 мар. 2011 г. 17:26:19

Все ответы на вопрос

Комментарии

+1 - Возможно, это хак, но если работает, то это мой предпочтительный метод.

t31os

4 мар. 2011 г. 17:46:14

@Scott B: Ещё один момент... если у тебя есть возможность сделать это в рамках своего класса, я настоятельно рекомендую так и поступить, так как ты сможешь хранить счётчик как $this->widget_counter вместо того чтобы вываливать его в глобальную область видимости (что мне не нравится в этом решении).

wyrfel

4 мар. 2011 г. 21:46:14

Хотел добавить (этот вопрос всплыл в поиске), что использование подобного подхода для жёсткой привязки стилей виджетов сломает стили, если ты перетаскиваешь виджеты или добавляешь новые.

Wyck

2 сент. 2011 г. 02:27:50

Вы можете выбрать конкретные элементы в CSS следующим образом...(это, конечно, будет работать не во всех браузерах).

#sidebar div.menu.side:nth-child(1) { /* Первый */ }
#sidebar div.menu.side:nth-child(2) { /* Второй */ }
#sidebar div.menu.side:nth-child(3) { /* Третий */ }

...и так далее...

Или использовать jQuery для добавления классов..

jQuery(document).ready( function($) {
    var wi = 1;
    $('#sidebar div.menu.side').each( function() {
        $(this).addClass( 'widget-s' + wi );
        wi = wi + 1;
    });
});

Подход wyrfel выглядит так, как будто он может сработать для вас, я бы предложил его вместо двух вышеперечисленных.

t31os

18.7K

4 мар. 2011 г. 17:45:17

Комментарии

Тоже ставлю +1... в основном за нестандартное мышление. ;-)

wyrfel

4 мар. 2011 г. 21:44:13

wyrfel 3.08K · Accepted Answer · 2011-03-04T17:02:07Z

Кажется, нет простого способа сделать это. Однако можно попробовать такой хак:

add_filter('dynamic_sidebar_params', 'my_sidebar_params_cb');

function my_sidebar_params_cb($params) {
    global $my_widget_counter;
    if (empty($my_widget_counter)) $my_widget_counter = 1;
    else $my_widget_counter++;
    $params[0]['before_widget'] = str_replace('class="', 'class="widget_nr_'.$my_widget_counter.' ', $params[0]['before_widget']);
    return $params;
}

wyrfel

3.08K

4 мар. 2011 г. 17:02:07