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>
ul
hinzuzufügen (d. H. <ul class="list-group">
)li
erforderlich. Artikel.Beim Lesen einiger ähnlicher Beiträge habe ich die Möglichkeit gefunden, jQuery zu verwenden, um die Klasse zu jedem li
hinzuzufü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 li
name_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 ul
name__, 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.
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.
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 );
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>'
));
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.