wordpress 主题一步步制作教程!第14课 搜索框和日历(图解)

尽管这篇的题目是 搜索框(Search Form)日历(Calendar),我同样也会介绍 元数据(Meta) 。让我们在这一篇结束常规的侧边栏,然后将在下一篇指出如何窗体化(widgetize)化侧边栏,怎么样?好吧,让我们开始…

 

第1步:增加搜索框

在我给你需要输入的代码之前,打开记事本,然后保存该空白文件为 searchform.php(当然是和 index.php 在同一个文件夹下)。把 searchform.txt 中的内容拷贝到 searchform.php。就是这么多,从现在开始,让 searchform.php 文件保持单独。

在 index.php 文件,在侧边栏的最顶部输入以下代码:

<li id=”search”>
<?php include(TEMPLATEPATH . ‘/searchform.php’); ?>
</li>

add-search.gif

保存,然后刷新浏览器,结果如下:

search.gif

刚才发什么了呢?

  • <li id=”search”> – 开始一个名字为 search 的列表元素,你给它了一个 ID,你就能够以后样式化它。
  • include() – 导入任何你想导入的文件。这和使用 WordPress 模板函数去调用东东是不同的,因为 include() 只是简单导入已经存在的文件。这里是调用在 searhform.php 文件中的代码。被导入的信息应该在一个博客上基本不会被改变的。也就是说,我的搜索框应该看起来很像你的。
  • TEMPLATEPATH – 主题文件夹的位置,wp-content/themes/tutorial
  • ‘/searchform.php’ – 位置和文件的名字,/searchform.php
  • 在 TEMPLATEPATH 和 “/searchform.php” 中间的把他们连接起来,所以最终得到:
    wp-content/themes/tutorial/searchform.php
  • </li> – 结束列表元素

注意,搜索框不像分类,归档,页面或者 Blogroll 一样有子标题。如果你愿意你也可以给它一个子标题,但是基于保持你的常规侧边栏和 widgetized 版本(我们将在下一篇讲述)的侧边栏尽可能接近的考虑,不要给它子标题。

第2步:增加日历

在搜索框或者页面链接列表下面输入以下代码:

<li id=”calendar”><h2><?php _e(’Calendar’); ?></h2>
<?php get_calendar(); ?>
</li>

add-calendar.gif

保存并刷新浏览器,结果如下:

calendar.gif

发生了什么?

  • <li id=”calendar”> – 开始一个 ID 为 “Calendar” 的列表元素
  • <h2> – 开始一个子标题
  • <?php _e(’Calendar’); ?> – 输出 Calendar 这个词
  • </h2> – 关闭子标题
  • get_calendar() – 使用 get_calendar() 这个 WP 函数调用日历
  • </li> – 结束列表元素

这样日历就完成了

第3步:增加元数据

get_links_list() 函数下输入以下代码:

<li><h2><?php _e(’Meta’); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>

add-meta.gif

保存并刷新浏览器,结果如下:

(如果你没有登录 WordPress)
meta-logged-out.gif

(如果你已经登录)
meta-logged-in.gif

那么这是怎么回事呢?

你开始一个列表元素(LI),跟着是一个子标题(H2) Meta。在子标题下,你嵌入了一个无序列表(UL)。最后把每个链接都放入了列表元素中(LI)。

wp_register() 这个函数能产生一组 <li></li> 标签,如果你没有登陆,它显示注册(Register)链接,当你登录的时候,它显示的是 管理站点(Site Admin)的链接。
wp_loginout() 不会产生自己的列表元素标签,所以你需要手工输入列表元素标签,当你没有登录的时候,你得到的是 登录(Login) 的链接,当已经登录的时候,你得到的是登出(Logout)链接。
到目前为止,wp_meta() 没有做任何事情,他在网页上和源代码中都不会产生东西,现在不要考虑 wp_meta(),实际上你已经在使用它了。

到此为止,你应完成 Meta 并最终完成了常规的侧边栏。

 

本文转自“我爱水煮鱼”

原文地址:http://fairyfish.net/2007/06/13/wp-theme-lesson-6d-search-form-and-calendar/

About sosel

发表评论

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