插件：Tabby Responsive Tabs

【链接】https://wordpress.org/plugins/tabby-responsive-tabs/

【作者：cubecolour】https://cubecolour.co.uk/tabby-responsive-tabs

描述

• 添加一组水平选项卡，这些选项卡在狭窄的视口上变为手风琴
• Tabs和手风琴是使用jQuery创建的
• 在同一页面上支持多组标签
• 使用语义头和内容标记
• Aria属性和角色有助于屏幕阅读器的可访问性
• 标签和内容可通过键盘访问

Tabby响应式标签插件被设计为一种轻松轻巧的方式，可以向您的内容添加响应式标签。没有管理面板，有经验的开发人员应该可以通过使用自定义版本替换内置CSS规则来轻松自定义选项卡在网站上的显示方式（有关更多详细信息，请参见下面的注释）。

可选加载项（ADD-ONS）

“ Tabby Responsive Tabs Customiser ”加载项会添加一个设置面板，其中包含用于自定义标签的多个参数。提供最简单的方法来自定义选项卡的显示而无需编辑任何代码。您可以使用默认的虎斑样式或随附的一键式预设之一作为自定义的起点。它还使您可以轻松地将图标添加到选项卡标题。

“Tabby Link to Tab”加载项提供了一个简单的短代码，以创建指向特定选项卡的链接，这些链接可以与选项卡组显示在同一页面的任何位置，而无需重新加载页面。

“ Tabby Tab to URL Link”加载项使您可以将一个或多个选项卡设置为指向任何URL的链接。

“Tabby Load Accordion Closed”加载项改变默认的行为时，标签显示为手风琴所以没有手风琴节是开放的最初时加载页面。

用法：

使用短代码：【 tabby】和【tabbyending】

【tabby title="tabname 1"】
内容1
【tabby title="tabname 2"】
内容2
【tabby title="tabname 3"】
内容3
【tabbyending】

注意：为防止WordPress的wpautop过滤器引入杂散段落标签，请确保在每个tabby短代码和tabbyending上方和下方留空行。

如果要更改标签和手风琴在网站上的显示方式，则有两个选择：

1. 使用“ Tabby响应式标签定制器”插件，该插件提供了一种非常简单的方法来自定义选项卡的显示，而无需编辑任何代码。
2. 将插件样式表的内容复制到您的子主题或自定义样式插件中，然后根据需要对副本进行更改。如果这样做，您还需要通过将以下行添加到子主题的functions.php或自定义功能插件中来阻止内置样式的加载：

码：

<?php remove_action('wp_print_styles', 'cc_tabby_css', 30); ?>

其他简码属性

打开

默认情况下，第一个（最左侧）标签面板将在“标签视图”和“手风琴视图”中打开。

如果要在页面首次加载时默认打开第一个选项卡以外的特定选项卡，则可以在该选项卡的短代码中添加参数和值open =“ yes”：

【tabby title="My Tab" open="yes"】

注意确保一个是打开状态，因为不支持在一个标签组中打开多个标签。

图标

可以使用‘icon’属性添加在标签标题旁边显示图标所需的标记。“ Tabby响应式”选项卡不会添加图标文件，您还需要使用主题或插件（例如“ Tabby响应式标签”定制程序附加组件）来添加图标文件：

【tabby title="My Tab" icon="cog"】

“Tabby Responsive Tabs Customiser ”插件可用于添加在标签标题中显示图标所需的Font Awesome文件。

链接到页面时控制打开哪个选项卡

您可以使用“目标” URL参数来设置页面初始加载时将打开哪个选项卡。该参数的值基于在tabby短代码中指定的选项卡标题，但其格式设置为标点符号和特殊字符已删除，重音符号已删除以及用短划线代替空格。

如果要链接到“联系人”页面，同时打开名为“电话号码”的选项卡，则用于链接到此页面的URL如下所示：

您可以使用“目标” URL参数来设置页面初始加载时将打开哪个选项卡。该参数的值基于在tabby短代码中指定的选项卡标题，但其格式设置为标点符号和特殊字符已删除，重音符号已删除以及用短划线代替空格。

如果要链接到“联系人”页面，同时打开名为“电话号码”的选项卡，则用于链接到此页面的URL如下所示：

yoursite.com/contact/?target=phone-numbers

如果要打开标题为“电子邮件地址”的选项卡，则URL如下所示：

yoursite.com/contact/?target=email-addresses

如果要打开标题为“entrées”的选项卡（第二个e带有重音符号），则该网址应类似于：

yoursite.com/contact/?target=entrees

显示

1、正常

2、小屏幕

3、打印模式

---

以下是举例：

---