主题性能：如何利用`add_theme_support(‘html5’)`优化HTML语义？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

主题性能：如何利用 `add_theme_support('html5')` 优化 HTML 语义

大家好，今天我们来深入探讨 WordPress 主题开发中一个非常重要的函数：add_theme_support('html5')。它看起来很简单，但却能显著提升主题的性能和语义化程度。我们将会详细讲解它的作用、使用方法、以及如何利用它来构建更优秀、更现代化的 WordPress 主题。

一、add_theme_support('html5') 的作用

add_theme_support('html5') 函数的作用是告诉 WordPress，你的主题支持 HTML5 的语法和结构。默认情况下，WordPress 为了兼容老旧的浏览器，会在一些地方使用 XHTML 的语法。使用 add_theme_support('html5') 可以让 WordPress 输出更简洁、更符合 HTML5 标准的代码，从而提升页面加载速度，改善 SEO，并提高主题的整体兼容性。

具体来说，add_theme_support('html5') 主要影响以下几个方面：

搜索表单 (search-form): 移除默认的 form 标签中的 type="text" 属性，允许使用 HTML5 的 placeholder 属性，并移除 XHTML 的自闭合标签斜杠。
评论列表 (comment-list): 使用 HTML5 语义化的 <article> 标签包裹每个评论，而不是旧式的 <div>。
评论表单 (comment-form): 移除不必要的 type="text" 属性，并允许使用 HTML5 的表单验证属性。
画廊 (gallery): 使用 HTML5 语义化的 <figure> 和 <figcaption> 标签来包裹图片和描述。
字幕 (caption): 同样使用 <figure> 和 <figcaption> 标签来包裹图片和描述。
导航菜单 (navigation-menus): 允许使用 HTML5 语义化的 <nav> 标签包裹导航菜单。

二、如何使用 add_theme_support('html5')

使用 add_theme_support('html5') 非常简单，只需要将以下代码添加到主题的 functions.php 文件中即可：

