it-swarm.com.de

Gewusst wie: Hinzufügen einer Klasse zu Seitenleisten-Widget-Listenelementen

Die neueste Version von Bootstrap (v3.0) fügt eine neue List Group -Komponente mit der folgenden Struktur hinzu:

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  1. Ich möchte in der Lage sein, eine Klasse zum ulhinzuzufügen (d. H. <ul class="list-group">)
  2. Ich möchte mein WidgetCategorysidebar so gestalten, dass es diese neue Komponente unterstützt. Wie Sie jedoch sehen, sind Klassen füreachlierforderlich. Artikel.

Beim Lesen einiger ähnlicher Beiträge habe ich die Möglichkeit gefunden, jQuery zu verwenden, um die Klasse zu jedem lihinzuzufügen, aber ich mache mir Sorgen um das gefürchteteFOUC.

Gibt es eine WordPress-Funktion, die mich zum Ziel bringt?

Bitte beraten,

Update:

Ich konnte Klassen zu den einzelnen liname_s hinzufügen, indem ich einen benutzerdefinierten Walker erstellte, der Walker_Category erweitert (siehe Code unten), aber dies bringt mich immer noch nicht zu dem ulname__, zu dem auch eine Klasse hinzugefügt werden muss (z. B. <ul class="list-group">).

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 = '<a href="' . esc_url( get_term_link($category) ) . '" ';
        if ( $use_desc_for_title == 0 || empty($category->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 . '</a>';

        if ( !empty($feed_image) || !empty($feed) ) {
            $link .= ' ';

            if ( empty($feed_image) )
                $link .= '(';

            $link .= '<a href="' . esc_url( get_term_feed_link( $category->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($feed_image) )
                $link .= $name;
            else
                $link .= "<img src='$feed_image'$alt$title" . ' />';

            $link .= '</a>';

            if ( empty($feed_image) )
                $link .= ')';
        }

        if ( !empty($show_count) )
            $link .= ' (' . intval($category->count) . ')';

        if ( 'list' == $args['style'] ) {
            $output .= "\t<li";
            $class = 'list-group-item cat-item cat-item-' . $category->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<br />\n";
        }
    } /* end start_el */

} /* end Walker_Category_BS */

Update 02:

Nachdem ich default-widgets.php im Core angezeigt hatte, entschied ich mich, ein neues Widget zu erstellen (WP_Widget_Categories_BS, siehe Code unten), wobei ich im Grunde den gesamten Code aus dem Standardkategorie-Widget kopierte und einfach den ULänderte, um die erforderliche Klasse hinzuzufügen.

<?php 

/**
 * Categories widget class
 *
 * @since 2.8.0
 */
class WP_Widget_Categories_BS extends WP_Widget {

    function __construct() {
        $widget_ops = array( 'classname' => '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));
?>

<script type='text/javascript'>
/* <![CDATA[ */
    var dropdown = document.getElementById("cat");
    function onCatChange() {
        if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
            location.href = "<?php echo home_url(); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value;
        }
    }
    dropdown.onchange = onCatChange;
/* ]]> */
</script>

<?php
        } else {
?>
        <ul class="list-group">
<?php
        $cat_args['title_li'] = '';
        wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?>
        </ul>
<?php
        }

        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['count'] = !empty($new_instance['count']) ? 1 : 0;
        $instance['hierarchical'] = !empty($new_instance['hierarchical']) ? 1 : 0;
        $instance['dropdown'] = !empty($new_instance['dropdown']) ? 1 : 0;

        return $instance;
    }

    function form( $instance ) {
        //Defaults
        $instance = wp_parse_args( (array) $instance, array( 'title' => '') );
        $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;
?>
        <p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e( 'Title:' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>

        <p><input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('dropdown'); ?>" name="<?php echo $this->get_field_name('dropdown'); ?>"<?php checked( $dropdown ); ?> />
        <label for="<?php echo $this->get_field_id('dropdown'); ?>"><?php _e( 'Display as dropdown' ); ?></label><br />

        <input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>"<?php checked( $count ); ?> />
        <label for="<?php echo $this->get_field_id('count'); ?>"><?php _e( 'Show post counts' ); ?></label><br />

        <input type="checkbox" class="checkbox" id="<?php echo $this->get_field_id('hierarchical'); ?>" name="<?php echo $this->get_field_name('hierarchical'); ?>"<?php checked( $hierarchical ); ?> />
        <label for="<?php echo $this->get_field_id('hierarchical'); ?>"><?php _e( 'Show hierarchy' ); ?></label></p>
<?php
    }

} // end WP_Widget_Categories_BS

In Kombination mit einem von mir erstellten benutzerdefinierten Walker (Walker_Category_BS) habe ich jetzt das, was ich wollte.

Analyse

Ist das der beste Weg, es zu tun? Weiß nicht da ich bisher keine Rückmeldung erhalten habe und dies das erste Mal war (daher die Frage), aber ... es funktioniert! Ich könnte eine Rezension gebrauchen.

Debug Warning

In Bezug auf meinen benutzerdefinierten Category Walker Walker_Category_BS wird diese Nachricht angezeigt

"Strenge Standards: Die Deklaration von Walker_Category_BS :: start_el () sollte mit Walker :: start_el (& $ output, $ object, $ depth = 0, $ args = Array, $ current_object_id = 0) in C:\wamp\www kompatibel sein\mysite\wp-content\themes\mytheme\assets\inc\Walker_Category_BS.php "

Es scheint eine Warnung zu sein.

4
sleeper

Update: 19.12.15 : Hier ist ein Plugin für Github , das ich entwickelt habe (unter Verwendung der unten angegebenen Methode) und Unterstützung für das Ändern aller Widgets in Bootstrap-Komponenten/-Stil hinzufügt.


Wordpress Widgets Bootstrapped



Ursprüngliche Antwort

Ich verstehe, dass ich kein Javascript verwenden möchte, aber meiner Meinung nach ist es übertrieben, ein neues Widget vollständig zu erstellen, nur damit die Klasse list-group zum Widget <ul> html tag. If you look at what the list-group hinzugefügt wird einige untere Ränder hinzufügen.

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

Höchstwahrscheinlich werden Sie dort nicht einmal die unteren Ränder wünschen, da Sie die Standardränder der .widget oder ähnlichen Seitenleiste before_widget class in Ihren Themen-CSS hinzufügen sollten.

Zum Beispiel: Standard-Seitenleisten-Widget-Ränder festlegen

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

Der einzige wirkliche Vorteil, den die Klasse Ihnen bietet, ist das Entfernen des standardmäßigen Browser-Paddings für Listen. Dies ist auch etwas (meiner Meinung nach), das Sie wahrscheinlich in Ihrem CSS tun sollten, da Bootstrap so sowieso damit umgeht.

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

Was die list-group-item-Klassen für die <li>-Elemente betrifft, können wir dafür den wp_list_categories-Filter verwenden. Und während wir gerade dabei sind, können wir das Styling für die Zählung genauso gut ändern wie für die Bootstraps-Formatierung ...

function bs_categories_list_group_filter ($variable) {
   $variable = str_replace('<li class="cat-item cat-item-', '<li class="list-group-item cat-item cat-item-', $variable);
   $variable = str_replace('(', '<span class="badge cat-item-count"> ', $variable);
   $variable = str_replace(')', ' </span>', $variable);
   return $variable;
}
add_filter('wp_list_categories','bs_categories_list_group_filter');

Wenn Sielist-group mit PHP hinzugefügt haben müssen und kein CSS oder Javascript verwenden möchten, haben Sie ein paar andere Optionen ...

Option 1 - Verwenden Sie die Ausgabepufferung in Ihren Themenvorlagen:

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 Ihrem function.php den primary_sidebar_filter verwenden und Regex verwenden, um den Standard-HTML-Code für 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, um dies zu tun, da Sie viel mehr Freiheit haben, Widgets anzupassen. Dies kann entweder als Plugin dank Philip Newcomer oder direkt zu Ihrem functions.php mit diesem Code hinzugefügt werden.

Um dann die neue Rückruffunktion für die Filterung Ihres Kategorie-Widgets zu verwenden (um das Bootstrap-Styling hinzuzufügen), fügen Sie Folgendes zu Ihrem functions.php hinzu:

function wpse_my_widget_output_filter( $widget_output, $widget_type, $widget_id ) {
    if ( 'categories' == $widget_type ) {
        $widget_output = str_replace('<ul>', '<ul class="list-group">', $widget_output);
        $widget_output = str_replace('<li class="cat-item cat-item-', '<li class="list-group-item cat-item cat-item-', $widget_output);
        $widget_output = str_replace('(', '<span class="badge cat-item-count"> ', $widget_output);
        $widget_output = str_replace(')', ' </span>', $widget_output);
    }      
      return $widget_output;
}
add_filter( 'widget_output', 'my_widget_output_filter_footer', 10, 3 ); 
5
Bryan Willis

wie wäre es, eine separate Seitenleiste für dieses Widget zu erstellen und eine Klasse mit der Funktion register_sidebar hinzuzufügen?

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'class'         => 'ul-class-name',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));
1
codepixlabs

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

1
sleeper