小工具CSS类

描述

Widget CSS类使您能够向WordPress小部件添加自定义类和id

请注意,此插件不允许您输入自定义CSS。您需要编辑主题的style.css或添加其他样式
允许您输入自定义CSS的插件。

此插件还向小部件添加了其他类,以帮助您更轻松地设置它们的样式:

  • widget-first:添加到侧栏中的第一个小部件
  • widget-last:添加到侧边栏中的最后一个小部件
  • widget-odd:添加到边栏中的奇数小部件
  • widget-even:添加到边栏中的偶数小部件
  • widget-#:添加到每个widget,例如widget-1、widget-2

特征

  • 向小部件添加文本字段以定义类
  • 可以通过在类之间放置空格来指定多个类
  • (可选)添加带有预定义类的复选框
  • 可选地添加文本字段以向小部件添加id
  • 将第一个和最后一个类添加到侧栏中的第一个和最终一个小部件实例
  • 向小部件添加偶数/奇数类
  • 向小部件添加数字类
  • 完全可翻译
  • 多侧面兼容
  • 与小工具逻辑、小工具上下文和WP页面小工具插件兼容
  • 具有用于自定义输出(包括类名)的过滤器和挂钩

插件网站

信用

GitHub贡献者

屏幕截图

  • 基本小工具
  • 带有ID字段和预定义选项的小工具
  • 设置页面
  • 生成的HTML

安装

  1. 上传文件夹/小部件-css-class//wp-content/插件/目录
  2. 通过插件WordPress中的菜单
  3. 配置下的设置设置>小工具CSS类
  4. 访问外观>小工具添加或更改小部件的自定义类和id。
  5. 在所需的侧栏中展开相应的小部件。
  6. 您将看到一个标记为CSS类。根据您的设置,这将是一个文本字段和/或复选框。
  7. 如果使用的是文本字段,则可以通过用空格分隔来输入多个类名。
  8. 如果启用了id字段,您将看到一个名为CSS ID.

常见问题解答

为什么我的小部件中没有显示类?

您需要确保为定义了HTML元素before_widget之前小部件之后在您的活动主题中寄存器边栏功能,
通常位于主题的函数中。php(/wp-content/themes/yourtheme/functions.php).

此HTML元素必须具有class和id属性。如果before_widget之前小部件之后为空。

例子:
寄存器边栏(数组(
“name”=>“边栏”,
'before_widget'=>'<div id=“%1$s”class=“widget%2$s”>',
“after_widget”=>“</div>”,
'before_title'=>'<h2 class=“widget title”>',
“after_title”=>“</h2>”
) );

如何为自定义类添加CSS?

有两种方法:

  1. 编辑主题的style.css文件(通常位于/wp-content/themes/yourtheme/).
  2. 使用插件,例如简单自定义CSS.

如何导出设置?

您可以从导出设置设置>小工具CSS类>导入/导出.

如果我发现了一个错误,我该怎么办?

请提交GitHub上的错误报告.

评论

2021年3月10日
这对我们的前端开发人员来说是一个巨大而宝贵的帮助!该插件允许您轻松地将类添加到任何小部件。感谢您开发它!
2020年4月2日 1个回复
作为前端开发人员,这是一个非常有用的插件。现在很容易用CSS代码直接处理小部件,而不用使用各种不同的类。非常非常感谢!
阅读所有74条评论

贡献者和开发者

“小工具CSS类”是开源软件。以下人员对此插件做出了贡献。

贡献者

“Widget CSS类”已被翻译成15种语言环境。谢谢你翻译人员感谢他们的贡献。

将“Widget CSS类”翻译成您的语言。

对开发感兴趣?

浏览代码,查看SVN存储库,或订阅开发日志通过RSS(RSS).

变更日志

1.5.4.1

  • 用WP 5.5进行测试。
  • 更新插件所有者。

1.5.4

  • 兼容性:修复旧的单个小部件(删除通知)。#37(道具@westonruter)
  • 用WP 5.2进行测试。

1.5.3

  • 兼容性:dFactory Responsive Lightbox小部件选项。#33
  • 用WP 5.0进行测试。