<?php
function my_theme_setup() {
    add_theme_support( 'html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'script',
        'style',
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

代码解释：

my_theme_setup(): 这是一个自定义函数，用于在主题初始化时执行一些操作。
add_theme_support( 'html5', array(...) ): 这是核心函数，告诉 WordPress 主题支持 HTML5。
- 第一个参数 'html5' 指定了要支持的特性。
- 第二个参数是一个数组，指定了要启用 HTML5 特性的模块。
add_action( 'after_setup_theme', 'my_theme_setup' ): 这个函数将 my_theme_setup() 函数挂载到 after_setup_theme 钩子上。这意味着 my_theme_setup() 函数将在主题初始化完成后执行。

参数详解：

add_theme_support('html5', array(...)) 中的数组参数允许你选择性地启用 HTML5 的特性。如果不提供数组，则默认启用所有支持的特性。以下是可用的选项：

特性	描述
`search-form`	移除搜索表单中不必要的属性，并允许使用 HTML5 的 `placeholder` 属性。
`comment-form`	移除评论表单中不必要的属性，并允许使用 HTML5 的表单验证属性。
`comment-list`	使用 HTML5 语义化的 `<article>` 标签包裹每个评论。
`gallery`	使用 HTML5 语义化的 `<figure>` 和 `<figcaption>` 标签来包裹画廊中的图片和描述。
`caption`	使用 HTML5 语义化的 `<figure>` 和 `<figcaption>` 标签来包裹图片和描述。
`script`	允许使用 `<script>` 标签的 `type="text/javascript"` 属性省略，因为 HTML5 默认将其视为 JavaScript。
`style`	允许使用 `<style>` 标签的 `type="text/css"` 属性省略，因为 HTML5 默认将其视为 CSS。

三、add_theme_support('html5') 带来的优化实例

接下来，我们通过一些具体的例子来说明 add_theme_support('html5') 如何优化 HTML 语义。

1. 搜索表单 (search-form)

未使用 add_theme_support('html5', array('search-form')):

<form role="search" method="get" id="searchform" class="searchform" action="http://example.com/">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

使用 add_theme_support('html5', array('search-form')):

<form role="search" method="get" class="search-form" action="http://example.com/">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" />
    </label>
    <button type="submit" class="search-submit">
        <span class="screen-reader-text">Search</span>
    </button>
</form>

优化说明：

移除了 input type="text" 中多余的 type 属性，因为 HTML5 默认是 text 类型。
使用了 HTML5 的 placeholder 属性，提升用户体验。
使用了更语义化的 <button> 标签代替 input type="submit"。

2. 评论列表 (comment-list)

未使用 add_theme_support('html5', array('comment-list')):

<li id="comment-1">
    <div id="div-comment-1" class="comment-body">
        <div class="comment-author vcard">
            <img alt="" src="http://example.com/avatar.jpg" class="avatar avatar-32 photo" height="32" width="32">
            <cite class="fn">John Doe</cite>
            <span class="says">says:</span>
        </div>
        <div class="comment-meta commentmetadata">
            <a href="http://example.com/post#comment-1">
                October 26, 2023 at 10:00 am
            </a>
        </div>
        <p>This is a comment.</p>
    </div>
</li>

使用 add_theme_support('html5', array('comment-list')):

<li id="comment-1" class="comment even thread-even depth-1">
    <article id="div-comment-1" class="comment-body">
        <footer class="comment-meta">
            <div class="comment-author vcard">
                <img alt="" src="http://example.com/avatar.jpg" class="avatar avatar-32 photo" height="32" width="32">
                <b class="fn">John Doe</b> <span class="says">says:</span>
            </div>

            <div class="comment-metadata">
                <a href="http://example.com/post#comment-1">
                    <time datetime="2023-10-26T10:00:00+00:00">
                        October 26, 2023 at 10:00 am
                    </time>
                </a>
            </div>
        </footer>

        <div class="comment-content">
            <p>This is a comment.</p>
        </div>

        <div class="reply">
            <a rel="nofollow" class="comment-reply-link" href="#">Reply</a>
        </div>
    </article>
</li>

优化说明：

使用 <article> 标签包裹整个评论内容，提高了语义化程度，更容易被搜索引擎理解。
使用了 <time> 标签，并添加了 datetime 属性，更方便搜索引擎识别评论的发布时间。
对评论结构进行了更合理的划分，使用了 <footer> 和 <div class="comment-content"> 等标签，使代码更易读、更易维护。

3. 评论表单 (comment-form)

未使用 add_theme_support('html5', array('comment-form')):

<form action="http://example.com/wp-comments-post.php" method="post" id="commentform">
    <p class="comment-form-author">
        <label for="author">Name <span class="required">*</span></label>
        <input id="author" name="author" type="text" value="" size="30" aria-required="true" />
    </p>
    <p class="comment-form-email">
        <label for="email">Email <span class="required">*</span></label>
        <input id="email" name="email" type="text" value="" size="30" aria-required="true" />
    </p>
    <p class="comment-form-url">
        <label for="url">Website</label>
        <input id="url" name="url" type="text" value="" size="30" />
    </p>
    <p class="comment-form-comment">
        <label for="comment">Comment</label>
        <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
    </p>
    <p class="form-submit">
        <input name="submit" type="submit" id="submit" value="Post Comment" />
        <input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
        <input type="hidden" name="comment_parent" id="comment_parent" value="0" />
    </p>
</form>

使用 add_theme_support('html5', array('comment-form')):

<form action="http://example.com/wp-comments-post.php" method="post" id="commentform" class="comment-form">
    <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p>
    <p class="comment-form-author">
        <label for="author">Name <span class="required">*</span></label>
        <input id="author" name="author" type="text" value="" size="30" maxlength="245" aria-required="true" required="required" />
    </p>
    <p class="comment-form-email">
        <label for="email">Email <span class="required">*</span></label>
        <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" aria-required="true" required="required" />
    </p>
    <p class="comment-form-url">
        <label for="url">Website</label>
        <input id="url" name="url" type="url" value="" size="30" maxlength="200" />
    </p>
    <p class="comment-form-comment">
        <label for="comment">Comment <span class="required">*</span></label>
        <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea>
    </p>
    <p class="form-submit">
        <input name="submit" type="submit" id="submit" class="submit" value="Post Comment" />
        <input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID" />
        <input type="hidden" name="comment_parent" id="comment_parent" value="0" />
    </p>
</form>

优化说明：

利用 HTML5 的 required 属性进行客户端验证，减少服务器压力，提升用户体验。
使用了 HTML5 的 type="email" 和 type="url" 属性，对输入内容进行格式验证。
移除了多余的 type="text" 属性。

4. 画廊和字幕 (gallery & caption)

未使用 add_theme_support('html5', array('gallery', 'caption')):

<div id='gallery-1' class='gallery galleryid-123 gallery-columns-3 gallery-size-thumbnail'>
    <dl class='gallery-item'>
        <dt class='gallery-icon'>
            <a href='http://example.com/image.jpg'>
                <img width="150" height="150" src="http://example.com/image-thumbnail.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-1-123" />
            </a>
        </dt>
        <dd class='wp-caption-text gallery-caption' id='gallery-1-123'>
            This is a caption.
        </dd>
    </dl>
</div>

使用 add_theme_support('html5', array('gallery', 'caption')):

<div id='gallery-1' class='gallery galleryid-123 gallery-columns-3 gallery-size-thumbnail'>
    <figure class='gallery-item'>
        <a href='http://example.com/image.jpg'>
            <img width="150" height="150" src="http://example.com/image-thumbnail.jpg" class="attachment-thumbnail size-thumbnail" alt="" aria-describedby="gallery-1-123" />
        </a>
        <figcaption class='wp-caption-text gallery-caption' id='gallery-1-123'>
            This is a caption.
        </figcaption>
    </figure>
</div>

优化说明：

使用 <figure> 标签包裹图片和描述，更符合 HTML5 的语义化规范。
使用 <figcaption> 标签作为图片的标题或描述，使代码结构更清晰。

四、add_theme_support('html5') 的局限性

虽然 add_theme_support('html5') 能够显著提升主题的语义化程度，但它并非万能的。它主要作用于 WordPress 核心生成的 HTML 代码，对于主题开发者自定义的 HTML 代码无效。因此，开发者需要在编写主题代码时，自觉地遵循 HTML5 的规范。

此外，即使使用了 add_theme_support('html5')，也可能需要针对不同的浏览器进行兼容性处理，特别是针对老旧的 IE 浏览器。可以使用 Polyfill 或 CSS Hack 等技术来解决兼容性问题。

五、更进一步：结合 HTML5 语义化标签构建主题

仅仅使用 add_theme_support('html5') 只是第一步，更重要的是在主题开发过程中，充分利用 HTML5 提供的语义化标签，构建更清晰、更易于理解的页面结构。

以下是一些常用的 HTML5 语义化标签：

<header>: 定义文档的页眉。
<nav>: 定义导航链接的部分。
<main>: 定义文档的主要内容。
<article>: 定义独立的文章内容。
<aside>: 定义与页面内容相关的侧边栏。
<footer>: 定义文档的页脚。
<section>: 定义文档中的一个区域。
<time>: 定义日期或时间。

示例：使用 HTML5 语义化标签构建页面结构

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <div id="page" class="site">
        <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'my-theme' ); ?></a>

        <header id="masthead" class="site-header" role="banner">
            <div class="site-branding">
                <?php
                if ( is_front_page() && is_home() ) : ?>
                    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                <?php else : ?>
                    <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                <?php
                endif;

                $description = get_bloginfo( 'description', 'display' );
                if ( $description || is_customize_preview() ) : ?>
                    <p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
                <?php
                endif; ?>
            </div><!-- .site-branding -->

            <nav id="site-navigation" class="main-navigation" role="navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'my-theme' ); ?></button>
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'primary',
                    'menu_id'        => 'primary-menu',
                ) );
                ?>
            </nav><!-- #site-navigation -->
        </header><!-- #masthead -->

        <div id="content" class="site-content">
            <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">

                    <?php
                    while ( have_posts() ) : the_post();

                        get_template_part( 'template-parts/content', get_post_format() );

                        the_post_navigation();

                        // If comments are open or we have at least one comment, load up the comment template.
                        if ( comments_open() || get_comments_number() ) :
                            comments_template();
                        endif;

                    endwhile; // End of the loop.
                    ?>

                </main><!-- #main -->
            </div><!-- #primary -->

            <?php get_sidebar(); ?>
        </div><!-- #content -->

        <footer id="colophon" class="site-footer" role="contentinfo">
            <div class="site-info">
                <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'my-theme' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'my-theme' ), 'WordPress' ); ?></a>
                <span class="sep"> | </span>
                <?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'my-theme' ), 'My Theme', '<a href="http://example.com/" rel="designer">My Name</a>' ); ?>
            </div><!-- .site-info -->
        </footer><!-- #colophon -->
    </div><!-- #page -->

    <?php wp_footer(); ?>
