Come posso aggiungere un identificatore di classe incrementale ai widget della sidebar?

Question

Come posso aggiungere un identificatore di classe incrementale ai widget della sidebar?

4 mar 2011, 16:22:58

Visualizzazioni: 1.25K

Voti: 1

Il mio codice per la sidebar widget in functions.php è questo...

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

Che genera questo markup nel sito...

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

Ecco cosa mi serve (semplicemente aggiungendo un numero alla collezione di classi)...

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

Vorrei aggiungere una variabile contatore in modo che ogni sidebar ottenga un numero che posso poi usare per il targeting CSS. Come posso fare?

Scott B

5.7K

sviluppo temi widget

Commenti

Tieni presente che un nome di classe non può iniziare con un numero, quindi forse qualcosa di più simile a <div class="menu side widget_1 widget_text">

Dalton Rooney

4 mar 2011 17:23:50

Ottimo punto. Non so come ho fatto a perderlo :-)

Scott B

4 mar 2011 17:26:19

Tutte le risposte alla domanda

Commenti

+1 - Potrebbe essere un po' approssimativo, ma se funziona sarebbe il mio metodo preferito.

t31os

4 mar 2011 17:46:14

@Scott B: Un'altra cosa... se hai la possibilità di farlo all'interno della tua classe, te lo consiglio vivamente, così puoi memorizzare il contatore come $this->widget_counter invece di inserirlo nell'ambito globale (che è ciò che non mi piace di questa soluzione).

wyrfel

4 mar 2011 21:46:14

Volevo solo aggiungere (è apparso nei risultati di ricerca) che usare qualcosa del genere per codificare gli stili dei widget interromperà gli stili se sposti i widget o aggiungi nuovi widget.

Wyck

2 set 2011 02:27:50

Potresti selezionare elementi specifici in CSS in questo modo...(non funzionerà su tutti i browser ovviamente).

#sidebar div.menu.side:nth-child(1) { /* Primo */ }
#sidebar div.menu.side:nth-child(2) { /* Secondo */ }
#sidebar div.menu.side:nth-child(3) { /* Terzo */ }

..e così via...

Oppure usare jQuery per aggiungere le classi..

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

L'approccio di wyrfel sembra possa funzionare per te, ti suggerirei quello piuttosto che i due sopra.

t31os

18.7K

4 mar 2011 17:45:17

Commenti

Anche da me prendi un +1... soprattutto per aver pensato fuori dagli schemi. ;-)

wyrfel

4 mar 2011 21:44:13

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

Non sembra esserci un modo semplice per farlo. Tuttavia, puoi provare questo approccio piuttosto "hacky":

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