Ajaxové vyhledávání bez WordPress pluginu

WordPress v základu nabízí jednoduché vyhledávání, které můžete použít na vaší webstránce, zda používáte vizuální editor pro tvorbu webu, nebo jste si zakoupili WordPress šablonu. Zadáte vyhledávané slovo nebo celou frázi a na základě shody se Vám na stránce výsledků vyhledávání zobrazí všechny relevantní stránky, články a pod.

Elegantnější a rychlejší způsob vyhledávání na webu umožňuje ajax, který zajistí načtení výsledků vyhledávání bez nutnosti znovunačtení celé webové stránky. V tomto návodu vám ukážu jak vytvořit ajaxové vyhledávání bez instalování dalšího WordPressu pluginu, s použitím php, ajaxu a jquery. Nemusíte se ničeho obávat, i když programovat nevíte. Celý kód a také postup jak a kde ho vložit popíšu tak, aby to zvládl i začátečník, který s programováním nemá žádné zkušenosti.

Obrázek pod tímto odstavcem zobrazuje náhled celého vyhledávání podle tohoto návodu. Díky komentářům v kódu si dokáže přizpůsobit některé věci i běžný uživatel WordPressu, který neumí programovat. Některé větší změny a úpravy však vyžadují znalost alespoň php.

Co je Ajax?

AJAX (Asynchronous JavaScript and XML) je technologii webového vývoje umožňující návštěvníkům interagovat s webovou stránkou bez potřeby načítání celé stránky. Díky tomu se nám výsledky, které si prostřednictvím ajaxu zeptáme ze serveru načítají rychleji, protože se nemusí načítat zbývající části webstránky (jako např. header, footer, ...).

Výhodou používání ajaxu je rychlost načítání dotazovaných dat, nižší zátěž serveru, který musí zpracovávat méně dat, čímž vám také šetří peníze, které byste dopláceli webhostingové společnosti za poskytnutí vyššího výkonu. No a v neposlední řadě ajax přispívá ik lepší uživatelské zkušenosti z vaší webstránky.

Více informací o ajaxu v souvislosti s WordPressem se dočtete zde.

Možnosti a funkce ajaxového vyhledávání

Díky tomu, že toto ajaxové vyhledávání bude naprogramováno, bude možné jej i jakkoli upravovat podle potřeb. Nebudou vás omezovat limitované možnosti nastavení, které poskytují dostupné pluginy. Máte plnou kontrolu nad kódem.

1. Shoda s nadpisem, shrnutím a obsahem – Po vyhledání vámi zadaného slova/fráze se zobrazí výsledky, na základě úplné, nebo částečné shody v nadpisu, shrnutí, nebo obsahu ve všech typech postů (které si navolit v kódu).
2. Libovolný výběr typu postů – Je jen na Vás, co zahrnete do vyhledání. Jestli to budou jen stránky, články, produkty, nebo všechny dohromady. Vybrat si můžete kterýkoli typ postů, včetně vlastních typů postů (CPT).
3. Přizpůsobení výsledků vyhledávání – Díky plné kontrole nad kódem si můžete vy sami určit, co všechno se bude zobrazovat ve výsledcích vyhledávání. Bude to jen nadpis příspěvku, nebo i ilustrační obrázek či příslušné kategorie?
4. Hláška během zpracovávání požadavku – Po vyhledání slova/fráze se pošle požadavek na server, který ji zpracuje a na základě vyhledávaného slova/fráze pošle zpět klientovi výsledky. Během tohoto procesu se zobrazí pod vyhledávacím políčkem text „Hledá se...“.

5. Callback pokud neexistuje žádná shoda – V případě že neexistuje žádná relevantní shoda na základě vyhledávání, vypíše se text „Nic nebylo nalezeno“.

Vlastní ajaxové vyhledávání - kódy a postup

Nejprve si vytvoříte jednoduchý formulář pro vyhledávání, který bude obsahovat textový input a tlačítko.

<form action="/" method="get" autocomplete="off">
	<input type="text" name="s" autofocus placeholder="Vyhľadať zľavu..." id="keyword" class="input_search"> <!-- vyhľadávacie políčko -->
	<button> <!-- Tlačidlo, ktorým zabezpečíte klasické WordPress vyhľadávanie. -->
		Hľadať
	</button>
</form>
<div class="search_result" id="datafetch"></div> <!-- V tomto div elemente sa zobrazia výsledky vyhľadávania -->

Tento formulář si můžete umístit kdekoli na webstránce kde budete chtít. Pokud si vytvořit web stránku přes vizuální editory (page builder) jako např. Divi Builder, Breakdance, Elementor, Oxygen Builder, můžete si vložit vložit html kód přes modul code block.

U WordPress šablon většinou nemáte možnost přidat html kód přímo a nejlepší řešení je nainstalovat si child šablonu a pomocí hooku umístit hmtl kód na vybrané místo kdekoli na webu. Celý kód vložte do souboru functions.php aktivní child šablony. Jako alternativu ke child šabloně si můžete nainstalovat WordPress plugin Code Snippets (free verze) a vložit celý kód do něj.

TIP! Nezmeškejte slevy na WordPress pluginy a WordPress šablony.

Vyhledávací pole is výsledky vyhledávání jsem nastyloval následujícím csskom. CSS si můžete upravovat podle vašich představ.

/* Formulár na vyhľadávanie */
. search_bar form {
	Width: 100%;
	display: flex;
	gap: 10px;
	flex-wrap: nowrap;
}

