0%

WordPress模板开发 之一 搜索页

本来想详细的进行一次WordPress模板开发的讲解,一直抽不出来时间(看片打游戏)。整好有一个开发WordPress搜索页的项目,在模板开发里先介绍搜索页的介绍吧

1. 搜索页你得先有个搜索框

WordPress其实本身已经带有搜索的完整体系,你只要写好搜索框和搜索页即可。

搜索框一般可以默认,但是既然是我们自己开发肯定想要用自己的代码。在你的模板目录下(我的是wpbootstrap)
创建一个新的php文件,起名为 searchform.php , 这个很重要,不要改成其他的名字

直接上代码(我很懒)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/**
* Template for displaying search forms in Winbug
*
* @package WordPress
* @subpackage wpbootstrap
* @since wpbootstrap Seventeen 1.0
* @version 1.0
*/

?>

<form action="/" method="get">
<div class="input-group mb-3">
<fieldset>
<span class="fa fa-search"></span>
<input type="text" class="form-control" placeholder="Search" aria-label="Search" aria-describedby="basic-addon1" name="s" id="search" value="<?php the_search_query(); ?>">
</fieldset>
</div>
</form>

Form标签以内的内容可以根据你们自己的需求进行修改,不能修改的地方有 name, id, value这三个属性不能动。

2. 搜索页你还得有个页面

在你的模板目录中再创建一个search.php的文件

直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
/**
* The template for displaying search results pages
*
* @link
*
* @package WordPress
* @subpackage wpbootstrap
* @since wpbootstrap 1.0
* @version 1.0
*/

get_header(); ?>
<div class="container" id="contents">
<div class="row cate_panner">
<?php get_sidebar('single'); ?>
<div class="col-md-9 post_content">
<div class="wp-bootstrap-blocks-row row">
<div class="col-md-12">
<?php while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>"><p class="title"><?php the_title(); ?></p><p class="description"><?php the_excerpt(); ?></p></a>

<?php endwhile; ?>
</div>
</div>
</div>
</div>
</div>

<?php
get_footer();

当然此处也可以根据大家自己的需求进行修改,基本上和建立一个列表页很像

*新人重点

the_permalink() 文章链接 the_title() 文章标题 the_excerpt() 文章摘要

3. 搜索准备好了,你叫我放哪里

这还用我教!! 逗你们玩的。在自己想要添加搜索的地方,添加以下代码

1
<?php get_search_form(); ?>

放心好了,安全无问题。