WordPress添加高級(jí)搜索功能代碼教程

來(lái)自：素雅營(yíng)銷研究院

方知筆記

2025年07月01日 20:12

WordPress默認(rèn)的搜索功能相對(duì)簡(jiǎn)單，只能進(jìn)行基本的全文檢索。對(duì)于內(nèi)容豐富的網(wǎng)站來(lái)說(shuō)，添加高級(jí)搜索功能可以大大提升用戶體驗(yàn)。本文將介紹幾種為WordPress添加高級(jí)搜索功能的方法和代碼實(shí)現(xiàn)。

一、使用插件實(shí)現(xiàn)高級(jí)搜索

最簡(jiǎn)單的實(shí)現(xiàn)方式是使用現(xiàn)成的插件：

SearchWP - 最強(qiáng)大的WordPress搜索插件之一，支持自定義權(quán)重、同義詞搜索等
Relevanssi - 提供更相關(guān)的搜索結(jié)果排序
Advanced Woo Search - 針對(duì)WooCommerce商店的搜索解決方案

二、手動(dòng)添加自定義搜索表單代碼

如果您希望自定義程度更高，可以手動(dòng)添加代碼：

1. 創(chuàng)建高級(jí)搜索表單

在主題的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="">所有內(nèi)容</option>
<option value="post">文章</option>
<option value="page">頁(yè)面</option>
<option value="product">產(chǎn)品</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="開(kāi)始日期">
<input type="date" name="date_to" placeholder="結(jié)束日期">
</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實(shí)時(shí)搜索功能

要?jiǎng)?chuàng)建更現(xiàn)代化的實(shí)時(shí)搜索體驗(yàn)，可以添加AJAX搜索：

1. 添加AJAX處理函數(shù)

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();
// 輸出搜索結(jié)果項(xiàng)
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">沒(méi)有找到匹配的結(jié)果</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);
});
});

四、優(yōu)化搜索結(jié)果的顯示

您可以通過(guò)CSS美化搜索結(jié)果的顯示：

.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;
}