Ajaxové vyhľadávanie bez WordPress pluginu

WordPress v základe ponúka jednoduché vyhľadávanie, ktoré môžete použiť na vašej webstránke, či používate vizuálny editor na tvorbu webu, alebo ste si zakúpili WordPress šablónu. Zadáte vyhľadávané slovo, alebo celú frázu a na základe zhody sa Vám na stránke výsledkov vyhľadávania zobrazia všetky relevantné stránky, články a pod.

Elegantnejší a rýchlejší spôsob vyhľadávania na webe umožňuje ajax, ktorý zabezpečí načítanie výsledkov vyhľadávania bez nutnosti znovanačítania celej webstránky. V tomto návode vám ukážem ako vytvoriť ajaxové vyhľadávanie bez inštalovania ďalšieho WordPress pluginu, s použitím php, ajaxu a jquery. Nemusíte sa ničoho obávať, aj keď programovať neviete. Celý kód a aj postup ako a kde ho vložiť popíšem tak, aby to zvládol aj začiatočník, ktorý s programovaním nemá žiadne skúsenosti.

Obrázok pod týmto odstavcom zobrazuje náhľad celého vyhľadávania podľa tohto návodu. Vďaka komentárom v kóde si dokáže prispôsobiť niektoré veci aj bežný užívateľ WordPressu, ktorý nevie programovať. Niektoré väčšie zmeny a úpravy si však vyžadujú znalosť aspoň php.

Čo je Ajax?

AJAX (Asynchronous JavaScript and XML) je technológiu webového vývoja umožňujúca návštevníkom interagovať s webovou stránkou bez potreby načítavania celej stránky. Vďaka tomu sa nám výsledky, ktoré si prostredníctvom ajaxu vypýtame zo servera načítajú rýchlejšie, pretože sa nemusia načítavať zvyšné časti webstránky (ako napr header, footer, ...).

Výhodou používania ajaxu je rýchlosť načítania dopytovaných dát, nižšia záťaž servera, ktorý musí spracovávať menej dát, čím vám aj šetrí peniaze, ktoré by ste doplácali webhostingovej spoločnosti za poskytnutie vyššieho výkonu. No a v neposlednom rade ajax prispieva aj k lepšej užívateľskej skúsenosti z vašej webstránky.

Viac informácií o ajaxe v súvislosti s WordPressom sa dočítate tu.

Možnosti a funkcie ajaxového vyhľadávania

Vďaka tomu, že toto ajaxové vyhľadávanie bude naprogramované, bude možné ho aj akokoľvek upravovať podľa potrieb. Nebudú vás obmedzovať limitované možnosti nastavení, ktoré poskytujú dostupné pluginy. Máte plnú kontrolu nad kódom.

1. Zhoda s nadpisom, zhrnutím a obsahom – Po vyhľadaní vami zadaného slova/frázy sa zobrazia výsledky, na základe úplnej, alebo čiastočnej zhody v nadpise, zhrnutí, alebo obsahu vo všetkých typoch postov (ktoré si navolít v kóde).
2. Ľubovoľný výber typu postov – Je len na Vás, čo zahrniete do vyhľadavania. Či to budu len stránky, články, produkty, alebo všetky dokopy. Vybrať si môžete ktorýkoľvek typ postov, vrátane vlastných typov postov (CPT).
3. Prispôsobenie výsledkov vyhľadávania – Vďaka plnej kontrole nad kódom si môžete vy sami určiť, čo všetko sa bude zobrazovať vo výsledkoch vyhľadávania. Bude to len nadpis príspevku, alebo aj ilustračný obrázok, či príslušné kategórie?
4. Hláška počas spracovávania požiadavky – Po vyhladaní slova/frázy sa pošle požiadavka na server, ktorý ju spracuje a na základe vyhľadávaného slova/frázy pošle späť klientovi výsledky. Počas tohto procesu sa zobrazí pod vyhľadávacím políčkom text „Hľadá sa...“.

5. Callback ak neexistuje žiadna zhoda – V prípade že neexistuje žiadna relevantná zhoda na základe vyhladávania, vypíše sa text „Nič sa nenašlo".

Vlastné ajaxové vyhľadávanie - kódy a postup

Najprv si vytvoríte jednoduchý formulár na vyhľadávanie, ktorý bude obsahovať textový input a tlačidlo.

<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ár si môžete umiestniť kdekoľvek na webstránke kde budete chcieť. Pokiaľ si vytvárate webstránku cez vizuálne editory (page buildre) ako napríklad Divi Builder, Breakdance, Elementor, Oxygen Builder, môžete si vložiť vložiť html kód cez modul code block.

Pri WordPress témach väčšinou nemáte možnosť pridať html kód priamo a najlepšie riešenie je nainštalovať si child tému a pomocou hooku umiestniť hmtl kód na vybrané miesto kdekoľvek na webe. Celý kód vložte do súboru functions.php aktívnej child témy. Ako alternatívu ku child téme si môžete nainštalovať WordPress plugin Code Snippets (free verzia) a vloži celý kód do neho.

TIP! Nezmeškajte zľavy na WordPress pluginy a WordPress témy.

Vyhľadávacie pole aj s výsledkami vyhľadávania som naštýloval nasledovným csskom. CSS si môžete upravovať podľa vašich predstáv.

/* 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;
}

Nakoniec je ešte potrebný jeden krok. Pridať hlavnú časť celého kódu, ktorá zabezpečuje ajaxové volanie a zobrazovanie výsledkov vyhľadávania. Do súboru functions.php, ktorý sa nachádza vo Vašej child téme vložíme nasledujúci kód. Ako som spomenul vyššie, alternatívne môžete nasledovný kód vložiť cez 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();
}

Vyššie uvedený kód zabezpečí nasledovné:

• Po napísaní aspoň 3 písmen do vyhľadávacieho políčka a pauze 600ms po poslednom napísanom znaku sa pošle asynchrónna požiadavka na server. Nemá veľký zmysel vyhľadať niečo na základe jedného, alebo dvoch písme. Tá zhoda by bola príliš široká. 600ms pauza zabezpečuje, že pohodlne napíšete celé slovo/frázu, ktoré chcete vyhľadať a nestane sa, že ešte ste ani nedopísali a už sa Vám zobrazujú výsledky vyhľadávania.
• Zobrazia sa výsledky z článkov a stránok. Tieto si môžete upraviť podľa toho, čo všetko chcete zahrnúť do vyhľadávania. V kóde 'post_type' => array('page','post') môžete upraviť 'page','post' na ľubovoľný typ postu.

Verím že vám tento návod pomôže a že toto ajaxové vyhľadávanie zefektívni návštevníkom hľadanie obsahu na vašej webstránke.