首页 » WordPress 主题 » WP Theme 教程 #5：主循环

WP Theme 教程 #5：主循环

June 5th, 2007 Denis

调用你博客日志的主循环（The Loop）是 WordPress 中最重要的 PHP 代码集。这也是关于创建 WordPress 主题系列教程的第五篇。在继续学习之前，我们先复习下到目前为止学到了什么？

到目前为止，你已经学到：:

现在让我们开始第五篇：

现在已经打开了 Xampp，“tutorial”主题文件夹，浏览器中打开 http://localhost/wordpress 以及在文本编辑器中打开 index.php 文件。

下面应该是在你这时候 index.php 文件中的内容：

indexphp.gif

记住，为了学习这些代码，请手工输入所有的东西，而不是拷贝和粘贴。

第1步

在 header DIV 标签下添加一个 DIV 标签，并给它的 ID 赋值为“container”，如下：

<div id=”container”>

</div>

这个 DIV 标签是用来干什么的呢？它是用于把你的内容和它下面的所有东东都区分开，比如 sidebar 和 footer 这些东东。

第2步

在 Container 的 DIV 标签中添加如下代码：试着完全手工输入这些代码，如果遇到错误，重新再输入一遍。

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

<?php endwhile; ?>

<?php endif; ?>

手工输入代码可以让你更容易知道每个代码集是干什么的。你刚才输入的是 WordPress 中的主循环（The Loop）。在我解释这些代码作用之前，你的 index.php 应该是这样了：

the-loop.gif

注意我缩进了 Container DIV 中的每一行。这是为了更好的组织代码。仅仅输入代码是不够的，我们需要组织它们。对于缩进，使用 tab 健而不是空格键。

刚才发生了什么？

  • if(have_posts()) – 检查你的博客是否有日志。
  • while(have_posts()) – 如果你有，当你有日志的时候，执行 the_post() 这个函数。
  • the_post() – 调用具体日志来显示。
  • endwhile; – 遵照规则 #1，这里用于关闭 while()
  • endif; – 关闭 if()
  • 注释：并不是所有的代码都需要两部分，为了打开和关闭自己。有些能够自我关闭，这就解释了 have_posts() 和 the_post(); 这两个函数。因为 the_post(); 在 if() 和 while() 的外面，它需要分号去结束或者关闭自己。

第3步

在前面的课程中，你学习了使用 bloginfo(’name’) 去调用你的博客的标题。现在你将学习在主循环（The Loop）中如何调用日志标题。

在 the_post(); ?> 的后面和 <?php endwhile; ?> 的前面输入 <?php the_title(); ?>

the-title.gif

保存 index.php 文件，刷新你的浏览器，你应该看到在你博客描述的下方出现 Hello World ，默认情况下，你的博客只有一篇日志。而我的测试的博客有多篇日志，所以我有多个日志标题。而且因为我所用的日志标题是一样的，并我没有进行组织整理他们，所以它们看起来像很长的一行 Hello World.

hello-world.gif

第4步

把日志标题转变成日志标题链接。还记得你怎样吧你博客的标题转变成一个链接呢？是在<?php the_title(); ?> 两边增加 <a href=”#”> 和 </a>。

保存并刷新你的浏览器。现在你的标题变成了链接了，但是它们并没有指向哪里。为了使得每个标题都能指向正确的日志，你需要把 # 替换为 the_permalink()。

<a href=”<?php the_permalink(); ?>“><?php the_title(); ?></a>

the_permalink() 是用来调用每篇日志地址的 PHP 函数。保存并刷新你的浏览器。如果你只有一个 Hello World 标题，把鼠标移到链接上面，观察你的浏览器底部的状态栏，他不再是 http://localhost/wordpress/#。

如果你有不止一个的标题链接，你将看到每个链接会链到不同的日志或者网页。但是我们的日志标题依然在同一行上面。为了分开它们，在你的链接代码两边添加 <h2> 和 </h2> 标签。

<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>

记住 H1 用作你的博客的标题，那是你网页的标题。H2 被用作子标题。现在你的日志标题链接是子标题了，每一个都是一行。保存 index.php 文件并刷新你的浏览器，观察更改的结果。

post-title-heading.gif

这一篇到此为止。你的 index.php 文件现在应该是：:
end-lesson-5.gif

注释：如果你还没有创建一些测试的日志来测试你的主题，那么请到管理界面，点击 Write 按钮，并确认你是在 Write Post 页面下，写一篇日志并重复几次。你可以像我一样给它们唯一的标题 Hello World。

下一篇：WP Theme 教程 #5b：日志内容

请查看教程目录：WordPress 主题教程系列

翻译自：WP Theme Lesson #5: The Loop

创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。

作者：Denis
原文链接：WP Theme 教程 #5：主循环

标签：

分享到 Twitter 分享到 Twitter Delicious 收藏到 Delicious 分享到 Google Reader 分享到 Google Reader 分享到 FriendFeed 分享到 FriendFeed

相关日志 本月排行 所有排行 最新日志

22 条评论 添加你的评论

发表评论

你必须 登陆 之后才能留言。你可以使用以下方式快速登陆我爱水煮鱼：

你也可选择直接在本站 注册。


WP Theme 教程 #4b：Header 模板 2 WP Theme 教程 #5b：日志内容

赞助商

(mt) Media Temple 长期承接 WordPress 项目 WordPress主机合租 用网页模板，当然要选TemplateMonster China 免費資源網路社群 freegroup.org http://p6p9.com/ 在我爱水煮鱼投放广告位

本站推荐

快速导航