WordPress主题开发教程：开发WordPress主题首页，先做一个静态列表

描述

主题首页文件是 index.php 所以本小节的代码都是在这个文件中完成的。

一个网站的首页一般都是一堆文章列表，所以本小节中我们需要先做一个静态的列表出来，这里我在semantic 中找了一个列表UI：

代码如下：

<div class="ui items">
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Header</a>
      <div class="meta">
        <span>Description</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        Additional Details
      </div>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="/images/wireframe/image.png">
    </div>
    <div class="content">
      <a class="header">Header</a>
      <div class="meta">
        <span>Description</span>
      </div>
      <div class="description">
        <p></p>
      </div>
      <div class="extra">
        Additional Details
      </div>
    </div>
  </div>
</div>

在将这段代码放入我们主题之前，我们需要先规划一下自己主题的首页结构，方便开发，这个可根据你自己的代码习惯来，我的是这个样子的：

<?php get_header(); ?>
<div class="sliverindex_page">
    <div class="ui container">
        <div class="post_item">

        </div>
    </div>
</div>
<?php get_footer(); ?>

之后我再把代码放进去：

好了，现在访问网站就可以看到一个静态的首页了(样式不还看，建议大家美化一下)。