¿Cómo puedo añadir un identificador de clase incremental a mis widgets de la barra lateral?

Question

¿Cómo puedo añadir un identificador de clase incremental a mis widgets de la barra lateral?

4 mar 2011, 16:22:58

Vistas: 1.25K

Votos: 1

Mi código de widgets de barra lateral en functions.php se ve así...

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

Lo cual crea este markup en el sitio...

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

Esto es lo que necesito (solo añadiendo un número a la colección de clases)...

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

Me gustaría añadir una variable de conteo para que cada widget de la barra lateral obtenga un número que pueda usar luego para apuntar con CSS. ¿Cómo?

Scott B

5.7K

desarrollo de temas widgets

Comentarios

Ten en cuenta que un nombre de clase no puede empezar con un número, así que quizás algo más como <div class="menu side widget_1 widget_text">

Dalton Rooney

4 mar 2011 17:23:50

Buen punto. No sé cómo se me pasó ese detalle :-)

Scott B

4 mar 2011 17:26:19

Todas las respuestas a la pregunta

Comentarios

+1 - Puede ser un poco chapucero, pero si funciona sería mi método preferido.

t31os

4 mar 2011 17:46:14

@Scott B: Una cosa más... si tienes la oportunidad de hacer esto dentro de tu propia clase, te recomendaría encarecidamente que lo hagas, ya que podrás almacenar el contador como $this->widget_counter en lugar de volcarlo en el ámbito global (que es lo que no me gusta de esta solución).

wyrfel

4 mar 2011 21:46:14

Solo quería añadir (esto apareció en la búsqueda) que usar algo así para codificar estilos de widgets romperá los estilos si arrastras widgets o añades nuevos widgets.

Wyck

2 sept 2011 02:27:50

Podrías apuntar a elementos específicos en CSS así... (no funcionará en todos los navegadores, por supuesto).

#sidebar div.menu.side:nth-child(1) { /* Primero */ }
#sidebar div.menu.side:nth-child(2) { /* Segundo */ }
#sidebar div.menu.side:nth-child(3) { /* Tercero */ }

...y así sucesivamente...

O usar algo de jQuery para añadir las clases...

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

El enfoque de wyrfel parece que podría funcionar para ti, yo sugeriría ese sobre los dos anteriores.

t31os

18.7K

4 mar 2011 17:45:17

Comentarios

También tienes mi +1... principalmente por pensar fuera de la caja. ;-)

wyrfel

4 mar 2011 21:44:13

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

Parece que no hay una manera fácil de hacer esto. Sin embargo, puedes probar este enfoque algo improvisado:

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