get_search_form()

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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注