wordpress5.3主题开发第七课：搜索框

目录

添加搜索框

美化搜索框

搜索结果

---

 

一般的网站都带有搜索功能，下面是“石家庄职业技术学院”网站的“搜索框”

添加搜索框

如果搜索框出现在菜单中，可以在functions.php文件中直接写入以下代码，其它的什么也不需要做（前提：导航菜单已经做完）。

/**
 * Add searchbox in menubar
 */
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );

function add_search_box( $items, $args ) {
    $items .= '
' . get_search_form( false ) . '
';
    return $items;
}

介绍一下get_search_form( $echo )

参数 $echo

(布尔值) (可选) 如果是 true 则输出表单； false 则返回表单的字符串。

默认: true

返回值

(字符串string) 

如果参数 $echo 设置为 false，就返回表单的HTML代码。

这个函数的结果就是生成一段HTML代码，如果你的主题没有 searchform.php， WordPress 将使用其内置的搜索表单：

    
Search for:
        
        
    

如果你的主题没有 searchform.php ，将自动使用上面的代码替代。请记住，搜索表单需要一个 Get 方式（method="get" ）到你博客的首页，而且文本输入框应该被命名为 s （name="s"），此外，还必须向上面的例子一样包含 alabel 。

一个自定义的 searchform.php 例子：

    

        Search in 
        
        
    

注释

searchform.php 存在时，$echo 参数将被忽略。一个解决办法是使用 get_search_form 过滤器（filter）来使表单通过 get_search_form() 。

 

以下运行结果

 搜索框效果颜值不高，可以自定义样式，查看一下源码

首页
学校概况

	
学院简介
	
现任领导


组织机构

	
管理机构


校园动态
通知公告

				

					搜索：
					
					
				
			

美化搜索框

在style.css文件中定义搜索框样式

/* 搜索框样式  */
#searchform {
   position: relative;
    width: 260px;
    height: 40px;
}

#searchform  .screen-reader-text{
    display: none;
}

#searchform input[type=text] {
    position: absolute;
    left:0;
    top: 7px;
    width: 250px;
    height: 25px;
    border: none;

}

#searchform input[type=submit] {
    position: absolute;
    top:7px;
    right: 10px;
    width: 50px;
    height: 24px;
    border: none;
}

搜索结果

如果主题没有search.php文件，搜索结果默认使用index.php显示搜索结果

创建一个search.php，显示搜索结果

    
        

            ' . get_search_query() . '的搜索结果：' ;
            ?>
        
    
        

    


','');
        the_excerpt();
        the_content();
    endwhile;
endif;
?>