it-swarm.com.de

Wie kann ich meinen Seitenleisten-Widgets eine inkrementelle Klassenkennung hinzufügen?

Mein Sidebar Widget Code in functions.php sieht so aus ...

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

Womit dieses Markup auf der Site erstellt wird ...

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

Folgendes brauche ich (füge einfach eine Zahl zur Klassensammlung hinzu) ...

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

Ich möchte eine Zählvariable hinzufügen, damit jede Seitenleiste eine Zahl erhält, die ich dann für das CSS-Targeting verwenden kann. Wie?

1
Scott B

Es scheint keinen einfachen Weg zu geben, dies zu tun. Sie können jedoch diesen etwas hackigen Ansatz ausprobieren:

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;
}
5
wyrfel

Sie könnten bestimmte Elemente in CSS wie folgt ansprechen (funktioniert natürlich nicht bei allen Browsern).

#sidebar div.menu.side:nth-child(1) { /* First */ }
#sidebar div.menu.side:nth-child(2) { /* Second */ }
#sidebar div.menu.side:nth-child(3) { /* Third */ }

..and so on...

Oder verwenden Sie eine jQuery, um die Klassen hinzuzufügen.

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

wyrfels Ansatz sieht so aus, als ob er für Sie funktionieren könnte.

2
t31os