从Html过渡到WordPress问题并不常见

时间:2021-07-14 作者:The WP Intermediate

大多数情况下,这是一种可能性:

<div class="wrap">
    <header></header>
    <main></main>
    <footer></footer>
</div>
但我的设计是这样的,wrap有一个flex,边栏和main是水平放置的。→

<div class="wrap">
    <section class="sidebar">
        <header></header>
        <footer></footer>
    </section>
    <main></main>
</div>
在这里headerfooter 在侧边栏中一个接一个,主要内容在另一个容器中。我应该如何转移这个HTML 进入WordPress?我面临着精神障碍。

使现代化→

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="wrap">
    <section class="seidebar">
        <header></header>
        <footer></footer>
    </section>
    <main></main>
</div>  
</body>
</html>
我已将上述HTML转换为以下格式:

标题。php→

<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo( \'charset\' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <div class="wrap">
    <section class="seidebar">
        <header></header>
        <footer></footer>
    </section>
页脚。php→

  <?php wp_footer(); ?>
    </div>  
</body>
</html>
索引。php→

<main></main>
我希望通过这样做,我在实现基本模板方面步履蹒跚。如果答案是肯定的,那么我对我的问题有了答案。

1 个回复
SO网友:Buttered_Toast

最后,每个html标记,而不是自动关闭标记,都可以根据需要使用。

只想使用<span>, 去争取吧

使用symantic html。

A.<section> 可以包含<header><footer>, symantical这是正确的。

您可以有多个<header><footer> 标签,它们应该位于正确的父标签中。

像这样的

<body>
    <header>
        <nav></nav>
    </header>

    <h1></h1>

    <main>
        <section>
            <header>
                <h1></h1>
            </header>
            <div></div>
            <footer></footer>
        </section>
    </main>

    <footer></footer>
</body>
这是一个有效的html结构,符合HTML5的规则。

什么倍数<h1> 标记。。。是的,在html5时代,您可以使用多个<h1> 标记,因为symantic标记,if会影响屏幕阅读器,所以需要添加适当的属性来索引嵌套<h1> 标记,请参见–: The HTML Section Heading elements

了解symantic elemets应该如何构造,哪些元素可以是哪些元素的子元素的最佳位置是HTML elements reference , 当然还有其他关于HTML5的好资源,所以请继续搜索。

关于html5结构,这是一个有效的结构,不会出现任何问题。您还可以使用W3C Markup Validation Service, 在开发网站时,我一直使用它来确保我的html是正确的,没有问题。