web-dev-qa-db-ja.com

2番目のウィジットジェットとにスタイルを設定しますか？

私は私のサイドバーの中の2番目のウィジェットに特定のスタイルを適用する必要があります、そして、私は使用するのを躊躇します：クロスブラウザ互換性問題のためにnth-child他のすべてのウィジェットにクラスを適用できるようにするPHPが少しありますか。

phpwidgetscss
1
daysrunaway

dynamic_sidebar_paramsフィルターを使用してください。次のコードは、ウィジェットが奇数であるか偶数であるか、サイドバーにどのインデックスがあるか、そしてどのサイドバーにあるかを示すクラスを追加します。

注：以下のstr_replace("class=\"", "class=\"$class ", $before_widget);コードは、二重引用符を使用しているbefore_widgetに依存します。単一引用符も処理するには、おそらく正規表現を使用してください。私は今までにそれを回避したことがありません。

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

これはおそらくCSS :nth-child擬似クラス、特に:nth-child(odd)と:nth-child(even)を利用するのに最適な場所でしょう。私はブラウザの互換性についてあまり心配しないでしょう。必要な場合は、IE 8にはjQueryを使用してください。

1
Chip Bennett

これがWordPress.orgフォーラムの関連ディスカッションです。 http://wordpress.org/support/topic/dynamic-widget-classes-for-use-in-css

0
hfz