WordPress开发

WordPress主题开发教程:开发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(); ?>

之后我再把代码放进去:

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

技术援助

需要技术援助?点击这里,帮你解决你的所有问题!PS:可能你离大神之间,只差一个我们!!!!

评论已经被关闭。

插入图片