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>
评论已关闭