如何:向侧栏小部件列表添加类-项

时间:2013-09-06 作者:sleeper

最新版本的Bootstrap(v3.0)添加了List Group 具有以下结构的组件:

<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 (即。<ul class="list-group">)Category 边栏小部件支持这个新组件,但正如您所见,这需要each li 项目use jQuery 将类添加到每个li, 但我担心FOUC.

有什么WordPress功能可以帮助我实现目标吗?

请告知:,

Update:

我能够为个人添加类li\'通过创建自定义助行器扩展Walker_Category (请参见下面的代码),但这仍然无法让我ul 还需要添加一个类(例如<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:

查看后default-widgets.php 在核心部分,我决定创建一个新的小部件(WP_Widget_Categories_BS, 请参阅下面的代码),其中我基本上复制了默认类别小部件中的所有代码,并简单地修改了UL 添加必要的类。

<?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
结合我创建的定制助行器(Walker_Category_BS) 我现在得到了我想要的。

Analysis

这是最好的方法吗?Don\'t know 因为到目前为止,我没有收到任何反馈,这是我第一次这样做(这就是问题所在),但是。。。它起作用了!我需要复习一下。

Debug Warning

关于我的自定义类别WalkerWalker_Category_BS, 我看到了这个消息

“严格的标准:Walker\\u Category\\u BS::start\\u el()的声明应与C:\\wamp\\www\\mysite\\wp content\\themes\\mytheme\\assets\\inc\\Walker\\u Category\\u BS.php中的Walker::start\\u el(&;output,$object,$depth=0,$args=Array,$current\\u object\\u id=0)兼容。”

这似乎是某种警告。

3 个回复
最合适的回答,由SO网友:Bryan Willis 整理而成

Update: 12/19/15 : Here\'s a plugin on Github 我开发的(使用下面提供的答案中的方法)添加了对将所有小部件更改为引导组件/样式的支持。

<小时>

Wordpress Widgets Bootstrapped

<人力资源>
Original Answer

我理解不想使用javascript,但在我看来,完全为list-group 要添加到小部件的类<ul> html tag. If you look at what the list-group 类实际上做到了这一点,您会注意到它所做的只是删除默认的浏览器填充并添加一些底部边距。

.list-group {
    padding-left: 0;
    margin-bottom: 0;
}
很可能您甚至不需要底部边距,因为您应该将默认边距添加到.widget 或类似的侧栏before_widget class 在您的主题css中。

For example: Setting default sidebar widget margins

.sidebar-primary .widget {
    margin-bottom: 20px;
}
因此,从本质上讲,该类给您带来的唯一真正好处是删除列表的默认浏览器填充。这也是(在我看来)您可能应该在css中做的事情,因为这就是bootstrap处理它的方式。

.sidebar-primary .widget.widget_categories {
    padding-left: 0;
}
至于list-group-item 上的类<li> 我们可以使用的元素wp_list_categories 对此进行筛选。虽然我们在做这件事,但我们还是可以将count的样式更改为bootstraps格式。。。

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\');
如果你must have 列表组是用php添加的,不想使用css或javascript,您确实有一些其他选项。。。

Option 1 - Use output buffering in your theme templates:

ob_start();
dynamic_sidebar( \'registered-sidebar-name\' );
$sidebar_output = ob_get_clean();
echo apply_filters( \'primary_sidebar_filter\', $sidebar_output );
然后在你的function.php 您可以使用primary_sidebar_filter 并使用regex替换

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 - Use output buffering in a plugin / outside of your templates:

这可能是最好的方法,因为它可以让您更自由地自定义任何小部件。这可以添加as a plugin 幸亏Philip Newcomer 或直接发送到您的functions.php with this code.

然后,要使用新的回调函数进行类别小部件过滤(添加引导样式),您需要将其添加到functions.php:

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

SO网友:Prince Singh

为这个小部件创建一个单独的侧栏并使用register_sidebar 功能?

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

SO网友:sleeper

Update: 我修复了调试警告,一切似乎都正常。如果没有任何其他意见,我将接受原始问题更新中列出的我自己的解决方案。

结束

相关推荐

Admin option sidebar count

我需要在管理侧边栏的选项菜单项中添加一个计数。这是如何做到的?I found a similar post:Modifying admin sidebar contents to show pending posts indicator