it-swarm-eu.dev

Přidejte třídu div pouze do jednoho widgetu

Chci přidat další třídy do tagu div mého vyhledávacího widgetu. Moje hledání je umístěno v bočním panelu spolu s dalšími widgety.

Můj kód:

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

Každý widget tak dostane id a class. Jak mohu přidat další třídy pouze do jednoho widgetu, ne do zbytku.

4
Peronia

Máte dvě možná řešení.

1. Háček filtru widget_display_callback

Parametry tohoto filtru parametry umožňují snadno cílit instanci widgetu a přepsat jeho argumenty.

Možný přístup by byl: Uvnitř zpětného volání filtru upravte argumenty pro tuto instanci, zobrazte ji a poté return false, aby se zabránilo opětovnému zobrazení normálním způsobem WordPressem. Viz tento kód v wp-includes/class-wp-widget.php .

2. Zaregistrujte nový widget, který rozšiřuje widget pro vyhledávání

Widget vyhledávání můžete rozšířit - definovaný v wp-includes/widgets/class-wp-widget-search.php a přepsat metodu widget(), chcete-li přidat třídu, kterou chcete, něco jako toto (kód by měl být přidáno na nějakém místě, které vidí WordPress, jako například vlastní plugin nebo ve vašem souboru functions.php soubor):

/**
 * 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' );
} );
2
Nabil Kadimi

Možnost 1: Použití třídy CSS již poskytnuto:

Každý widget již poskytuje jedinečné id a class pro použití v CSS pravidlech. Pro většinu stylingových potřeb je tedy lepší použít ty, které generují specifické pravidlo CSS, které bude fungovat pouze pro tento widget (např. Vyhledávání). Výchozí widget pro vyhledávání bude mít například třídu CSS widget_search. Můžete jej použít ke stylu widgetu vyhledávání odlišně od ostatních widgetů. Jako:

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

Možnost-2: Použití filtru dynamic_sidebar_params:

Vzhledem k tomu, že registrujete widgety s funkcí register_sidebar(), s největší pravděpodobností jste použili funkci dynamic_sidebar() v šablonách. V takovém případě můžete použít háček dynamic_sidebar_params filter pro vložení dalších tříd CSS pouze do určitého widgetu.

Použijte následující kód v souboru functions.php vašeho motivu (další instrukce jsou v KÓDU):

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*((?!\1).*?)\s*)?\1/i';
            $replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1';
            $params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 );
        }
    }
    return $params;
}

S výše uvedeným kódem můžete do tohoto řádku přidat jednu nebo více tříd CSS: $classes = array( 'custom-css-class-for-search' );. Pokud tedy chcete pro widget pro vyhledávání přidat dvě třídy CSS, bude to vypadat takto:

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

Možnost-3: Vlastní widget:

Pokud potřebujete více kontroly než výše uvedené metody zvládnou, pak můžete implementovat vlastní Widget pro vyhledávání jako je uvedeno v této odpovědi .

Může však být obtížné udržovat vlastní widgety, pokud chcete stejné chování pro více widgetů. Protože pak budete muset implementovat tento widget taky (pouze pro extra CSS třídu)! Pokud to není problém pro vás, pak můžete sledovat, že cesta, stejně jako s vlastní Widget, budete mít mnohem lepší kontrolu nad označení a funkčnost.

3
Fayaz