wordpress 主题一步步制作教程!第六课 主循环(图解)

调用你博客日志的主循环(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

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/05/wp-theme-lesson-5-the-loop/

About sosel

发表评论

电子邮件地址不会被公开。 必填项已用*标注