WordPress主题制作进阶#2使用HTML和CSS构建设计布

2018-09-29 本文已影响19人埼玉是个逗B

在我们进入WordPress之前，我们将首先绘制出来并使用静态HTML和CSS创建设计布局。

我们在WordPress存放主题的文件夹内创建一个新的文件夹，命名为 advanced-wptheme，然后使用VScode编辑器在空文件夹内创建index.html和style.css两个文件。

1、创建HTML主体并添加搜索框

打开index.html文件，输入以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>高级WP主题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>
                <a href="index.html">高级 Wordpress 主题</a>
                <small>本站用于构建一个高级WP主题</small>
            </h1>
            <div class="h_right">
                <form>
                    <input type="text" placeholder="Search...">
                </form>
            </div>
        </div>
    </header>     
</body>
</html>

当我们实际创建WordPress主题时，h1标签里的标题将是动态的，您将能够在管理区域内更改它，但是现在我们只在这里粘贴一些静态文本。在h1标签下方添加了一个搜索框。

2、添加导航栏

在header结束标签下方添加以下代码：

<nav class="nav main-nav">
        <div class="container">
            <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Services</a></li>
            </ul>
        </div>
</nav>

3、添加博客文章

在nav结束标签下方添加以下代码：

<div class="container content">
        <div class="main block">
            <article class="post">
                <h2>Blog Post 1</h2> 
                <p class="meta">Posted at 11:00 on May 9 by admin</p>
            </article>
            <a class="button" href="#">Read More</a>
        </div>
</div>

现在我们需要快速添加一些内容。我们将访问www.lipsum.com并点击Generate Lorem Ipsum

快捷文本

我们复制一些内容，然后我们在meta元数据下方添加一些p标签，把刚刚复制的东西粘贴进去。

4、添加footer部分

在body结束标签上方添加以下代码：

<footer class="main-footer">
        <div class="container">
            <div class="f_left">
                <p>&copy; 2018 - Advanced WP Theme</p>
            </div>
            <div class="f_right">
                <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="#">Services</a></li>
                </ul>
            </div>
        </div>
</footer>

保存代码，在浏览器中打开文件如下图：

HTML骨架

看起来很丑，因为我们没有添加css样式

5、添加一些基础样式

打开style.css添加以下代码：

body{
    font-family: Arial;
    color: #333;
    margin:0;
    padding:0;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
a{
    color:#009acd;
    text-decoration:none;
}
a:hover{
    color:#333;
}
.container{
    width:960px;
    margin:auto;
    overflow:auto;
}

6、然后添加header和nav导航部分样式

header{
    background: #f4f4f4;
    padding:10px;
    border-bottom: 3px solid #009acd;
}
header h1{
    margin:0;
    padding:0;
    color:#009acd;
    float:left;
}
header h1 a{
    color:#009acd;
    text-decoration:none;
}
header small{
    color:#666;
    margin-left:1px;
    font-size: 13px;
}
header .h_right{
    float:right;
}
header .h_right input[type="text"]{
    width:250px;
    padding:5px;
    margin-top:5px;
}

保存代码去浏览器刷新看看：

header部分

然后为导航添加样式：

nav.nav li {
    float: left;
    padding-right: 15px;
}

nav.nav a {
    text-decoration: none;
}

nav.main-nav {
    height: 45px;
    overflow: hidden;
    background: #333;
    color: #fff;
    padding-top: 7px;
}

nav.main-nav li {
    height: 40px;
    line-height: 40px;
}

nav.main-nav a {
    color: #fff;
    text-decoration: none;
    padding: 8px;
}

nav.main-nav a:hover {
    color: #009acd;
}

保存代码刷新浏览器：

导航部分

7、为博客文章部分添加样式

添加样式之前，我们先创建一个侧边栏，因为我们前面没写这部分代码。所以我们打开index.html文件并在content的div标签下面添加以下代码：

<div class="side">
            <div class="block">
                <h3>侧边栏</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.    Nam vel diam hendrerit erat fermentum aliquet sed eget arcu.</p>
                <a class="button">More</a>
           </div>
</div>

然后继续添加样式代码：

.content {
    margin-top: 30px;
    line-height: 1.5em;
}

.main {
    float: left;
    width: 65%;
}

.side {
    width: 30%;
    float: right;
}

.block {
    border: #ccc 1px solid;
    padding: 5px 15px 25px 15px;
    background: #fcfcfc;
    overflow: hidden;
}

.block h3 {
    border-bottom: #ccc solid 1px;
    padding-bottom: 10px;
}

到浏览器看看样子：

博客文章主体

接下来为article部分添加样式：

article.post {
    border-bottom: #ccc solid 1px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

article.post .meta {
    background: #009acd;
    color: #fff;
    padding: 7px;
}

.button {
    background: #009acd;
    color: #fff;
    padding: 10px 15px;
    display: inline-block;
}

保存代码刷新浏览器看看：

文章内容样式

8、给footer添加样式

继续添加样式：

footer.main-footer {
    margin-top: 40px;
    text-align: center;
    background: #333;
    color: #fff;
    height: 60px;
    padding-top: 10px;
    overflow: auto;
}

footer.main-footer .f_left {
    float: left;
}

footer.main-footer .f_right {
    float: right;
    margin-top: 15px;
}

footer.main-footer li {
    float: left;
    padding-right: 10px;
    list-style: none;
}

footer.main-footer .f_right {
    float: right;
    margin-top: 15px;
}

保存代码再到浏览器刷新看看：

整体样式完工

这个简单的设计看起来很不错，它的主要目的是让你熟悉创建WordPress主题的语法，而不是创建一个华丽的设计。现在我们已经完成了HTML和CSS，下一节我们可以继续创建我们的WordPress主题。