怎么为WordPress小工具添加CSS类选项

redmaomail 2024-07-24 23:05 阅读数 71 #wordpress

下面由wordpress/" target="_blank">wordpress教程栏目给大家介绍怎么为wordpress小工具添加css类选项，希望对需要的朋友有所帮助！

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

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

登录后复制

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

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

立即学习“前端免费学习笔记（深入）”；

代码一　

只加一个CSS类选项

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

登录后复制

代码二　

添加ID及CSS类下拉选项

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

登录后复制

代码中预设了CSS类名称，可能使用更方便些。

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

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