如何使用unctions.php向Widget添加CSS类？

时间：2014-12-19 作者：yaserso

我需要向WordPress搜索小部件添加一个类。我该怎么做呢？我从管理端调用它，就像将它拖放到管理部分widgets页面的侧栏中一样。我不是使用get\\u search\\u表单来调用它。我想通过使用函数来实现这一点。php文件，而不是jQuery或添加css属性。

4 个回复

最合适的回答,由SO网友:yaserso 整理而成

好吧，多亏了@toscho 谁为我提供了此链接：Add class to before_widget for all widgets with a dropdown and a counter

我挺过来的。

我想做的就是将一个类“col-sm-4”从引导添加到搜索小部件中。

is_admin() || add_filter( \'dynamic_sidebar_params\', \'wpse172754_add_widget_classes\' );

/**
 * Add classes for widgets.
 *
 * @param  array $params
 * @return array
 */
function wpse172754_add_widget_classes( $params ) {

if ($params[0][\'widget_name\'] == \'Search\') {
  $params[0] = array_replace($params[0], array(\'before_widget\' => str_replace("widget_search", "widget_search col-sm-4", $params[0][\'before_widget\'])));
}

  return $params;

}

请允许我解释一下它的作用。

首先，为了更好地理解代码，我做了一个print_r($params) 查看其中的内容，这是输出：

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget search-2 widget_search">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => search-2
        [widget_name] => Search
    )

    [1] => Array
    (
        [number] => 2
    )
)

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget custom-social-media-widget-2 widget_custom-social-media-widget col-xs-offset-2 col-xs-6 col-sm-offset-4 col-sm-3 col-lg-offset-5 col-lg-2">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => custom-social-media-widget-2
        [widget_name] => Custom Social Media Widget
    )

    [1] => Array
        (
            [number] => 2
)

为了更好地理解输出，我还访问了WordPress Code Reference 页面中的钩子，并查看数组实际包含的内容。接下来，我所要做的就是使用对我有利的数字和键。

首先，我知道大多数值都会存储在第一个数组中$params[0], 因为第二个只包含实例号，所以我应该使用该数组array_replace().before_widget 值，我使用了str_replace 更改值并添加所需的类名如果有更好的方法，请让我知道，或者在将来向我更新。希望这有帮助。

SO网友:Amit Mishra

嘿，你可以在像这样的小部件之前添加类

if ( function_exists(\'register_sidebar\') )
    register_sidebar(array(
       \'name\' => \'Your Widget Name\',
       \'description\' => \'Description of your widget\',
       \'before_widget\' => \'<div class="container-top">\',
       \'after_widget\' => \'</div>\',
       \'before_title\' => \'<h3 class="widget-title">\',
       \'after_title\' => \'</h3>\',
    ));

我想这对你有帮助

SO网友:dragoweb

这将在每个小部件上添加一个类字段：

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance[\'classes\']) )
        $instance[\'classes\'] = null;   
        $row .= "Class:\\t<input type=\'text\' name=\'widget-{$widget->id_base}[{$widget->number}][classes]\' id=\'widget-{$widget->id_base}-{$widget->number}-classes\' class=\'widefat\' value=\'{$instance[\'classes\']}\'/>\\n";
        $row .= "</p>\\n";    
        echo $row;
    return $instance;
}
add_filter(\'widget_form_callback\', \'kc_widget_form_extend\', 10, 2);function kc_widget_update( $instance, $new_instance ) {
    $instance[\'classes\'] = $new_instance[\'classes\'];
return $instance;
}
add_filter( \'widget_update_callback\', \'kc_widget_update\', 10, 2 );
function kc_dynamic_sidebar_params( $params ) {
    global $wp_registered_widgets;
    $widget_id    = $params[0][\'widget_id\'];
    $widget_obj    = $wp_registered_widgets[$widget_id];
    $widget_opt    = get_option($widget_obj[\'callback\'][0]->option_name);
    $widget_num    = $widget_obj[\'params\'][0][\'number\'];    
    if ( isset($widget_opt[$widget_num][\'classes\']) && !empty($widget_opt[$widget_num][\'classes\']) )
        $params[0][\'before_widget\'] = preg_replace( \'/class="/\', "class=\\"{$widget_opt[$widget_num][\'classes\']} ", $params[0][\'before_widget\'], 1 );
    return $params;
}
add_filter( \'dynamic_sidebar_params\', \'kc_dynamic_sidebar_params\' );

Source

SO网友:propz

有一个插件，您可以使用它向小部件添加更多CSS类和ID。它叫Widget CSS Classes. 非常方便，看看：https://wordpress.org/plugins/widget-css-classes/

结束

小码农CODE

如何使用unctions.php向Widget添加CSS类？

相关推荐

将多个css文件入队的正确方式是什么？