WP主题开发16：wordpress主题trans，搜索页模板如何创建？

在WordPress主题的动态模板中，搜索页模板并不是必须的。但是，为了对用户更加的友好，可以让用户在wordpress网站上能够通过搜索来查找自己的想要的文章内容，我们还是有必要给trans主题添加一个搜索页模板。一般情况下，WordPress主题动态模板的搜索页的整体布局和文章列表页模板是差不多的，所以，我们可以参照文章列表页来做。

第一步：创建一个search.php文件。

在wordpress主题trans目录下创建一个search.php文件，这是WordPress程序要求的默认搜索页模板的文件，名字必须是search。然后，把trans静态模板search.html文件中的代码全部复制到search.php文件中。

第二步：修改头部的代码。

在search.php文件中，删除从< !doctype>到< /header>标签之间的所有代码。然后，在同样的位置，通过wordpress函数来引入公共的头部模板文件：

< ?php get_header(); //引入头部模板 ?>

修改头部模板header.php文件中的搜索表单的代码，代码如下：

< form action="< ?php bloginfo("siteurl"); ?>" method="get">
< input type="search" name="s" placeholder="搜索...">
< input type="submit" value="搜索">

注：第一个input输入框的name值必须是 s ，这也是wordpress的硬性要求。否则，就搜索不到任何内容。

第三步：修改search.php的侧边栏代码。

在search.php文件中，删除< div class="c_right">标签所包含的所有侧边栏代码，然后，在这个位置上，引入sidebar.php侧边栏公共模板：

< ?php get_sidebar(); //引入侧边栏模板 ?>

第四步：修改搜索页模板的底部代码。

在搜索页模板中，删除从< footer>标签到模板代码结束的所有底部代码，然后，在当前的位置上，添加如下代码引入底部公共模板：

< ?php get_footer(); //引入底部模板 ?>

第五步：修改search.php的左侧主体部分的面包屑导航。

因为是搜索页面模板，所以，这个面包屑导航，我们要体现出搜索结果。所以，我们删除search.php模板中< div class="left_top">标签内部的所有代码，替换成如下的代码：

< ul>
< li>< span class="dashicons-before dashicons-admin-generic">搜索
< li>
< a href="">< span class="dashicons-before dashicons-admin-home">首页 > 搜索结果

< ul>
关键词“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 个搜索结果

上面代码解说：

the_search_query()：输出要搜索的关键词；
$wp_query：是wordpress提供的一个全局变量，它包今当前页面的所有查询数据；
$wp_query->found_posts：搜索当前关键词的数量

搜索页面面包屑导航的效果如下图：

第六步：修改搜索页模板左侧的文章列表。

删除search.php搜索页模板中< div class="left_bottom">标签内部的所有代码，然后，替换成如下代码：

< ?php
if ( have_posts() ):
while ( have_posts() ) : the_post();
?>
< div class="list">
< ul class="list_h">
< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?>

< ul class="list_con">
< ul class="list_con_left">
< a href="< ?php the_permalink(); ?>">
< ?php
if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片
the_post_thumbnail(
'thumbnail' ,
array(
'alt' => trim(strip_tags( $post->post_title )),
'title' => trim(strip_tags( $post->post_title ))
)
);
}else { //否则调用文章第一张图片
echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';
}
?>


< ul class="list_con_right">
< li>
< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ...

< li>
< span class="dashicons-before dashicons-admin-users">
< ?php the_author(); ?>

< span class="dashicons-before dashicons-calendar-alt">
< ?php the_time("Y年m月d日"); ?>

< span class="dashicons-before dashicons-visibility">
< ?php echo get_post_meta($post->ID, 'views', true); ?>

< ?php
endwhile;
endif;
?>

这段代码，我们在archive.php文章列表页模板中我们已经介绍过了，就不多说了。

第七步：添加分页代码。

在trans静态模板的代码中，我们没有分布代码，这里，我们添加上搜索结果的分页效果代码：

< div class="left_page">
< ?php
the_posts_pagination( array(
'mid_size' => 3, //当前页码数的 两边 显示几个页码。
'prev_text' =>'<', //上一页
'next_text' =>'>', //下一南
) );
?>

这里，我们使用到了wordpress提供的分页函数the_posts_pagination()来实现搜索页的文章列表的分页效果。这个函数我们在修改首页模板时，我们就介绍过了，如果想了解它，可以回到我们创建首页模板index.php的文章去看看。

好了，通过以上几部，我们就完成了wordpress主题动态模板trans的搜索页面模板的创建和修改，从这几节课，我们可以看出，有了公共模板后，我们创建其它动态模板时，就方便多了，只要按照本节的几个步骤，就可以很轻松地创建出wordpress主题的动态模板文件。如果喜欢我的文章，别忘了帮我“点赞、评论和关注我”哦。