1.5.2.1

  • i18n:从插件目录中删除sv_SE翻译。它在translate.wordpress.org上占95%,被认为是更好的版本。#23
  • 文档:自述和Wiki。#31
  • 兼容性:通过WordPress 4.9测试

详细信息:GitHub上的公关

1.5.2

  • 增强功能:使核心小部件类的翻译成为可选的,而不是默认的。#29
  • 增强功能:允许CSS3兼容浏览器的定义类框垂直调整大小。

详细信息:GitHub上的公关

1.5.1

  • 修复:小工具逻辑小部件内容过滤器兼容性。#27
  • 增强功能:使卸载脚本与网络安装兼容。

1.5.0

  • 功能:如果小部件参数无效,则尝试修复这些参数的选项。#24
  • 功能:删除重复类的选项。#25个
  • 增强功能:默认情况下,根据前端上的预定义类对类进行排序。#19个
  • 增强功能:类过滤器用于前端(用于排序或修改)。#19个
    • 小部件css类:修改此插件添加的所有类。
    • 小部件_css_classes_custom:修改自定义输入类。
  • 增强功能:插件设置过滤器(小部件cs_classes\set_settings),覆盖用户设置。#16
  • 增强功能:插件默认设置过滤器(小部件_css_classes_default_settings).#4
  • 增强功能:表单字段的功能筛选器。#21
    • 小部件css类id输入能力:ID输入
    • 小部件css_classes_class_input_capability:类输入
    • 小部件css_classes_class_select_capability:预定义类选择(如果无效,也隐藏类输入)
  • 兼容性:WP外部链接。#17多亏了维克多@自由职业php
  • 修复:表单包装器div样式。#18感谢查克·雷诺兹@雷诺267
  • 修复:启用可排序输入选择(IE-11修复)。#20
  • 用户界面:增强设置页面JavaScript并删除relCopy库依赖项。
  • i18n:从插件分发中删除荷兰语和俄语(可从上获得translate.wordpress.org).#23
  • 已开始使用TravisCI和CodeClimate。#15

详细信息:GitHub上的公关

1.4.0

  • 功能:对预定义类进行排序(感谢Jory Hogeveen)
  • 安全:防止未经身份验证的设置导入
  • 修复:当类为空时,请注意消息(谢谢Jory Hogevien)

1.3.0

  • 功能:将下拉列表更改为复选框以选择多个类
  • 功能:可以同时使用预定义类和文本输入类
  • 功能:在预定义类可用时迁移类
  • 改进:当小部件尚未更新时,不显示在设置页面中删除的先前定义的类
  • 修复:如果设置页面中的字段类型正确,则仅显示存储的类
  • 修复:选择预定义时,如果定义了以前的文本输入类,则显示它们
  • 修复:Ids索引通知
  • i18n:增加荷兰语翻译科拉韦布的乔里·霍格文
  • i18n:增加了俄语翻译
  • i18n:由添加瑞典语翻译奥尔勒·古斯塔夫森

1.2.9

  • 在设置页面上将h2更改为h1
  • 将设置页面上的加减图标更改为仪表图标

1.2.8

  • 在插件头中添加了文本域以准备自动语言翻译

1.2.7

  • 将类和ID字段更改为全宽
  • 添加了设置页中缺少的转义
  • 在正确的钩子上排队管理脚本
  • 修复了未找到选项时的未定义通知

1.2.6

  • 修复错误通知

1.2.5

  • 固定通知

1.2.4

1.2.3

1.2.2

  • 修复了使用Widget Logic时第103行上的通知
  • 通过WordPress 3.7 beta 1测试

1.2.1

1.2

  • 用自定义ID替换ID,而不是附加到现有ID
  • 添加了不显示编号的小部件类、第一个/最后一个类和偶数/奇数类的设置

1.1

  • 添加了对Widget Context插件的支持
  • 修复了启用Widget Logic插件但禁用过滤器时出现的通知
  • 为设置中的类字段类型添加了隐藏选项
  • 如果“显示ID的附加字段”设置为“否”,则不在前端显示任何以前添加的ID
  • 如果“类字段类型”设置为“隐藏”,则不在前端显示任何以前添加的类

1

  • 第一版