自定义search form

WordPress 中使用 get_search_form() 得到自定义 search form 的方法

此处说的自定义 search form,是指通过 get_search_form 来调用生成的,而不是直接 code 在所需要的地方的方法。

其实在 Codex 中的词条 get_search_form 中有详细的说明,此处权当是简单的翻译。

一些示例

下面是一些内建或自定义 search form 的代码示例。

内建的 search form

当主题中没有 searchform.php 文件时,WordPress 将使用内建的 search form:

1
2
3
4
5
6
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <div><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

自定义 searchform.php 文件

1
2
3
4
5
6
7
<form action="/" method="get">
    <fieldset>
        <label for="search">Search in <?php bloginfo( 'name' ); ?></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" />
    </fieldset>
</form>

hook 的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
function my_search_form( $form ) {

    $form = '<form role="search" method="get" id="searchform" action="'.get_bloginfo('url').'" >
    <div><label class="screen-reader-text" for="s">'
. __('Search for:') . '</label>
    <input type="text" value="'
. get_search_query() . '" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="'
. esc_attr__('Search') .'" />
    </div>
    </form>'
;

    return $form;
}

add_filter( 'get_search_form', 'my_search_form' );

我的代码

1
2
3
4
5
6
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value placeholder="Search" name="s" id="s" />
    </div>
</form>

效果图:我的 search form

《自定义search form》有12个想法

    1. 哈哈,第一次,要求不要太高,做designer太难了

  1. 俺css基础太差了
    要写主题还得再加把劲吧!你这个主题很不错,如果背景色改成白色会不会更好些呢?

    1. 我是因为觉得侧栏对我用处不大,所以去掉了

评论已关闭。