Wordpress主题制作之首页

前言 上节中已经通过Wordpress最基本的组成元素编写了一个mapull主题,现在需要将发布的博客内容展示出来。

这一节开始需要写PHP代码了,但是一定要有一个意识,浏览器是不认识PHP代码的,浏览器只能解析HTML,CSS,JS。
因此,在HTML文件中,所见到的就是浏览器里显示的,但是PHP中的代码需要服务器(Apache、nginx)解析后才会发给浏览器。

输出文章内容

Wordpress提供很多了方法来方便开发者调用,方法很多,每个方法还有多个参数,全部记住它们几乎不可能。
但是对于常用的,还是需要记住,其实大多数方法使用默认参数就能满足绝大部分需求。

对于一篇文章,最重要的几个部分:

  • 标题
  • 作者
  • 发布日期
  • 摘要/内容

在wordpress中,这些内容都被封装了一个个方法,我们可以方便地拿到这些信息。

标题


大多数时候,点击标题可以到详情,还需要文章的链接:

作者

作者姓名:

时间

发布时间:

PHP代码 输出内容
2019年5月1日
2019年05月01日
2019-05-01
19-05-01 02:09:08

内容

摘要信息:

如果在写文章的时候,写了摘要,就会显示摘要的内容,如果没有编写摘要,就会取文章的开头的一部分文字,然后加上 …
正文信息:

正文用于输出全文,当然如果你在编写文章的时候,用了分页标签,只会显示标签之前的内容。

把上面的内容组合一下,改造 index.php

<body>
<div>
    <p><strong>Logo文字</strong></p>
    <p>发现</p>
    <p>关注</p>
    <p>消息</p>
</div>
<div>
    <main>
            <h1><a href=""> the_title(); ?></a></h1>
            <h5> the_author(); ?> &nbsp;&nbsp;  the_time('Y年n月j日') ?></h5>
            <article>
				 the_excerpt(); ?>
            </article>
    </main>
</div>
</body>

先去发布几篇文章,然后访问一下主页 http://localhost

到目前为止,首页还只能显示一篇文章,要想输出所有文章,需要用到PHP的循环。

加上循环代码后的 index.php

<body>
<div>
    <p><strong>Logo文字</strong></p>
    <p>发现</p>
    <p>关注</p>
    <p>消息</p>
</div>
<div>
    <main>
		 while (have_posts()) : the_post(); ?>
            <h1><a href=""> the_title(); ?></a></h1>
            <h5> the_author(); ?> &nbsp;&nbsp;  the_time('Y年n月j日') ?></h5>
            <article>
				 the_excerpt(); ?>
            </article>
		  endwhile; ?>
    </main>
</div>
</body>

访问一下主页 http://localhost,看看是不是显示了更多的文章。

Wordpress主题制作之首页_第1张图片
实际上,在wordpress中输出文章的内容,有相对固定的写法:

  • 判断文章是否存在
  • 循环遍历所有文章
  • 输出文章标题
  • 显示文章内容/摘要

虽然现在的页面看起来还有点丑,不过可以通过一些css来美化一下。

在首页中添加一些元素
index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
    <link rel="stylesheet" href="" type="text/css" />
</head>
<body>
<div class="header-view">
    <a class="logo" href=""><strong>Logo文字</strong></a>
    <a class="menu" href="#">发现</a>
    <a class="menu" href="#">关注</a>
    <a class="menu" href="#">消息</a>
    <input type="text" class="search" placeholder="搜索">
</div>
<div class="content-area">
    <main id="main" class="site-main">
         while (have_posts()) : the_post(); ?>
            <h1 class="article-title"><a href=""> the_title(); ?></a></h1>
            <article class="article-content">
                 the_excerpt(); ?>
            </article>
            <h5> the_author(); ?> &nbsp;&nbsp;  the_time('Y年n月j日') ?></h5>
          endwhile; ?>
    </main>
</div>
</body>
</html>

然后在样式表文件中美化一下
style.css

a {
    text-decoration: none;
    color: #0f0f0f;
}
body {
    color: #333;
}
.content-area {
    width: 60%;
    padding-top: 30px;
    margin: auto;
}
.logo {
    padding: 0 80px;
    color: #FF4400;
}
.menu{
    padding: 0 20px;
}
.search {
    width:240px;
    height: 38px;
    font-size: 14px;
    border-radius: 40px;
    background: #eee;
    border: none;
    outline: none;
    padding-left: 20px;
}
.article-title {
    color: #969696;
    font-size: 18px;
    line-height: 1.5;
}
.article-content {
    font-size: 14px;
    line-height: 24px;
    color: #999;
}

Wordpress主题制作之首页_第2张图片
看起了和某网站相似多了。

Wordpress主题制作之首页_第3张图片

你可能感兴趣的:(Wordpress)