在 Wordpress 主题中(使用 get_search_form()),如何将占位符文本添加到搜索框?

Posted

技术标签:

【中文标题】在 Wordpress 主题中(使用 get_search_form()),如何将占位符文本添加到搜索框?【英文标题】:In a Wordpress theme (using get_search_form()), how can I add placeholder text to the search box? 【发布时间】:2013-11-21 03:04:46 【问题描述】:

我正在尝试创建一个主题,并在标题中显示一个搜索框:

<?php get_search_form(); ?>

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

【问题讨论】:

【参考方案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>

【讨论】:

感谢分享您的解决方案。【参考方案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和表单属性

谢谢

【讨论】:

不错!不知道这种方式。谢谢,@Vishal!【参考方案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

【讨论】:

【参考方案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()),如何将占位符文本添加到搜索框?的主要内容,如果未能解决你的问题,请参考以下文章

在 Wordpress 中开发移动主题

在 WordPress 中预览主题

如何在wordpress主题中添加设置页面

在 WordPress 中使用 Divi 主题的响应式侧边栏

wordpress怎样安装主题

wordpress 模版使用教程