自定义search form

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

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

一些示例

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

内建的 search form

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

<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 文件

<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 的方法

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' );

我的代码

<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. Pavel

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

    1. 流年 文章作者

      这个主题就这个格调了,以后看看别的

    1. 流年 文章作者

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

评论已关闭。