给Twenty Ten主题的导航栏添加一个搜索框

一直以来都是在使用iNove这个主题、并不是这个主题不好只是用的人太多、导致出现审美疲劳。最近在换主题的过程发现还是wordpress3.1版本中默认自带的Twenty Ten最好、主要是框架做得相当的不错、我只要稍微做下修改就能变成自己喜欢的样子。现在的这个主题就是经过对Twenty Ten主题加工之后的样子。

Twenty Ten主题默认是没有添加搜索框的、需要我们在后台添加一个搜索框的小工具来支持其搜索文章的功能、但是添加小工具的方式始终是不太友好（可能是我做软件测试的职业病吧）、最起码我也不是很喜欢。而且Twenty Ten主题的导航栏上面空着也是空着、如果给Twenty Ten主题的导航栏添加一个搜索框的话效果肯定是比添加搜索框小工具来得美观。

因为要经常修改主题文件，所以我用了一个Twenty Ten 子主题（关于wordpress子主题的制作方式谷歌上面一大把、自己去搜索下即可），这样可以任意修改，避免伤及父主题。首先将Twenty Ten 的头部文件header.php 复制下来，用notepad++编辑器将它打开。我想要它显示在导航栏的右端，所以找到下面的这句代码：

<?php wp_nav_menu( array( 'sort_column'=> 'menu_order', 'container_class'=> 'menu-header') ); ?>

然后在这句代码的后面加上下面这一段：

<div class=”search-form”>
<?php $search_text = “Search…”; ?>
<form method=”get”id=”searchform”action=”<?php bloginfo(‘home’); ?>/”>
<input type=”text”value=”<?php echo $search_text; ?>”name=”s”id=”s”onblur=”if (this.value == ”) {this.value = ‘<?php echo $search_text; ?>’;}”onfocus=”if (this.value == ‘<?php echo $search_text; ?>’) {this.value = ”;}”/>
<input type=”hidden”id=”searchsubmit”/>
</form>
</div>

保存header.php文件并上传到子主题文件夹中，OK！当我试着刷新页面时，我看到有一个新的搜索框出现在导航栏菜单的右边了，只不过是紧挨着最右边一个菜单项，看起来实在并不怎么美观，所以，现在需要做的就是样式化一下这个搜索框了，我准备让它位于导航栏的右端。上面代码中放置了一对div标签：<div class=”search-form”>…</div>，这正是我准备样式化搜索框的目的。现在找到子主题的CSS文件style.css，同样使用编辑器将它打开，在最后面加上这句css代码即可：

保存header.php文件然后上传到我们的子主题中、接着去刷新下博客、是不是有一个搜索框已经出来了。只不过这个搜索框导航栏的菜单紧挨着不太美观（这次和职业习惯无关的确不美观）。所以为了能够漂亮一点得让搜索框在导航栏的最右边。我们打开子主题中的style.css文件、记得用notepad++编辑器将他打开、在最后面添加下面这段CSS代码即可：

.search-form input{
margin:10px 10px 10px 0;
font-family:"arial", sans-serif;
width: 150px;
float: right;
}

保存style.css文件后再去刷新页面、然后这个搜索框就出现在了我们Twenty Ten主题的导航栏的最右边了、不过好像有点错位了、我们继续用notepad++编辑style.css文件找到下面的代码：

#access .menu {
/* width: 815px;*/ /*注释掉导航栏的长度、方便添加搜索框*/
padding: 0;
margin-left: 5px;
float: left;

我们将 width: 815px 这行代码注释掉、因为这段代码将导航栏的长度固定了、从而影响了我们添加的搜索框。所以你可以修改下长度或者注释掉也可以的。

保存style.css文件后我再次刷新博客查看搜索框、一个美观的搜索框就出现在了Twenty Ten主题的导航栏右边了。

具体效果如下图：当然你也可以直接查看我们博客上面的搜索框、现在用的就是Twenty Ten主题的导航栏改编而来的子主题。

你可能也会喜欢这些文字