怎么为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