HowTo: Hinzufügen einer class zu Sidebar Widget List-Items

Die neueste Version von Bootstrap (v3.0) fügt eine neue List-Group- Komponente hinzu, die folgende Struktur aufweist:

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  1. Ich möchte in der Lage sein, eine class zur ul hinzuzufügen (dh
      )
    • Ich möchte mein Kategorie- Sidebar-Widget so gestalten, dass es diese neue Komponente unterstützt, aber wie Sie sehen, erfordert dies classn für jedes li Element.

Beim Lesen einiger ähnlicher Beiträge ist eine Option, die ich gefunden habe, jQuery zu verwenden, um die class zu jedem li hinzuzufügen, aber ich mache mir Sorgen wegen des gefürchteten FOUC .

Gibt es eine WordPress-function, die mich zum Ziel führt?

Bitte beraten,

Aktualisieren:

Ich konnte den einzelnen classn classn hinzufügen, indem ich einen Custom Walker erstellte, der Walker_Category (siehe Code unten), aber das bringt mich immer noch nicht zur ul wo auch eine class hinzugefügt werden muss (zB

    ).

     class Walker_Category_BS extends Walker_Category { function start_el( &$output, $category, $depth = 0, $args = array() ) { extract($args); $cat_name = esc_attr( $category->name ); $cat_name = apply_filters( 'list_cats', $cat_name, $category ); $link = 'description) ) $link .= 'title="' . esc_attr( sprintf(__( 'View all posts filed under %s' ), $cat_name) ) . '"'; else $link .= 'title="' . esc_attr( strip_tags( apply_filters( 'category_description', $category->description, $category ) ) ) . '"'; $link .= '>'; $link .= $cat_name . ''; if ( !empty(https://wordpress.stackexchange.com/questions/113233/howto-add-class-to-sidebar-widget-list-items/$feed_image) || !empty($feed) ) { $link .= ' '; if ( empty(https://wordpress.stackexchange.com/questions/113233/howto-add-class-to-sidebar-widget-list-items/$feed_image) ) $link .= '('; $link .= 'term_id, $category->taxonomy, $feed_type ) ) . '"'; if ( empty($feed) ) { $alt = ' alt="' . sprintf(__( 'Feed for all posts filed under %s' ), $cat_name ) . '"'; } else { $title = ' title="' . $feed . '"'; $alt = ' alt="' . $feed . '"'; $name = $feed; $link .= $title; } $link .= '>'; if ( empty(https://wordpress.stackexchange.com/questions/113233/howto-add-class-to-sidebar-widget-list-items/$feed_image) ) $link .= $name; else $link .= "'; $link .= ''; if ( empty(https://wordpress.stackexchange.com/questions/113233/howto-add-class-to-sidebar-widget-list-items/$feed_image) ) $link .= ')'; } if ( !empty($show_count) ) $link .= ' (' . intval($category->count) . ')'; if ( 'list' == $args['style'] ) { $output .= "\t
  • term_id; if ( !empty($current_category) ) { $_current_category = get_term( $current_category, $category->taxonomy ); if ( $category->term_id == $current_category ) $class .= ' current-cat'; elseif ( $category->term_id == $_current_category->parent ) $class .= ' current-cat-parent'; } $output .= ' class="' . $class . '"'; $output .= ">$link\n"; } else { $output .= "\t$link
    \n"; } } /* end start_el */ } /* end Walker_Category_BS */
  • Update 02:

    Nach dem Anzeigen von default-widgets.php im core entschied ich mich, ein neues Widget zu erstellen ( WP_Widget_Categories_BS , siehe Code unten), wobei ich im Grunde den gesamten Code vom Standard-Kategorie-Widget kopierte und einfach das UL WP_Widget_Categories_BS , um die notwendige class hinzuzufügen.

      'widget_categories_bs', 'description' => __( "A list or dropdown of categories for Bootstrap 3.0" ) ); parent::__construct('categories', __('Boostrap Categories'), $widget_ops); } function widget( $args, $instance ) { extract( $args ); $title = apply_filters('widget_title', empty( $instance['title'] ) ? __( 'Categories' ) : $instance['title'], $instance, $this->id_base); $c = ! empty( $instance['count'] ) ? '1' : '0'; $h = ! empty( $instance['hierarchical'] ) ? '1' : '0'; $d = ! empty( $instance['dropdown'] ) ? '1' : '0'; echo $before_widget; if ( $title ) echo $before_title . $title . $after_title; $cat_args = array('orderby' => 'name', 'show_count' => $c, 'hierarchical' => $h); if ( $d ) { $cat_args['show_option_none'] = __('Select Category'); wp_dropdown_categories(apply_filters('widget_categories_dropdown_args', $cat_args)); ?>  /*  0 ) { location.href = "/?cat="+dropdown.options[dropdown.selectedIndex].value; } } dropdown.onchange = onCatChange; /* ]]> */   
    '') ); $title = esc_attr( $instance['title'] ); $count = isset($instance['count']) ? (bool) $instance['count'] :false; $hierarchical = isset( $instance['hierarchical'] ) ? (bool) $instance['hierarchical'] : false; $dropdown = isset( $instance['dropdown'] ) ? (bool) $instance['dropdown'] : false; ?>

    <label for="get_field_id('title'); ?>"> <input class="widefat" id="get_field_id('title'); ?>" name="get_field_name('title'); ?>" type="text" value="" />

    <input type="checkbox" class="checkbox" id="get_field_id('dropdown'); ?>" name="get_field_name('dropdown'); ?>" /> <label for="get_field_id('dropdown'); ?>">
    <input type="checkbox" class="checkbox" id="get_field_id('count'); ?>" name="get_field_name('count'); ?>" /> <label for="get_field_id('count'); ?>">
    <input type="checkbox" class="checkbox" id="get_field_id('hierarchical'); ?>" name="get_field_name('hierarchical'); ?>" /> <label for="get_field_id('hierarchical'); ?>">

    <?php } } // end WP_Widget_Categories_BS

    Kombiniert mit einem benutzerdefinierten Walker, den ich erstellt habe ( Walker_Category_BS ), habe ich jetzt, was ich wollte.

    Analyse

    Ist das der beste Weg? Ich weiß nicht, wie ich bisher keine Rückmeldung erhalten habe, und dies ist das erste Mal, dass ich das getan habe (daher die Frage), aber … es funktioniert! Ich könnte eine Bewertung verwenden.

    Debugging-Warnung

    Betreffend meiner benutzerdefinierten Kategorie Walker Walker_Category_BS ich diese Nachricht

    “Strikte Standards: Die Deklaration von Walker_Category_BS :: start_el () sollte mit C: \ wamp \ www mit Walker :: start_el (& $ output, $ object, $ depth = 0, $ args = Array, $ current_object_id = 0) kompatibel sein \ MeineSite \ wp-content \ themes \ mytheme \ Assets \ inc \ Walker_Category_BS.php ”

    Es scheint irgendwie eine Warnung zu sein.

    Solutions Collecting From Web of "HowTo: Hinzufügen einer class zu Sidebar Widget List-Items"

    Update: 19.12.15 : Hier ist ein Plugin auf Github , das ich entwickelt habe (unter Verwendung der Methode in der Antwort, die ich unten zur Verfügung gestellt habe), die Unterstützung hinzufügt, um alle Widget zu Bootstrap-Komponenten / Styling zu ändern.


    Wordpress Widgets Bootstrapped


    Ursprüngliche Antwort

    Ich verstehe, dass ich Javascript nicht verwenden möchte, aber es scheint meiner Meinung nach zu übertrieben, ein neues Widget nur für die list-group class zu erstellen, die dem Widget

      html tag. If you look at what the list-group

    hinzugefügt werden soll

      html tag. If you look at what the list-group

      html tag. If you look at what the list-group

    class tatsächlich macht, werden Sie bemerken, dass sie nur das Standard-Browser-Padding entfernt und einige untere Ränder hinzufügt.

     .list-group { padding-left: 0; margin-bottom: 0; } 

    Höchstwahrscheinlich werden Sie nicht einmal die unteren Ränder dort wollen, weil Sie die Standardränder der .widget oder ähnlichen before_widget class in Ihren Themen css hinzufügen sollten.

    Beispiel: Festlegen der Seitenrand-Widget-Standardmargen

     .sidebar-primary .widget { margin-bottom: 20px; } 

    Der einzige wirkliche Vorteil, den die class Ihnen bietet, ist das Entfernen des Standard-Browser-Padding für Listen. Dies ist auch etwas (meiner Meinung nach), das Sie wahrscheinlich in Ihrem CSS tun sollten, da dies sowieso der Bootstrap ist.

     .sidebar-primary .widget.widget_categories { padding-left: 0; } 

    Wie bei den list-group-item classn für die

  • -Elemente können wir den wp_list_categories Filter dafür verwenden. Und während wir gerade dabei sind, können wir sowohl das Styling für die Zählung als auch die Bootstrap-Formatierung ändern …

     function bs_categories_list_group_filter ($variable) { $variable = str_replace('
  • ', $variable); $variable = str_replace(')', ' ', $variable); return $variable; } add_filter('wp_list_categories','bs_categories_list_group_filter');

  • Wenn Sie List-Gruppe mit PHP hinzugefügt haben und nicht CSS oder Javascript verwenden möchten, haben Sie ein paar andere Optionen …

    Option 1 – Verwenden Sie die Ausgabepufferung in Ihren Designvorlagen:

     ob_start(); dynamic_sidebar( 'registered-sidebar-name' ); $sidebar_output = ob_get_clean(); echo apply_filters( 'primary_sidebar_filter', $sidebar_output ); 

    Dann würden Sie in Ihrer function.php den primary_sidebar_filter und Regex verwenden, um den Standard-HTML- primary_sidebar_filter zu ersetzen

     function bs_add_list_group_to_cats( $sidebar_output ) { // Regex goes here... // Needs to be a somewhat sophisticated since it's running on the entire sidebar, not just the categories widget. $regex = ""; $replace_with = ""; $widget_output = preg_replace( $regex , $replace_with , $widget_output ); return $sidebar_output; } add_filter( 'primary_sidebar_output', 'bs_add_list_group_to_cats' ); 

    Option 2 – Verwenden Sie die Ausgabepufferung in einem Plugin / außerhalb Ihrer Vorlagen:

    Dies ist wahrscheinlich der beste Weg, dies zu tun, da es Ihnen viel mehr Freiheit gibt, irgendwelche Widgets anzupassen. Dies kann entweder als Plugin dank Philip Newcomer oder direkt in Ihrer functions.php mit diesem Code hinzugefügt werden .

    Dann, um die neue Callback-function für die Kategorie-Widget-Filterung zu verwenden (um den Bootstrap-Stil hinzuzufügen), fügen Sie dies zu Ihrer functions.php :

     function wpse_my_widget_output_filter( $widget_output, $widget_type, $widget_id ) { if ( 'categories' == $widget_type ) { $widget_output = str_replace('
      ', '
      ', $widget_output); $widget_output = str_replace('
    • ', $widget_output); $widget_output = str_replace(')', ' ', $widget_output); } return $widget_output; } add_filter( 'widget_output', 'my_widget_output_filter_footer', 10, 3 );

    Was ist mit dem Erstellen einer separaten Sidebar für dieses Widget und Hinzufügen von class mit register_sidebar funciton?

     register_sidebar(array( 'name' => 'First_sidebar', 'id' => 'sidebar-1', 'class' => 'ul-class-name', 'before_widget' => '
    ', 'after_widget' => '
    ', 'before_title' => '

    ', 'after_title' => '

    ' ));

    Update : Ich habe die Debug-Warnung behoben und alles scheint zu funktionieren. In Ermangelung anderer Kommentare werde ich meine eigene Lösung akzeptieren, die in den ursprünglichen Fragen Updates beschrieben wurde.