为 WordPress 小工具添加CSS类选项

知更鸟
知更鸟
知更鸟
1655
文章
6940
评论
2021年4月24日10:23:2531832

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

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

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

为 WordPress 小工具添加CSS类选项

为 WordPress 小工具添加CSS类选项

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

为 WordPress 小工具添加CSS类选项

代码一 只加一个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类名称,可能使用更方便些。

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

参考自:https://gist.github.com/CEscorcio/5669905

也可以安装相关插件实现:Widget CSS Classes

 

weinxin
版权声明
本站原创文章转载请注明文章出处
为WordPress上下篇文章链接添加缩略图 WordPress

为WordPress上下篇文章链接添加缩略图

大部分WordPress主题都会在正文下面添加上下篇文章的链接,可以通过下面的代码给这个链接再加个缩略图,让其更醒目。 为WordPress上下篇文章链接添加缩略图 将下面代码添加到正文模板文件的适当...
无需输入密码的WordPress登录表单 WordPress

无需输入密码的WordPress登录表单

如果想在WordPress主题中添加一个不需要输入密码,仅输入用户名或电子邮件即可登录的表单,可以用下面的方法实现。 无需输入密码的WordPress登录表单 复制以下代码,粘贴到要显示表单的位置 &...
WordPress面包屑导航代码 WordPress

WordPress面包屑导航代码

转载分享一段WordPress面包屑导航代码,支持自定义帖子类型、自定义分类,但貌似在分类归档页面不能显示父子分类层级有点遗憾。 WordPress面包屑导航代码 将代码添加到当前主题函数模板func...
在 WordPress 文章正文开头和末尾分别添加固定内容 WordPress

在 WordPress 文章正文开头和末尾分别添加固定内容

在不修改主题正文模板文件的情况下,想在正文开头和末尾添加固定内容,或者在已发表的文章中添加固定内容又不想重新编辑文章,可以通过下面的代码实现。 在正文开头和末尾分别添加固定内容 会用到过滤器钩子add...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:3   其中:访客  2   博主  1
    • 秦志翔 秦志翔 0

      为什么我的网站评论失败?

      • 倡萌 倡萌 2

        位置一般和优先级有关,可以将钩子中的10修改为更大的值来调整优先级,应该就可以了

          • 知更鸟 知更鸟

            @ 倡萌 嗯,钩子需要改成
            add_filter( ‘in_widget_form’
            代码也需要重写