Question

我正在尝试创建一个主题，我在标题中显示一个搜索框：

<?php get_search_form(); ?>

有没有办法让占位符文本显示在该框中？

Answer 1

我最终搞清楚如果我的主题文件夹中没有名为“searchform.php”的文件，Wordpress显示的默认表单不包含任何占位符文本：

<form role="search" method="get" id="searchform" action="<?php echo home_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 role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="text" value="" name="s" id="s" placeholder="Search gear, clothing, & more.." />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

Answer 2

在主题文件夹中创建searchform.php并将该代码放入其中

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<div>
<input class="text" type="text" value=" " name="s" id="s" />
<input type="submit" class="submit button" name="submit" value="<?php _e('Search');?>" />
</div>
</form>

改变你想要的任何东西！喜欢类，占位符，文本你想要的任何东西但不改变名称，id和表单属性

由于

Answer 3

WP codex有example with a placeholder：

如果您的主题支持HTML5，则会在使用时发生 add_theme_support('html5', array('search-form'))，它会输出以下HTML表单。自WordPress 3.6以来就是这种情况。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

如果您不想使用HTML5标记和属性，可以create placeholders with JavaScript。

Answer 4

official get_search_form解释了可以在funtions.php中添加的更灵活的修改。

在这里用CodeX commit签出。

TL; DR

签出下面的代码。

function wpdocs_my_search_form( $form ) {
// replace the new form on your own.
    $form = '<form role="search" method="get" id="searchform" class="searchform" action="' . home_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', 'wpdocs_my_search_form' );

在Wordpress主题中（使用get_search_form（）），如何在搜索框中添加占位符文本？

4 个答案:

TL; DR