Cum pot adăuga un identificator de clasă incremental widget-urilor din bara laterală?

Question

Cum pot adăuga un identificator de clasă incremental widget-urilor din bara laterală?

4 mar. 2011, 16:22:58

Vizualizări: 1.25K

Voturi: 1

Codul meu pentru widget-urile din bara laterală în functions.php arată astfel...

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>',
));

Ceea ce generează acest markup pe site...

<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>

Iar eu am nevoie de acest rezultat (doar adăugând un număr la colecția de clase)...

<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>

Doresc să adaug o variabilă de numărare astfel încât fiecare widget din bara laterală să primească un număr pe care îl pot folosi ulterior pentru targetare în css. Cum pot face acest lucru?

Scott B

5.7K

dezvoltare teme widgeturi

Comentarii

Ține minte că numele unei clase nu poate începe cu un număr, așa că poate ceva de genul <div class="menu side widget_1 widget_text">

Dalton Rooney

4 mar. 2011 17:23:50

Bună observație. Nu știu cum am ratat asta :-)

Scott B

4 mar. 2011 17:26:19

Toate răspunsurile la întrebare

Comentarii

+1 - Poate fi puțin hackish, dar dacă funcționează, aceasta ar fi metoda mea preferată.

t31os

4 mar. 2011 17:46:14

@Scott B: Încă ceva... dacă ai ocazia să faci asta în cadrul propriului tău clasă, aș recomanda cu tărie să o faci, deoarece poți stoca counter-ul ca $this->widget_counter în loc să-l arunci în scope-ul global (ceea ce nu-mi place la această soluție).

wyrfel

4 mar. 2011 21:46:14

Voiam doar să adaug (am dat peste asta în căutare) că folosirea a ceva de genul acesta pentru a hard-coda stilurile widget-urilor va strica stilurile dacă muti widget-urile sau adaugi widget-uri noi.

Wyck

2 sept. 2011 02:27:50

Ai putea direcționa elemente specifice în CSS astfel..(nu va funcționa în toate browserele, desigur).

#sidebar div.menu.side:nth-child(1) { /* Primul */ }
#sidebar div.menu.side:nth-child(2) { /* Al doilea */ }
#sidebar div.menu.side:nth-child(3) { /* Al treilea */ }

..și așa mai departe...

Sau poți folosi jQuery pentru a adăuga clasele..

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

Abordarea lui wyrfel pare că ar putea funcționa pentru tine, aș sugera-o în locul celor două de mai sus.

t31os

18.7K

4 mar. 2011 17:45:17

Comentarii

Ți-am dat și eu +1... mai ales pentru că ai gândit în afara cutiei. ;-)

wyrfel

4 mar. 2011 21:44:13

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

Se pare că nu există o modalitate ușoară de a face acest lucru. Totuși, puteți încerca această abordare mai degrabă improvizată:

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 mar. 2011 17:02:07