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

WordPress5.4版将对日历小工具代码结构进行调整。HTML5规范允许<tfoot>先于<tbody>标签。但在HTML5.1中进行了更改,

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主题下载,WordPress免费主题下载,网站源码模板下载

更改之后:

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

 


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6264.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注