</body>
</html>

代码解释：

<header>: 包含了网站的标题、描述和导航菜单。
<nav>: 包含了主要的导航菜单。
<main>: 包含了页面的主要内容，例如文章内容。
<aside>: （通过 get_sidebar() 函数引入）包含了侧边栏内容，例如广告、分类目录等。
<footer>: 包含了网站的版权信息和友情链接等。

六、性能测试与优化

使用 add_theme_support('html5') 和 HTML5 语义化标签通常能够提升主题的性能，但为了确保最佳性能，建议进行性能测试。可以使用 Google PageSpeed Insights、GTmetrix 等工具来分析网站的性能瓶颈，并进行相应的优化。常见的优化措施包括：

压缩 HTML、CSS 和 JavaScript 文件。
使用浏览器缓存。
优化图片。
减少 HTTP 请求。
使用 CDN。

结论：拥抱 HTML5，构建更优秀的 WordPress 主题

add_theme_support('html5') 是一个非常有用的函数，它可以帮助我们构建更现代、更语义化的 WordPress 主题。通过合理地使用 add_theme_support('html5') 和 HTML5 语义化标签，我们可以提升主题的性能、改善 SEO，并提高主题的整体兼容性。记住，语义化不仅仅是添加几个标签，更是一种思考方式，它贯穿于整个主题开发过程。

简而言之，使用 add_theme_support('html5') 可以让 WordPress 输出更符合 HTML5 标准的代码，提高页面加载速度和 SEO 效果，并与HTML5语义化标签结合使用，构建出结构清晰、易于维护的现代主题。

主题性能：如何利用 add_theme_support('html5') 优化 HTML 语义

发表回复 取消回复

主题性能：如何利用 `add_theme_support('html5')` 优化 HTML 语义

发表回复取消回复