web-dev-qa-db-fra.com

Style chaque seconde widget?

Je dois appliquer un certain style à chaque deuxième widget de ma barre latérale, et je suis réticent à l’utiliser: nth-child en raison de problèmes de compatibilité entre navigateurs. Est-ce qu'il y a un peu de PHP qui me permettra d'appliquer une classe à tous les autres widgets?

phpwidgetscss
1
daysrunaway

Utilisez le filtre dynamic_sidebar_params. Le code suivant ajoute des classes pour indiquer si le widget est pair ou impair, quel index il se trouve dans la barre latérale et dans quelle barre latérale il se trouve.

Remarque : le code str_replace("class=\"", "class=\"$class ", $before_widget); ci-dessous dépend de votre before_widget utilisant des guillemets doubles. Il convient probablement de le faire avec une expression régulière pour gérer également les guillemets simples. Je n'ai juste jamais eu le temps de le faire.

function my_filter_dynamic_sidebar_params($params){

    static $sidebar_widget_count = array();
    $sidebar_id = $params[0]["id"];
    if (! isset($sidebar_widget_count[$sidebar_id])){
        $sidebar_widget_count[$sidebar_id] = 0;
    }
    $before_widget = $params[0]['before_widget'];
    $class = $sidebar_widget_count[$sidebar_id] % 2 ? 
        "widget-odd" : "widget-even";
    $class .= " widget-index-" . $sidebar_widget_count[$sidebar_id];
    $class .= " widget-in-$sidebar_id";
    $before_widget = str_replace("class=\"", 
        "class=\"$class ", $before_widget);
    $params[0]['before_widget'] = $before_widget;
    $sidebar_widget_count[$sidebar_id]++;
    return $params;
}

add_filter("dynamic_sidebar_params", "my_filter_dynamic_sidebar_params");
6
Chris Carson

Ce serait probablement un bon endroit pour utiliser la pseudo-classe CSS :nth-child, en particulier :nth-child(odd) et :nth-child(even). Je ne m'inquiéterais pas trop de la compatibilité du navigateur. Si vous devez, utilisez simplement jQuery pour IE8.

1
Chip Bennett

Voici une discussion connexe sur le forum WordPress.org: http://wordpress.org/support/topic/dynamic-widget-classes-for-use-in-css

0
hfz