WordPress 5.4版将对日历小工具代码结构进行调整

WordPress5.4版将对日历小工具代码结构进行调整。HTML5规范允许<tfoot>先于<tbody>标签。但在HTML5.1中进行了更改,现在<tfoot>必须置于<tbody>后面。之前,WordPress内置的“日历”小工具使用<tfoot>元素来显示日历的导航链接。但是由于HTML5.1规范已更改,因此WordPress5.4将导航链接移到<table>元素后面的<nav>HTML元素中。

将导航链接移动到<table>元素之外可提供更好的可访问性,并且元素之间的区别更加清晰。而一个<nav>元素是任何导航系统的语义正确的元素。

以下是日历小工具以前的HTML示例:

<div id=”calendar_wrap” class=”calendar_wrap”>
<table id=”wp-calendar”>
<caption>February 2020</caption>
<thead>
<tr>
<!– Day Names –>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=”3″ id=”prev”><a href=”https://example.com/2020/01/”>« Jan</a></td>
<td class=”pad”> </td>
<td colspan=”3″ id=”next” class=”pad”> </td>
</tr>
</tfoot>
<tbody>
<!– Calendar Grid –>
</tbody>
</table>
</div>

以下是日历小工具新的HTML示例:

<div id=”calendar_wrap” class=”calendar_wrap”>
<table id=”wp-calendar”>
<caption>February 2020</caption>
<thead>
<tr>
<!– Day Names –>
</tr>
</thead>
<tbody>
<!– Calendar Grid –>
</tbody>
</table>
<nav aria-label=”Previous and next months”>
<span id=”prev”><a href=”https://example.com/2020/01/”>« Jan</a></span>
<span class=”pad”> </span>
<span id=”next” class=”pad”> </span>
</nav>
</div>

如果你是网站所有者或者WordPress主题开发者,那你可能需要针对此次调整来修改CSS样式代码,以便适配新的代码结构。

例如,以下是当前的捆绑主题“2020”的视觉差异。

更改之前:

WordPress 5.4版将对日历小工具代码结构进行调整 (https://www.wp-admin.cn/) WordPress开发教程 第1张

更改之后:

WordPress 5.4版将对日历小工具代码结构进行调整 (https://www.wp-admin.cn/) WordPress开发教程 第2张

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-09-16 12:09:36
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[加我微信]
chaoneo
注:点击复制微信号并打开微信APP,添加好友后进行聊天。
[电话联系]
13585372227
[电子邮件]
chaoneo@163.com
取消

选择聊天工具: