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


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

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

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

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

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

代码一 

只加一个CSS类选项

function zm_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
$instance['classes'] = null;
$row = "

\n"; $row .= "\t\n"; $row .= "\tid_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat' value='{$instance['classes']}'/>\n"; $row .= "

\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 = "

\n"; $row .= "\t\n"; $row .= "\tid_base}[{$widget->number}][custom_id]' id='widget-{$widget->id_base}-{$widget->number}-custom_id' class='widefat' value='{$instance['custom_id']}' />\n"; $row .= "\t\n"; $row .= "\t\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类选项的详细内容,更多请关注php中文网其它相关文章!


来源:PHP中文网-藏色散人

相关专题

wordpress

认识 WordPress WordPress是一款能让您建立出色网站、博客或应用程序的开源软件。 美观的设计,强大的功能,助您自由发挥心中所想。WordPress既是免费的,也是无价的。 强大的功能 无限的可能性。您想打造什么? 可自定义设计 SEO友好 响应式移动端站点 高性能 随时随地管理 高安…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到圈子反馈!

© 转载请声明:转载自“龙萱坤诺"

软件教程

关于WordPress网站被黑客攻击的5个迹象

2021-6-23 16:06:27

软件教程

分享一个CSS和JS合并的WordPress插件

2021-6-23 17:33:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6176

    评论

    4

    粉丝

    6

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    819

    评论

    2

    粉丝

    3

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    317

    评论

    32

    粉丝

    14

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    141

    评论

    76

    粉丝

    8

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    106

    评论

    14

    粉丝

    2

    关注

    0

    Wordpress建站服务商