怎么为WordPress主题中搜索框添加占位符文本

关注IT技术视界公众号,获取更多好玩有趣软件!

WordPress主题中为搜索框添加占位符文本,可以通过以几种方式实现:第三种亲测有效

修改主题文件

找到你的主题文件中的搜索表单模板文件,通常是 searchform.php 或者 header.php 文件。在这个文件中,你可以找到搜索表单的HTML代码。

添加占位符属性

在搜索表单的 <input> 元素中添加 placeholder 属性,并设置你想要的占位符文本。例如:

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

使用 functions.php 文件添加占位符

(如果主题不提供 searchform.php 文件):

如果你的主题没有提供 searchform.php 文件,可以在 functions.php 文件中使用 get_search_form 过滤器来添加占位符文本。例如:

function my_custom_search_placeholder($form) {
$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" placeholder="' . esc_attr__('Search …') . '" />
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
</form>';
return $form;
}
add_filter('get_search_form', 'my_custom_search_placeholder');

通过以上步骤,你可以在WordPress主题中的搜索框中添加占位符文本,以提升用户体验。

THE END