Extra CSS classok beállítása WordPress widgetekre

Többször is felmerült már, egy-egy WordPress sablon fejlesztésekor, hogy a widget-eket, a sidebar regisztrálásakor megadott CSS osztályok mellet, további osztályokkal is felruházzam. Jó lett volna megjelölni pl. az elsőt, az utolsót, vagy minden másodikat, harmadikat. A legutolsó munkámnál egyszerűen nem találtam kerülő megoldást, elengedhetetlenné vált ennek a megvalósítása.

A WP widgetekért felelős kódjait végigbogarászva bukkantam a dynamic_sidebar_params filter tag-ra. Ezen a ponton lehet a widget-ek által is megkapott paramétereken szűrő függvényeket futtatni. Lássuk a kódot:

<?php
function widget_param_filter( $params ) {
    $id = $params[0]['id'];
    static $counter;
    static $counts;
    if ( is_null( $counter ) ) {
        $counter = array();
    }
    if ( is_null( $counts ) ) {
        $counts = array();
        $sidebars_widgets = wp_get_sidebars_widgets();
        foreach ( $sidebars_widgets as $sidebar_id => $widgets ) {
            $counts[ $sidebar_id ] = count( $widgets );
        }
    }
    if ( !isset( $counter[ $id ] ) ) {
        $counter[ $id ] = 0;
    }
    $count = $counter[ $id ];
    $class = array();
    $m = array();
    $alowedQuotes = "['\"]";
    if ( preg_match( '/\sclass=('.$alowedQuotes.')(?P<class>.*?)\\1/', $params[0]['before_widget'], $m ) ) {
        $class = array( $m['class'] );
    }
    if ( $count == 0 ) {
        $class[] = 'first';
    }
    if ( $count + 1 == $counts[ $id ] ) {
        $class[] = 'last';
    }
    $class[] = ( $count % 2 ) ? 'odd' : 'even';
    switch ( $count % 3 ) {
        case '0' : $class[] = 'one-thirds'; break;
        case '1' : $class[] = 'two-thirds'; break;
        case '2' : $class[] = 'three-thirds'; break;
    }
    switch ( $count % 4 ) {
        case '0' : $class[] = 'one-fourth'; break;
        case '1' : $class[] = 'two-fourth'; break;
        case '2' : $class[] = 'three-fourth'; break;
        case '3' : $class[] = 'four-fourth'; break;
    }
    if ( count( $m['class'] ) &gt; 0 ) {
        $params[0]['before_widget'] = preg_replace( '/\sclass=('.$alowedQuotes.').*?\\1/', '', $params[0]['before_widget'], 1 );
    }
    elseif ( preg_match( '/< \w+/', $params[0]['before_widget'] ) ) {
        $params[0]['before_widget'] = preg_replace( '/<(\w)+/', '<$1', $params[0]['before_widget'], 1 );
    }
    else {
        $params[0]['before_widget'] = '<div>';
        $params[0]['after_widget'] .= '';
    }
    $counter[ $id ]++;
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_param_filter' );

A két static változót használjuk számolásra. A függvény első hívásakor állítódik be a $counter változó értéke, mely egy, a regisztrált oldalsávokban található elemek számát tartalmazzó tömb. A $counts is egy tömb, melyben azt tartjuk nyílván, hogy adott oldalsávban éppen hanyadik widget-et bővítjük.

Ezután kinyerjük az eddig beállított osztályokat, és elkezdjük összeszedni a sorban elfoglalt hely szerintieket. Ha az aktuáls számláló nulla, akkor ez az első, ha egyel kisebb mint az elemek száma akkor ez az utolsó. Ha a számláló értéke osztható kettővel akkor páros (odd), ha nem akkor páratlan (even). Még megállapítja hanyadik harmad, és hanyadik negyednél jár.

Utolsó lépésben lecseréljük az eddigi osztályokat az összeszedettre. Ha nincs beállítva semmilyen osztály, akkor a legkülső HTML tag kapja meg mint új attributumot. Ha a határoló kód üres, akkor beállítunk egy div elemet az előbb összeszedett osztályokkal (és egyúttal a zárót is bővítjük, az előbbi div záró felével).

Ezt a kódot a használt téma functions.php állományába kell elhelyezni

2 Responses to Extra CSS classok beállítása WordPress widgetekre