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

 4011

下面给大家介绍怎么为WordPress小工具添加CSS类选项,希望对需要的朋友有所帮助!


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

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

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

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


608698b69a328.png


代码一:

只加一个CSS类选项

  1. function zm_widget_form_extend( $instance, $widget ) {
  2.     if ( !isset($instance['classes']) )
  3.     $instance['classes'] = null;
  4.     $row = "<p>\n";
  5.     $row .= "\t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>CSS类</label>\n";
  6.     $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";
  7.     $row .= "</p>\n";
  8.     echo $row;
  9.     return $instance;
  10. }
  11. add_filter('widget_form_callback', 'zm_widget_form_extend', 10, 2);
  12. function zm_widget_update( $instance, $new_instance ) {
  13.     $instance['classes'] = $new_instance['classes'];
  14.     return $instance;
  15. }
  16. add_filter( 'widget_update_callback', 'zm_widget_update', 10, 2 );
  17.   
  18. function zm_dynamic_sidebar_params( $params ) {
  19.     global $wp_registered_widgets;
  20.     $widget_id    = $params[0]['widget_id'];
  21.     $widget_obj    = $wp_registered_widgets[$widget_id];
  22.     $widget_opt    = get_option($widget_obj['callback'][0]->option_name);
  23.     $widget_num    = $widget_obj['params'][0]['number'];
  24.       
  25.     if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
  26.     $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
  27.     return $params;
  28. }
  29. add_filter( 'dynamic_sidebar_params', 'zm_dynamic_sidebar_params' );


代码二:

添加ID及CSS类下拉选项

  1. function zm_widget_form_extend( $instance, $widget ) {
  2.     if ( !isset( $instance['classes'] ) )
  3.     $instance['classes'] = null;
  4.       
  5.     if ( !isset( $instance['custom_id'] ) )
  6.     $instance['custom_id'] = null;
  7.       
  8.     $class_prefix = 'widget-'; 
  9.     $myclass = array(
  10.         'default'  => '默认',
  11.         'blue'     => '蓝色',
  12.         'yellow'   => '黄色',
  13.         'black'    => '黑色',
  14.     );
  15.       
  16.     $row = "<p>\n";
  17.     $row .= "\t<label for='widget-{$widget->id_base}-{$widget->number}-custom_id'>添加ID</label>\n";
  18.     $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";
  19.     $row .= "\t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>CSS类</label>\n";
  20.     $row .= "\t<select name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat'>";
  21.     foreach( $myclass as $key => $class ) {
  22.         $selected = null;
  23.         if( $class_prefix.$key == $instance['classes'] ) $selected = 'selected = "selected"';
  24.         $row .= "\t<option value='$class_prefix$key' $selected>$class</value>\n";
  25.     }
  26.     $row .= "</select>\n";
  27.     echo $row;
  28.     return $instance;
  29. }
  30. add_filter('widget_form_callback', 'zm_widget_form_extend', 10, 2);
  31.   
  32. function zm_widget_update( $instance, $new_instance ) {
  33.     $instance['classes'] = $new_instance['classes'];
  34.     $instance['custom_id'] = $new_instance['custom_id'];
  35.     return $instance;
  36. }
  37. add_filter( 'widget_update_callback', 'zm_widget_update', 10, 2 );
  38.   
  39. function zm_dynamic_sidebar_params( $params ) {
  40.     global $wp_registered_widgets;
  41.     $widget_id  = $params[0]['widget_id'];
  42.     $widget_obj = $wp_registered_widgets[$widget_id];
  43.     $widget_opt = get_option($widget_obj['callback'][0]->option_name);
  44.     $widget_num = $widget_obj['params'][0]['number'];
  45.       
  46.     if ( isset( $widget_opt[$widget_num]['classes'] ) && !empty( $widget_opt[$widget_num]['classes'] ) )
  47.     $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
  48.     if ( isset($widget_opt[$widget_num]['custom_id']) && !empty($widget_opt[$widget_num]['custom_id']) )
  49.     $params[0]['before_widget'] = preg_replace( '/id=".*?"/', "id=\"{$widget_opt[$widget_num]['custom_id']}\"", $params[0]['before_widget'], 1 );
  50.     return $params;
  51. }
  52. add_filter( 'dynamic_sidebar_params', 'zm_dynamic_sidebar_params' );

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

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


本文网址:https://www.zztuku.com/detail-8832.html
站长图库 - 怎么为WordPress小工具添加CSS类选项
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