如何给WordPress 小工具添加CSS类选项？ – WordPress 教程

WordPress 的小工具是可以重复使用的，但是页面所调用的小工具，所有的样式都是一样的。无法在特定页面使用不同的样式在展现。

这其实可以通过代码来解决这个问题，想要让前台某个页面使用不同样式的小工具样式。可以通过以下方法来实现。

查找到小工具ID

首先可以在前台通过源代码查看（F12），查看小工具的ID是多少。如下：

<section id="search-2" class="widget widget_search">

这段代码中的search-2就是小工具的ID，可以在页面中使用选择器来写这个ID的样式。#search-2{CSS样式表};但是这个ID的后缀不是一成不变的，再次添加可能会改变。这里只能用来控制，而不能实际的做到后台指定某个页面改变样式。

这里就需要在后台给小工具添加一个CSS选项。

添加wordpress小工具CSS选项方法与代码

将以下代码添加到当前主题函数模板functions.php中即可，效果如图：

只加一个CSS样式（用于小工具更改样式，或者指定某个样式）

function zm_widget_form_extend( $instance, $widget ) {  if ( !isset($instance['classes']) ) $instance['classes'] = null; $row = "<p>n"; $row .= "t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>CSS类</label>n"; $row .= "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', 'zm_widget_form_extend', 10, 2); function zm_widget_update( $instance, $new_instance ) { $instance['classes'] = $new_instance['classes']; return $instance;}add_filter( 'widget_update_callback', 'zm_widget_update', 10, 2 ); function zm_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', 'zm_dynamic_sidebar_params' );

第二种，是添加多个CSS演示，以供后台切换。

function zm_widget_form_extend( $instance, $widget ) { if ( !isset( $instance['classes'] ) ) $instance['classes'] = null;  if ( !isset( $instance['custom_id'] ) ) $instance['custom_id'] = null;  $class_prefix = 'widget-';  $myclass = array( 'default'  => '默认', 'blue'     => '蓝色', 'yellow'   => '黄色', 'black'    => '黑色', );  $row = "<p>n"; $row .= "t<label for='widget-{$widget->id_base}-{$widget->number}-custom_id'>添加ID</label>n"; $row .= "t<input type='text' name='widget-{$widget->id_base}[{$widget->number}][custom_id]' id='widget-{$widget->id_base}-{$widget->number}-custom_id' class='widefat' value='{$instance['custom_id']}' />n"; $row .= "t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>CSS类</label>n"; $row .= "t<select name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat'>"; foreach( $myclass as $key => $class ) { $selected = null; if( $class_prefix.$key == $instance['classes'] ) $selected = 'selected = "selected"'; $row .= "t<option value='$class_prefix$key' $selected>$class</value>n"; } $row .= "</select>n"; echo $row; return $instance;}add_filter('widget_form_callback', 'zm_widget_form_extend', 10, 2); function zm_widget_update( $instance, $new_instance ) { $instance['classes'] = $new_instance['classes']; $instance['custom_id'] = $new_instance['custom_id']; return $instance;}add_filter( 'widget_update_callback', 'zm_widget_update', 10, 2 ); function zm_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 ); if ( isset($widget_opt[$widget_num]['custom_id']) && !empty($widget_opt[$widget_num]['custom_id']) ) $params[0]['before_widget'] = preg_replace( '/id=".*?"/', "id="{$widget_opt[$widget_num]['custom_id']}"", $params[0]['before_widget'], 1 ); return $params;}add_filter( 'dynamic_sidebar_params', 'zm_dynamic_sidebar_params' );

这样就可以在后台控制CSS样式。

最后，你只需要在外部CSS样式表书写blue、yellow、black 这几个样式即可引用。