web-dev-qa-db-ja.com

How To：サイドバーウィジェットのリスト項目にクラスを追加する

最新バージョンの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>
  1. 私はul（すなわち<ul class="list-group">）にクラスを追加したいと思います。
  2. この新しいコンポーネントをサポートするためにCategoryサイドバーウィジェットをスタイルしたいのですが、ご覧のとおり、これにはeachliのクラスが必要です項目。

似たような記事をいくつか読んで、私が見つけた1つのオプションは jQuery を使用してそれぞれのliにクラスを追加することですが、恐ろしいFOUCについては心配しています。

目標を達成するためのWordPress機能はありますか。

お知らせ下さい、

更新：

Walker_Categoryを拡張するカスタムウォーカーを作成することで個々のliにクラスを追加することができました（下記のコードを参照）が、それでもまだ追加されたクラスが必要な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 */

アップデート02：

コアのdefault-widgets.phpを見た後、私は基本的にデフォルトのカテゴリウィジェットからすべてのコードをコピーし、必要なクラスを追加するために単にULを変更するという新しいウィジェット（WP_Widget_Categories_BS、下記のコードを参照）を作成することにしました。

<?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）と組み合わせることで、必要なものを手に入れることができます。

分析

これが最善の方法ですか？ わからない これまで私はゼロフィードバックを受けています、そしてこれが私がこれをしたのはこれが初めてです（だから質問です）が、それはうまくいきます！私はレビューを使うことができました。

デバッグ警告

カスタムカテゴリウォーカーWalker_Category_BSについては、このメッセージが表示されます

"厳密な標準：C：\ wamp\wwwのWalker_Category_BS :: start_el（）の宣言は、Walker :: start_el（＆$ output、$ object、$ depth = 0、$ args = Array、$ current_object_id = 0）と互換性があります。\mysite\wp-content\themes\mytheme\assets\inc\Walker_Category_BS.php "

これはある種の警告です。

theme-developmentwidgetssidebarcoreregister-sidebar
4
sleeper

更新：12/19/15： これはGithubのプラグインです 私が開発した（以下に提供する回答の方法を使用して） ）すべてのウィジェットをbootstrap components/stylingに変更するためのサポートを追加します。

Wordpress Widgets Bootstrapped


元の回答

私はjavascriptを使用したくないことを理解していますが、list-groupクラスをウィジェットに追加するためだけに新しいウィジェットを完全に作成するのは私の意見ではやり過ぎだと思われます<ul> html tag. If you look at what the list-groupクラスそれは、デフォルトのブラウザのパディングを削除し、下マージンを追加することです。

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

テーマcssの.widgetまたは同様のサイドバー before_widget class にデフォルトのマージンを追加する必要があるため、ほとんどの場合、そこに下部マージンも必要ありません。

例：デフォルトのサイドバーウィジェットのマージンの設定

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

したがって、本質的に、クラスが提供する唯一の本当の利点は、リストのデフォルトのブラウザのパディングを削除することです。 bootstrapがどうにかしてこれを処理するので、これは（私の意見では）あなたがおそらくあなたのcssで行うべきものです。

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

list-group-item要素の<li>クラスに関しては、wp_list_categoriesフィルターを使用できます。そして、その間、カウントのスタイルをブートストラップのフォーマットに変更することもできます...

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

あなたがPHPで追加されたリストグループを持っている必要があり、cssまたはjavascriptを使用したくない場合は、他のいくつかのオプションがあります...

オプション1-テーマテンプレートで出力バッファリングを使用する：

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を使用してデフォルトのhtmlを置き換えます

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

オプション2-プラグイン/テンプレートの外部で出力バッファリングを使用する：

これはおそらく、ウィジェットを自由にカスタマイズできるため、これを行う最適な方法です。これは プラグインとしてPhilip Newcomer のおかげで、または このコードを使用したfunctions.php に直接追加できます。

次に、カテゴリウィジェットフィルタリングに新しいコールバック関数を使用する（bootstrapスタイリングを追加する）には、これを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 );
5
Bryan Willis

このウィジェット用の独立したサイドバーを作成し、register_sidebar funcitonを使用してクラスを追加するのはどうですか？

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

更新 ：私はデバッグの警告を修正し、すべてが動いているように見えます。他にコメントがない場合は、元の質問の更新に記載されている自分の解決策を受け入れます。

1
sleeper