First of all I use Timber (TWIG) with WordPress. That's why there are some differences with only the use of PHP.
I implemented the WordPress search function with a searched word highlighting system (with "mark" js plugin).
Everything works fine however I would like to display the paragraph that contains the search word as an extract.
For example if I use the word "speaker" for my search. I would like to display the paragraph that contains the word "speaker" in the results.
To inject the appropriate paragraph instead of card.article_exceprt
(
see full code below) :
<div class="card__content">
{{ card.article_exceprt }}
</div>
How to do that please ?
script.js
function init_datas_fetch() {
$('#search-form').on('submit', function(e) {
e.preventDefault();
var searchValue = $('#search-input').val();
if (searchValue.length > 0) {
$.ajax({
type: 'POST',
url: '/wp-admin/admin-ajax.php',
dataType: 'html',
data: {
'action' : 'datas_fetch',
'terms' : searchValue
},
success: function(data) {
$('#fetch-list').html(data);
},
error: function(data) {
}
});
} else {
$('#fetch-list').html('');
}
});
}
functions.php
add_action( 'wp_ajax_nopriv_datas_fetch', 'datas_fetch' );
add_action( 'wp_ajax_datas_fetch', 'datas_fetch' );
function datas_fetch() {
$context['page_search'] = true;
$keywords = isset($_POST['terms']) ? $_POST['terms'] : '';
$posts_types_selected = array('pages' => 'page', 'articles' => 'post', 'videos' => 'videos', 'podcasts' => 'podcasts');
$exclude_posts = get_field('search_exclude','option');
$meta_query = array(
'relation' => 'OR'
);
if (!empty($keywords)) {
$fields = array(
'article_exceprt',
'article_chapeau',
'blocs_article_$_article_wysiwyg'
);
foreach($fields as $field) {
array_push($meta_query, array(
'key' => $field,
'value' => $keywords,
'compare' => 'LIKE'
));
}
}
if ($keywords) {
$context['posts'] = Timber::get_posts(array(
'post_type' => array_values($posts_types_selected),
'post_status' => 'publish',
'posts_per_page' => -1,
'paged' => 1,
'orderby' => 'date',
'order' => 'DESC',
'post__not_in' => array_values($exclude_posts),
'hide_empty' => true,
'has_password' => FALSE,
'_meta_or_title' => $keywords,
'meta_query' => $meta_query
));
} else {
$context['posts'] = Timber::get_posts(array(
'post_type' => array_values($posts_types_selected),
'post_status' => 'publish',
'posts_per_page' => -1,
'paged' => 1,
'orderby' => 'date',
'order' => 'DESC',
'post__not_in' => array_values($exclude_posts),
'hide_empty' => true,
'has_password' => FALSE
));
}
Timber::render( 'bloc_fetch.twig', $context );
die();
}
tpl_search.twig
<form role="search" id="search-form">
<input type="text" id="search-input" class="search__input" placeholder="{{ __('Rechercher des articles, vidéos...', 'cmd') }}" value="">
<input type="submit" id="search-submit" class="search__button" value="Rechercher">
</form>
<div id="fetch-list">
{% include "bloc_fetch.twig" %}
</div>
bloc_fetch.twig
{% for card in posts %}
<div class="card">
<img src="{{ card.thumbnail.src }}" class="card__visual" alt="{{ card.thumbnail.alt }}">
<a href="{{ card.link }}" class="card__link"></a>
<div class="card__content">
{{ card.article_exceprt }}
</div>
</div>
{% endfor %}