[英]In a Wordpress theme (using get_search_form()), how can I add placeholder text to the search box?
I am trying to create a theme and I am displaying a search box in the header using:我正在尝试创建一个主题,并使用以下方法在标题中显示一个搜索框:
<?php get_search_form(); ?>
Is there a way that I can get placeholder text to show in that box?有没有办法让占位符文本显示在那个框中?
I ended up figuring out that if I don't have a file called "searchform.php" in my theme folder, Wordpress displays is default form that doesn't include any placeholder text:我最终发现如果我的主题文件夹中没有名为“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>
I created a new file called "searchform.php" in my theme folder and modified the default form to include the placeholder text:我在我的主题文件夹中创建了一个名为“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>
make searchform.php in theme folder and place that code in it在主题文件夹中制作 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>
Change whatever you want !随心所欲改变! like class,placeholder,text any thing you want but not change like name, id and form attribute像类,占位符,文本任何你想要但不改变的东西,如名称、ID 和表单属性
Thanks谢谢
The WP codex has an example with a placeholder : WP codex 有一个带有占位符的示例:
If your theme supports HTML5, which happens if it uses
add_theme_support('html5', array('search-form'))
, it will output the following HTML form.如果您的主题支持 HTML5,如果它使用add_theme_support('html5', array('search-form'))
,它将输出以下 HTML 表单。 This is the case since WordPress 3.6.自 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>
If you don't want to use HTML5 tags and attributes, you can create placeholders with JavaScript .如果您不想使用 HTML5 标签和属性,您可以使用 JavaScript 创建占位符。
The official get_search_form explained the more flexible modified that could add in your funtions.php. 官方 get_search_form解释了可以添加到您的funtions.php 中的更灵活的修改。
check out here with CodeX commit .在这里查看CodeX commit 。
Checkout the code below.查看下面的代码。
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' );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.