图片待添加
图片待添加

WordPress主题开发教程:搜索结果关键词高亮加粗显示

2020-02-21 17:47 分类:WordPress主题开发制作教程 阅读(次阅读) 标签:,

WordPress默认的搜索结果的关键词没有加粗也没有颜色提示,有的朋友觉得这样不方便识别,你看 百度搜索WordPress的搜索结果就做了红色高亮

WordPress主题开发教程:搜索结果关键词高亮加粗显示

你也许会对这篇文章感兴趣: WordPress主题开发教程:只搜索文章标题

下面WordPress主题开发教程来示范下如何让WordPress搜索结果关键词加粗显示

步骤一: 打开你的WordPress主题目录(在wp-content/themes/下面)找到WordPress搜索结果模板search.php
步骤二: 下载到本地并打开ordPress搜索结果模板search.php
步骤三: 添加代码

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
......
<?php endwhile; ?>
<?php else : ?>

里面添加下面代码,也就是你的文章列表循环

<?php
$s = trim(get_search_query()) ? trim(get_search_query()) : 0;
$title = get_the_title();
//300是摘要字符数,......是结束符号。
$content = mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 300,"......");
if($s){$keys = explode(" ",$s);
$title = preg_replace('/('.implode('|', $keys) .')/iu','<strong style="color: #337ab7;">\0</strong>',$title);
$content = preg_replace('/('.implode('|', $keys) .')/iu','<strong style="color: #337ab7;">\0</strong>',$content);
}?>

注意事项: color: #337ab7; 是颜色代码 可以按照你的要求修改;

将WordPress主题原来调用文章标题的代码,如:

<?php the_title(); ?>

替换为:

<?php echo $title; ?>

将WordPress主题原来调用内容的代码,替换为以下代码:(如果没有调用内容,可不用替换)

<?php echo $content;?>

替换好之后,保存,上传替换原来的search.php。
这样,我们在自己的网站搜索时,就会发现搜索结果关键词加粗显示了。


本文地址: https://www.wpyi.com/search-results-are-bold.html