/* Vyhľadávacie políčko */
.search_bar input  {
	padding: 8px 16px;
	width: calc(100% - 80px);
	color: #666666;
	border: 1px solid #666666;
	border-radius: 5px;
	outline: none;
}

/* Tlačidlo Hľadať */
 .search_bar button {
	background-color: white;
	padding: 8px 12px;
	color: #666666;
	border: 1px solid #666666;
	border-radius: 5px;
	cursor: pointer;
}

.search_bar button:hover {
	color: #0a5888; 
	border-color: #0a5888;
	transition-duration: 0.3s;
}

/* Div element, v ktorom sa zobrazia výsledky vyhľadávania */
div.search_result {
 	display: none;
}

/* UL - zoznam výsledkov */
div.search_result ul {
	list-style: none;
	padding: 15px;
	margin: 0;
}

/* Jednotlivé položky v zozname (výsledky) */
div.search_result ul li {
	color: white;
}

/* Jednotlivé výsledky vyhľadávania (napr. jeden článok) */
li.search-result-item {
	padding: 10px 0;
	border-bottom: 1px solid #666666;
}

/* Odkazy vo výsledkoch vyhľadávania */
li.search-result-item a {
	display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
color: white;
}

li.search-result-item a:hover {
	color: #fd834c;
}

Nakonec je ještě zapotřebí jeden krok. Přidat hlavní část celého kódu, která zajišťuje ajaxové volání a zobrazování výsledků vyhledávání. Do souboru functions.php, který se nachází ve Vaší child šabloně, vložíme následující kód. Jak jsem zmínil výše, alternativně můžete následující kód vložit přes plugin Code Snippets.

<?php
add_action( 'wp_footer', 'ajax_fetch' ); // Hook, ktorý určuje že kód sa má načítať vo footri
function ajax_fetch() { ?>
<script type="text/javascript">
function debounce(func, delay) { // funkcia, ktorá zabezpečuje odosielanie požiadavky až po 600ms
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
jQuery("input#keyword").keyup(debounce(function() { // funkcia, ktorá zabezpečuje zobrazenie elementu s výsledkami vyhľadávania po napísaní aspoň 2 písme do inputu
	let keyword = jQuery(this).val().toLowerCase();
	if (keyword.length > 2) { // podmienka, ktorá zabezpečuje, aby sa požiadavky na server posielali, až keď sú napísané v inpute apsoň dve písmená
		jQuery('#datafetch').html('<ul><li>Hľadá sa ...</li></ul>'); // Hláška, ktorá sa zobrazí počas čakania na odpoveď servera
		jQuery.ajax({ // ajaxové volanie
			url: '<?php echo admin_url('admin-ajax.php'); ?>',
			type: 'post',
			data: { action: 'data_fetch', keyword: keyword },
			success: function(data) {
				jQuery('#datafetch').html(data);
			}
		});
		jQuery("#datafetch").show();
		jQuery("#datafetch").css('overflow', 'auto');
		jQuery(".search_bar").css('background-color', 'rgba(0,0,0,0.85)');
	} else {
		jQuery("#datafetch").hide();
		jQuery(".search_bar").css('background-color', 'rgba(0,0,0,0.10)');
	}
}, 600)); // hodnota, ktorá určuje po akom dlhom čase sa pošle požiadavka na server v milisekundách
</script>
<?php }

// ajax funkcia
add_action('wp_ajax_data_fetch', 'data_fetch'); // endpoint pre prihlásených používateľov
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // endpoint pre neprihlásených používateľov
function data_fetch(){
	$the_query = new WP_Query( 
		array( 'posts_per_page' => -1, // Počet výsledkov vyhľadávania (-1 = všetky relevantné výsledky vyhľadávania) 
			  's' => strtolower(esc_attr( $_POST['keyword'] )), 
			  'post_type' => array('page','post'), // Typy postu medzi ktorými sa bude vyhľadávať
			  'post_status' => 'publish', // Vyhľadávanie len medzi publikovanými príspevkami
			 ) 
	);
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>
            <li class="search-result-item">
				<a href="<?php echo esc_url( get_permalink() ); ?>">
					<img src="<?php echo get_the_post_thumbnail_url($post_id); ?>" width="87.5px" height="50px"> // Ilustračný obrázok
					<div><?php the_title(); ?></div> // Titulok postu
				</a>
			</li>

        <?php endwhile;
       echo '</ul>';
		else : {
			echo '<ul><li>Nič sa nenašlo.</li></ul>'; // Hláška, ktorá sa zobrazí v prípade nulovej zhody
		}
        wp_reset_postdata();  
	endif;
    die();
}

Výše uvedený kód zajistí následující:

• Po napsání alespoň 3 písmen do vyhledávacího políčka a pauze 600ms po posledním napsaném znaku se zašle asynchronní požadavek na server. Nemá velký smysl vyhledat něco na základě jednoho nebo dvou písmu. Ta shoda by byla příliš široká. 600ms pauza zajišťuje, že pohodlně napíšete celé slovo/frázi, které chcete vyhledat a nestane se, že ještě jste ani nedopsali a už se vám zobrazují výsledky vyhledávání.
• Zobrazí se výsledky z článků a stránek. Tyto si můžete upravit podle toho, co všechno chcete zahrnout do vyhledávání. V kódu 'post_type' => array('page','post') můžete upravit 'page','post' na libovolný typ postu.

Věřím, že vám tento návod pomůže a že toto ajaxové vyhledávání zefektivní návštěvníkům hledání obsahu na vaší webstránce.