前言 上節中已經通過Wordpress最基本的組成元素編寫了一個mapull主題，現在需要將發佈的博客內容展示出來。
這一節開始需要寫PHP代碼了，但是一定要有一個意識，瀏覽器是不認識PHP代碼的，瀏覽器只能解析HTML，CSS，JS。
因此，在HTML文件中，所見到的就是瀏覽器裏顯示的，但是PHP中的代碼需要服務器(Apache、nginx)解析後纔會發給瀏覽器。
輸出文章內容
Wordpress提供很多了方法來方便開發者調用，方法很多，每個方法還有多個參數，全部記住它們幾乎不可能。
但是對於常用的，還是需要記住，其實大多數方法使用默認參數就能滿足絕大部分需求。
對於一篇文章，最重要的幾個部分：
- 標題
- 作者
- 發佈日期
- 摘要/內容
在wordpress中，這些內容都被封裝了一個個方法，我們可以方便地拿到這些信息。
標題
<?php the_title(); ?>
大多數時候，點擊標題可以到詳情，還需要文章的鏈接：<?php the_permalink(); ?>
作者
作者姓名：<?php the_author(); ?>
時間
發佈時間：<?php the_time('Y年n月j日') ?>
| PHP代碼 | 輸出內容 |
|---|---|
| <?php the_time('Y年n月j日') ?> | 2019年5月1日 |
| <?php the_time('Y年m月d日') ?> | 2019年05月01日 |
| <?php the_time('Y-m-d') ?> | 2019-05-01 |
| <?php the_time('y-m-d H:i:s') ?> | 19-05-01 02:09:08 |
內容
摘要信息：
<?php the_excerpt(); ?>
如果在寫文章的時候，寫了摘要，就會顯示摘要的內容，如果沒有編寫摘要，就會取文章的開頭的一部分文字，然後加上 …
正文信息：
<?php the_content(); ?>
正文用於輸出全文，當然如果你在編寫文章的時候，用了分頁標籤<!-- more -->，只會顯示標籤之前的內容。
把上面的內容組合一下，改造 index.php
<body>
<div>
<p><strong>Logo文字</strong></p>
<p>發現</p>
<p>關注</p>
<p>消息</p>
</div>
<div>
<main>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<h5><?php the_author(); ?> <?php the_time('Y年n月j日') ?></h5>
<article>
<?php 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>
<?php while (have_posts()) : the_post(); ?>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<h5><?php the_author(); ?> <?php the_time('Y年n月j日') ?></h5>
<article>
<?php the_excerpt(); ?>
</article>
<?php endwhile; ?>
</main>
</div>
</body>
訪問一下主頁 http://localhost，看看是不是顯示了更多的文章。
實際上，在wordpress中輸出文章的內容，有相對固定的寫法：
- 判斷文章是否存在
- 循環遍歷所有文章
- 輸出文章標題
- 顯示文章內容/摘要
雖然現在的頁面看起來還有點醜，不過可以通過一些css來美化一下。
在首頁中添加一些元素
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板文件</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
<body>
<div class="header-view">
<a class="logo" href="<?php home_url() ?>"><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">
<?php while (have_posts()) : the_post(); ?>
<h1 class="article-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<article class="article-content">
<?php the_excerpt(); ?>
</article>
<h5><?php the_author(); ?> <?php the_time('Y年n月j日') ?></h5>
<?php 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;
}
看起了和某網站相似多了。
