Adicione classe div a apenas um widget

4

Eu quero adicionar mais classes na tag div do meu widget de pesquisa. Minha pesquisa está localizada na barra lateral junto com outros widgets.

Meu código:

function NT_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Sidebar', 'side' ),
    'id'            => 'sidebar',
    'description'   => __( 'Rechte Spalte', 'rechts' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<span class="none">',
    'after_title'   => '</span>',
) );

}
add_action( 'widgets_init', 'NT_widgets_init' );

Portanto, cada widget recebe um id e um class . Como posso adicionar mais classes a apenas um widget, não o restante.

    
por Peronia 28.02.2017 / 15:07

2 respostas

2

Você tem duas soluções possíveis.

1. O gancho de filtro widget_display_callback

Esse gancho de filtro permite que você direcione facilmente a instância do widget e substitua seus argumentos.

Uma abordagem possível seria: Dentro do retorno de chamada do filtro, modifique os argumentos para essa instância, exiba-os e, em seguida, retorne false para evitar que sejam exibidos novamente do modo normal pelo WordPress. Veja este código em wp-includes / class-wp- widget.php .

2. Registre um novo widget que estenda o widget de pesquisa

Você pode estender o widget de pesquisa - definido em wp-includes / widgets / classe-wp-widget-search.php e sobrescreve o método widget() para adicionar a classe que você quer, algo como isto (código deve ser adicionado em algum lugar visto por WordPress, como um plugin personalizado ou no seu tema functions.php file) :

/**
 * Custom widget search
 *
 * Extends the default search widget and adds a class to classes in 'before_title'
 *
 * @author  Nabil Kadimi
 * @link    http://wordpress.stackexchange.com/a/258292/17187
 */
class WP_Widget_Search_Custom extends WP_Widget_Search {

    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_search widget_search_custom',
            'description' => __( 'A Custom search form for your site.' ),
            'customize_selective_refresh' => true,
        );
        WP_Widget::__construct( 'search_custom', _x( 'Custom Search', 'Custom Search widget' ), $widget_ops );
    }

    public function widget( $args, $instance ) {

        $custom_class = 'wpse-258279';
        $args['before_widget'] = str_replace('class="', "class=\"$custom_class", $args['before_widget']);

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        // Use current theme search form if it exists
        get_search_form();
        echo $args['after_widget'];
    }
}

/**
 * Register the custom search widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'WP_Widget_Search_Custom' );
} );
    
por Nabil Kadimi 28.02.2017 / 16:55
3

Opção 1: usando a classe CSS já fornecida:

Cada widget já fornece os únicos id e class para usar nas regras CSS. Portanto, para a maioria das necessidades de estilo, é melhor usá-las para gerar uma regra de CSS específica que funcionará apenas para esse widget (por exemplo, Pesquisa). Por exemplo, o widget de pesquisa padrão terá a classe CSS widget_search . Você pode usá-lo para estilizar o widget de pesquisa de maneira diferente de outros widgets. Como:

.widget {
    background-color: wheat;
}
.widget.widget_search {
    background-color: gold;
}

Opção 2: usando o filtro dynamic_sidebar_params :

Como você está registrando os widgets com a função register_sidebar() , é bem provável que você tenha usado a função dynamic_sidebar() nos modelos. Nesse caso, você pode usar o gancho de filtro dynamic_sidebar_params para inserir classes CSS extras apenas em um widget específico .

Use o seguinte CÓDIGO no arquivo functions.php do seu tema (instruções adicionais estão no CÓDIGO):

add_filter( 'dynamic_sidebar_params', 'wpse258279_filter_widget' );
function wpse258279_filter_widget( $params ) {
    // avoiding admin panel
    if( ! is_admin() ) {
        if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['widget_name'] === 'Search' ) {
            // Insert your custom CSS class (one or more) in the following array
            $classes = array( 'custom-css-class-for-search' );

            // The following three lines will add $classes
            // (along with the existing CSS classes) using regular expression
            // don't touch it if you don't know RegEx
            $pattern = '/class\s*=\s*(["\'])(?:\s*((?!).*?)\s*)?/i';
            $replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1';
            $params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 );
        }
    }
    return $params;
}

Com o CÓDIGO acima, você pode adicionar uma ou mais classes CSS nesta linha: $classes = array( 'custom-css-class-for-search' ); . Então, se você quiser adicionar duas classes CSS para o widget de pesquisa, será como:

$classes = array( 'custom-css-class-for-search', 'another-class' );

Opção 3: Widget personalizado:

Se você precisar de mais controle do que os métodos acima podem manipular, você pode implementar o Widget personalizado para Pesquisa como mostrado nesta resposta .

No entanto, pode ser difícil manter widgets personalizados se você quiser o mesmo comportamento para vários widgets. Porque então você terá que implementar esse widget também (apenas para classe CSS extra)! Se isso não é um problema para você, então você pode seguir esse caminho, como com um Widget personalizado, você terá um controle muito melhor sobre as marcações e a funcionalidade.

    
por Fayaz 28.02.2017 / 21:04