WordPress默认的搜索功能相对简单，只能进行基本的全文检索。对于内容丰富的网站来说，添加高级搜索功能可以大大提升用户体验。本文将介绍几种为WordPress添加高级搜索功能的方法和代码实现。
一、使用插件实现高级搜索
最简单的实现方式是使用现成的插件：
- SearchWP - 最强大的WordPress搜索插件之一，支持自定义权重、同义词搜索等
- Relevanssi - 提供更相关的搜索结果排序
- Advanced Woo Search - 针对WooCommerce商店的搜索解决方案
二、手动添加自定义搜索表单代码
如果您希望自定义程度更高，可以手动添加代码：
1. 创建高级搜索表单
在主题的searchform.php文件中添加：
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<input type="text" class="search-field" placeholder="搜索..." value="<?php echo get_search_query(); ?>" name="s" />
<div class="search-filters">
<select name="post_type">
<option value="">所有内容</option>
<option value="post">文章</option>
<option value="page">页面</option>
<option value="product">产品</option>
</select>
<select name="category">
<option value="">所有分类</option>
<?php
$categories = get_categories();
foreach($categories as $category) {
echo '<option value="'.$category->slug.'">'.$category->name.'</option>';
}
?>
</select>
<input type="date" name="date_from" placeholder="开始日期">
<input type="date" name="date_to" placeholder="结束日期">
</div>
<button type="submit" class="search-submit">搜索</button>
</form>
2. 修改搜索查询
在主题的functions.php文件中添加：
function advanced_search_query($query) {
if($query->is_search() && !is_admin()) {
// 按文章类型筛选
if(isset($_GET['post_type'])) {
$query->set('post_type', sanitize_text_field($_GET['post_type']));
}
// 按分类筛选
if(isset($_GET['category']) && !empty($_GET['category'])) {
$query->set('category_name', sanitize_text_field($_GET['category']));
}
// 按日期范围筛选
if(isset($_GET['date_from']) && !empty($_GET['date_from'])) {
$query->set('date_query', array(
array(
'after' => sanitize_text_field($_GET['date_from']),
'before' => isset($_GET['date_to']) ? sanitize_text_field($_GET['date_to']) : date('Y-m-d'),
'inclusive' => true
)
));
}
}
return $query;
}
add_filter('pre_get_posts', 'advanced_search_query');
三、添加AJAX实时搜索功能
要创建更现代化的实时搜索体验，可以添加AJAX搜索：
1. 添加AJAX处理函数
function ajax_search() {
$args = array(
'post_type' => isset($_POST['post_type']) ? $_POST['post_type'] : 'any',
'post_status' => 'publish',
's' => $_POST['term'],
'posts_per_page' => 5
);
if(isset($_POST['category']) && !empty($_POST['category'])) {
$args['category_name'] = sanitize_text_field($_POST['category']);
}
$query = new WP_Query($args);
if($query->have_posts()) {
while($query->have_posts()) {
$query->the_post();
// 输出搜索结果项
echo '<div class="search-result-item">';
echo '<h4><a href="'.get_permalink().'">'.get_the_title().'</a></h4>';
echo '<p>'.wp_trim_words(get_the_excerpt(), 20).'</p>';
echo '</div>';
}
} else {
echo '<div class="no-results">没有找到匹配的结果</div>';
}
die();
}
add_action('wp_ajax_ajax_search', 'ajax_search');
add_action('wp_ajax_nopriv_ajax_search', 'ajax_search');
2. 添加前端JavaScript
jQuery(document).ready(function($) {
var searchTimer;
$('.search-field').on('input', function() {
clearTimeout(searchTimer);
var searchTerm = $(this).val();
if(searchTerm.length < 3) return;
searchTimer = setTimeout(function() {
$.ajax({
url: ajaxurl,
type: 'POST',
data: {
action: 'ajax_search',
term: searchTerm,
post_type: $('select[name="post_type"]').val(),
category: $('select[name="category"]').val()
},
beforeSend: function() {
$('.search-results-container').html('<div class="search-loading">搜索中...</div>');
},
success: function(response) {
$('.search-results-container').html(response);
}
});
}, 500);
});
});
四、优化搜索结果的显示
您可以通过CSS美化搜索结果的显示：
.search-results-container {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 999;
}
.search-result-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.search-result-item:hover {
background: #f9f9f9;
}
.search-result-item h4 {
margin: 0 0 5px 0;
}
.search-result-item p {
margin: 0;
color: #666;
font-size: 0.9em;
}
.no-results, .search-loading {
padding: 15px;
text-align: center;
color: #888;
}
五、注意事项
- 始终对用户输入进行清理和验证，防止SQL注入
- 考虑为大型网站添加搜索索引或使用Elasticsearch等解决方案
- 测试搜索功能在各种情况下的性能表现
- 考虑添加搜索日志功能，了解用户的搜索习惯
通过以上方法，您可以为WordPress网站添加功能强大且用户友好的高级搜索功能，显著提升用户体验和内容发现率。
