### [怎么为WordPress小工具添加CSS类选项](https://www.prosaas.cn/article/8700)

**Published:** 2021-04-26T08:54:29

**Author:** 5201314

**Excerpt:** 下面由WordPress教程栏目给大家介绍怎么为WordPress小工具添加CSS类选项，希望对需要的朋友有所…

下面由**WordPress教程**栏目给大家介绍怎么为WordPress小工具添加CSS类选项，希望对需要的朋友有所帮助！

WordPress 小工具可以重复使用，相同的小工具样式也是相同的，如果想自定义某个前台添加的小工具样式，与其它不同，可以通过查看原代码，找到它的id，比如搜索小工具会看到类似的：

<section id="search-2" class="widget widget\_search">

其中search-2就是这个小工具的ID，可以用#search-2定义样式，不过这个后缀的编号并不是固定的，下次添加可能会变，需要再次编辑之前的样式，有些麻烦。

可以通过下面的代码，给现有的小工具统一增加CSS类选项，将代码添加到当前主题函数模板functions.php中即可，效果如图：

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212131520748.png)

代码一　

只加一个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' );

代码二　

添加ID及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类名称，可能使用更方便些。

缺点：添加的选项位置在其它小工具选项的上面，需要改进一下。

以上就是怎么为WordPress小工具添加CSS类选项的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** css, php, WordPress, 函数模板

**Categories:** WordPress

---