get_search_form( bool $echo = true )
显示搜索框。
介绍
默认会调用 searchform.php 文件,如果主题中没有这个文件,会使用 wp-includes/general-template.php 中的 get_search_form 函数。
使用
get_search_form( $echo );
默认会自动输出。
示例
主题搜索框
在你的主题目录中新建一个php文件 searchform.php,插入:
<form action="/" method="get"> <label for="search">Search in <?php echo home_url( '/' ); ?></label> <input type="text" name="s" id="search" value="<?php the_search_query(); ?>" /> <input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" /> </form>
之后就可以在主题的文件中,使用
<?php get_search_form();?>
来调用搜索功能。
显示一个HTML5标签的搜索框
WordPress 3.6开始,只是html 5标签了,以下代码加入 functions.php 文件中。
/** * Add HTML5 theme support. */ function wpdocs_after_setup_theme() { add_theme_support( 'html5', array( 'search-form' ) ); } add_action( 'after_setup_theme', 'wpdocs_after_setup_theme' );
构建搜索函数:
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>"> <label> <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span> <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" /> </label> <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" /> </form>
这里看到了吗,input 支持了 type="search" 属性了。
构建一个HTML 4的搜索框
可以将一下代码放入你的主题模板中。
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>"> <div> <label class="screen-reader-text" for="s"><?php _x( 'Search for:', 'label' ); ?></label> <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button' ); ?>" /> </div> </form>