动手打造你自己的Wordpress Template and Themes(主题, 模板) Part3 – 索引篇  (Index)

原文出处：cypherhackz.net

翻译：by Sulow @ ONEDUST – 浮塵草堂

Part 1 – 布局 (The Layout)
Part 2 – 标头 (Heaer)
Part 3 – 索引 (Index)
Part 4 – 评论 (Comment)
Part 5 – 侧边栏 (Sidebar)
Part 6 – 底部 (Footer)
Part 7 – 结束语 (Finish!)

我们即将开始困难的部分了，Index.php文件是整个Theme的核心。
希望你的index.php看起来像这样（请看Part 1）

1.
2.      <div id="main">
3.       main
4.       </div> <!– close main –>
5.

召唤 (Call) 模板(Template)文件

我们首先要召唤header.php, sidebar.php 和 footer.php 到index.php文件，要完成这一步，我们需要这些语句(functions)

<?php get_header(); ?> –  这个将召唤 header.php  文件
<?php get_sidebar(); ?> – 这个将召唤 sidebar.php 文件
<?php get_footer(); ?> –  这个将召唤 footer.php  文件

把<?php get_header(); ?>这句放在main id之上，把<?php get_sidebar(); ?> 和 <?php get_footer(); ?>放在 main id 之下，像这样。

1.
2.      <?php get_header(); ?>
3.
4.      <div id="main">
5.       main
6.      </div> <!– close main –>
7.
8.      <?php get_sidebar(); ?>
9.      <?php get_footer(); ?>
10.

关于 Loop （回圈）

弄好了，下一步是啥？我们现在要让wordpress跑几个Loop，没错，这个Loop是用来让你的博文显示在网页上的。

Loop的开始是这样的：

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

而结束时像这样，我等等会解释为什么我们需要 "else:"。

<?php endwhile; else: ?>

在 <?php endwhile; ?> 之后，请确认你用 <?php endif; ?> 来结束 if。

把这些php语句放入index.php，像这样：

1.
2.      <div id="main">
3.
4.      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
5.
6.      main
7.
8.      <?php endwhile; else: ?>
9.      <?php endif; ?>
10.
11.      </div> <!– close main –>
12.

我们现在重点关注一下Loop部分，在这个Loop中，我们用了3个div标签，这是用来放博文标题、内容及发表时间等等资讯的。
记住，我们只重点看Loop部分，并把div标签放进Loop中。

<div class=”post_title”>
post title here （标题）
</div> <!– close post title –>
<div class=”post_content”>
post content here （内文）
</div> <!– close post content –>
<div class=”post_tag”>
post tag here （标签 tag）
</div> <!– close post tag –>

我们的Loop应该看起来像这样：

1.
2.      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
3.
4.      <div>
5.      post title here （标题）
6.      </div> <!– close post title –>
7.      <div>
8.      post content here （内文）
9.      </div> <!– close post content –>
10.      <div>
11.      post tag here （标签 tag）
12.      </div> <!– close post tag –>
13.
14.      <?php endwhile; else: ?>
15.      <?php endif; ?>
16.

博文标题
在博文标题的部分，我们用这些语句：

<?php the_ID(); ?> – 找出博文id，并存入post_title 的 div 里
<?php the_permalink() ?> – 找出博文路径
<?php the_title(); ?> – 博文的标题

在post_title 的 class 中，我们建立一个链接(link)到我们的文章，这是一个HTML+PHP的语句。

<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a>

其中，post_title 包含了文章id，应该看起来像这样：

1.
2.      <div id="<?php the_ID(); ?>">
3.
4.      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
5.
6.      </div> <!– close post title –>
7.

博文内容（文章）
在博文中，我们只需要一个标签来找出我们的文章，看起来像这样：

<?php the_content(__(’Read more…’)); ?>

注意：你可以把"Read more…"换成你想使用的文字。（Sulow注：如“阅读全文”）

1.
2.      <div>
3.
4.      <?php the_content(__(‘Read more…’)); ?>
5.
6.      </div> <!– close post content –>
7.

博文标签 (Tag)
我通常在博文标签中放入日期、时间、目录、和评论的链接。还有，我通常会放一个“编辑”链接（只在你登入后显示）

<?php the_time(’F dS, Y’) ?> – 日期
<?php the_time(’h:i a’); ?> – 时间
<?php the_category(’, ‘) ?> – 目录
<?php comments_popup_link(’No Comments’, ‘1 Comment’, ‘% Comments’); ?> – 评论
（Sulow注，这里可以替换为“没有评论”，“1 条评论”，“% 条评论”， 可以按你的意思随便改）
<?php edit_post_link(’Edit’,”,”); ?> – 编辑

我们把这些语句放到post_tag div 中：

1.
2.      <div>
3.
4.      <?php the_time(‘F dS, Y’) ?> | <?php the_time(‘h:i a’); ?> | <?php the_category(‘, ‘) ?> | <?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?> | <?php edit_post_link(‘Edit’,”,”); ?>
5.
6.      </div> <!– close post tag –>
7.

完成了！呃。。。。

评论
当我们完成了文章部分，我们需要召唤评论（这部分会在Part 4 评论里讨论）：

<?php comments_template(); ?>

并确定放在 endwhile 前面：

1.
2.      <?php comments_template(); ?>
3.      <?php endwhile; else: ?>
4.

404 错误
也许有些人在想，为什么要把"else:"放在endwhile后面。这是为了要让系统显示“不存在的页面”

请在else后面输入以下文字，我一般写：
Sorry, but you are looking for something that isn’t here.
（抱歉，找不到您所输入的页面。。。随便翻的，别介意，你可以按自己的意思来写）

看起来会像这样

1.
2.      <?php endwhile; else: ?>
3.
4.      Sorry, but you are looking for something that isn‘t here.
5.
6.      <?php endif; ?>
7.
8.

最后，你的index.php应该像这样：

1.
2.      <?php get_header(); ?>
3.      <div id="main">
4.
5.      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
6.
7.      <div id="<?php the_ID(); ?>">
8.
9.      <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
10.
11.      </div> <!– close post title –>
12.
13.      <div>
14.
15.      <?php the_content(__(‘Read more…’)); ?>
16.
17.      </div> <!– close post content –>
18.
19.      <div>
20.
21.      <?php the_time(‘F dS, Y’) ?> | <?php the_time(‘h:i a’); ?> | <?php the_category(‘, ‘) ?> | <?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?> | <?php edit_post_link(‘Edit’,”,”); ?>
22.
23.      </div> <!– close post tag –>
24.
25.      <?php comments_template(); ?>
26.      <?php endwhile; else: ?>
27.
28.      Sorry, but you are looking for something that isn‘t here.
29.
30.      <?php endif; ?>
31.
32.      </div> <!– close main –>
33.      <?php get_sidebar(); ?>
34.      <?php get_footer(); ?>
35.
36.

原创文章如转载，请注明：转载自ONEDUST-浮塵草堂 [ http://www.onedust.com/ ]

本文联结：http://www.onedust.com/archives/494

下一章，Part 4 – 评论 (Comment)

---

延伸阅读：

1. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 4 – 评论篇
2. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 1 – 布局篇
3. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 6 – 底部篇
4. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 5 – 侧边栏篇
5. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 2 – 标头篇
6. 动手打造你自己的WordPress Template and Themes (主题, 模板) Part 7 – 结语篇
7. 动手打造你自己的WordPress主题, 模板 (Template、Themes)系列
8. 在Blogger中添加阅读全文选项
9. Joomla and Drupal – 哪个更适合你?

---