WordPress主题制作（七）：制作基础模板Index.php

回顾一下，我们前面已经完成了几乎所有的公共区域页面，他们包括顶部，底部，侧边栏，现在我们即将开始制作索引页index.php，我们暂且可以简单的将其理解为首单，但他却并非是简单的首页（点击这里查看为什么）

首先需要确定一点，我们的首页是用来显示那些我们更加需要引起用户注意的文章或者标题等内容，因为我们的文章不停的在发布新的内容，所以我们要推荐给用户的内容是动态的、变化的、自动的。

现在我们开始吧！！

首先，我们为一篇文章添加一个框架，不同的主题，框架也有所不同

代码语言：javascript复制

<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>

函数简介：

代码语言：javascript复制

<?php the_tags('标签：', ', ', ''); ?>

函数参考：the_tags

代码语言：javascript复制

<?php the_time('Y-m-d') ?>

可能你会对时间的格式有其他需求，下表列出了几个常用的方式，更多方式请参阅函数：the_time()

代码语言：javascript复制

<?php comments_popup_link('0 条评论', '1 条评论', '% 条评论', '', '评论已关闭'); ?>

该函数会根据文章的评论数量显示不同的文字链接，0 条评论、1 条评论等等，你可以根据自己的爱好定制文字内容。

如果文章作者已登录，我们可以允许他在首页点击对应文章的编辑按钮修改文章，这是一个可选的如果不需要可以跳过此处

代码语言：javascript复制

<?php edit_post_link('编辑', ' • ', ''); ?>

要显示摘要，需要在编辑文章是填写摘要，否则可能会输出全文

代码语言：javascript复制

<?php the_excerpt(); ?>

或者你可以直接输出全文

代码语言：javascript复制

<?php the_content(); ?>

代码语言：javascript复制

<a href="<?php the_permalink(); ?>" class="button right">阅读全文</a>

当完成上面的操作后，我们就可以在首页看到一篇文章了，但显然不是我们想要的效果，我们需要显示更多的内容给读者，所以我们需要显示更多的文章，而这件事并不需要我们手动执行，我们只需要进行文章的循环输出即可，

在文章标题前增加

代码语言：javascript复制

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

在阅读全文之后增加

代码语言：javascript复制

<?php endwhile; ?>

在get_sidebar()前面增加

代码语言：javascript复制

<?php else : ?>
	<h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
	<p>没有找到任何文章！</p>
<?php endif; ?>

到这里我们就完成了文章的循环输出，可能你还有些凌乱，那么看一下下面整理之后的页面结构吧

代码语言：javascript复制

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	文章骨架（包括标题、内容、时间等）
<?php endwhile; ?>
<?php else : ?>
	输出找不到文章提示
<?php endif; ?>

现在会不会比较清晰了呢，目前我们的首页只会显示一页（文章数量取决于你在后台设置每页可显示的文章数量。）

你已经看到，每页只能显示部分文章，要想看下一页，就需要添加分页。

代码语言：javascript复制

<p class="clearfix"><?php previous_posts_link('<< 查看新文章', 0); ?> <span class="float right"><?php next_posts_link('查看旧文章 >>', 0); ?></span></p>

现在我们的index.php就基本制作完成了，本篇内容看似不多，但需要用到不少内置函数，实际内容还是比较多，还望你能有些耐心，在不太清楚时多多查阅相关文档。

本文采用「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：Yiiven https://cloud.tencent.com/developer/article/2193207

0 人点赞