您现在的位置是:首页 > 教程 > WordPress教程WordPress教程
WordPress小工具添加CSS类选项的方法
周放大2023-07-12 22:58:00WordPress教程已有人查阅
导读WordPress 小工具可以重复使用,相同的小工具样式也是相同的,如果想自定义某个前台添加的小工具样式,与其它不同,可以通过查看原代码,找到它的id
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['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修改已添加的自定义栏目显示数量的方法
有时我们会在添加自定义栏目面板中选择已添加的自定义栏目名称,但WordPress默认只显示按字母排序的前30个自定义栏目名称 -
wordpress怎么快速建立网站
一、到官网下载wordpress程序,现在 新的版本是4.9.4,压缩包大小是9.39MB,wordpress现在已经有中文网站,看起来也很方便。 -
自动为wordpress站点/文章添加关键词与描述的方法
网站的关键性字以及网页描述关系网站对于搜索引擎的友谊程度,假如自己手动加似乎甚折腾了,那如何让wordpress博客手动作为每篇文章手动关键性字以及网页描述 -
WordPress增加百度收录的方法
利用百度站长平台提供的链接自动提交代码, 快速增加百度收录, 加快网站内容抓取。1.创建名为 “baidu_js_push.php”的文件, 内容如下(自动推送JS代码 ):
留言与评论 (共有 条评论) |