为WordPress添加标签输入框

用过 del.icio.us 的人一定知道，该网站的标题栏后面有一个标签输入框，在输入框中输入标签名即可直接跳转到想要看的标签，而不必从纷繁芜杂的标签云中去寻找。如果你在 WordPress 中添加了标签云，一定也想在标题栏后添加一个类似于 del.icio.us 那样的输入框吧。

这里是仿照 del.icio.us 制作的标签输入框代码。crumb.zip 使用方法如下。

首先按照这个方法打开永久链接。

下载 prototype，然后将 prototype 和本文附带的 crumb.js 放到你的主题目录下的 js/ 目录下，然后在主题的 header.php 的 <head> 标记内加入以下代码。

 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/crumb.js"></script>

在你想加入标签输入框的地方加入以下代码（通常是在blog的标题后）。

<h1 id="pagetitle">
  <a id="top"></a><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>
  <!-- 上面是blog标题，下面是标签输入框的代码 -->
  / <span id="crumb"><?php echo single_cat_title(); ?></span>
  <script>
    if(Crumb) 
      Crumb.go('crumb', '<?php echo get_settings('home').get_settings('category_base').'/'; ?>');
  </script>
  <!-- 标签输入框代码结束 -->
</h1>

最后在主题的 style.css 中增加以下代码，以定义标签输入框的样式。

span#crumb input {
  font-size: 0.7em;
  font-family:verdana,sans-serif;
  background-color: #FFFFFF;
  border: solid 1px #DDDDDD;
  color: #808080;
}
span#crumb input.crumb-focus {
  border: solid 1px #000000;
  color: #000000;
}

charlee.li