Unikátny 10% zľavový kód wpzlavy na platobné brány pre WooCommerce.

Ajaxové vyhľadávanie bez WordPress pluginu

Peter Dudák
20.09.2023
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.

Vlastné ajaxové vyhľadávanie bez WordPress pluginu
Ukážka výsledkov vyhľadávania z vlastného ajaxového vyhľadávača na WordPress webstránke

Č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...“.
Ajaxové vyhľadávanie - Hľadá sa...
Ukážka ajaového vyhľadávania - hľadá sa výsledok vyhľadávania
  1. 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".
Ajaxové vyhľadávanie - nič sa nenašlo
Ukážka ajaxového vyhľadávania - hláška 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.

Zľava 10% na Divi Builder

Zľava: 10%
Divi Builder je intuitívny vizuálny editor pre WordPress. Zľava sa vzťahuje na ročnú, aj celoživotnú licenciu, súčasťou ktorej je aj Divi téma, Extra téma, Bloom plugin a Monarch plugin.
Využiť zľavu
Neobmedzená platnosť

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.

Pridajte hodnotenie
Envira Gallery

60% zľavový kupón na Envira Gallery plugin

Envira Gallery
Zľava: 60%
Viac info o zľave
Zľavový kupón platí na všetky licencie Envira Gallery pluginu pre WordPress.
Flywheel webhosting

Až 4 mesiace zadarmo na Flywheel webhosting

WP Engine
Zľava: 4 mesiace
Viac info o zľave
Vo Flywheel získate použitím zľavového kódu 4 mesiace zadarmo na webhosting.
Divi Child Themes

10% zľava na Divi childthemes membership

Divi Childthemes
Zľava: 10%
Viac info o zľave
10% zľava na Divi Childthemes sa vzťauje na ročné aj celoživotné členstvo, v ktorom sú zahrnuté všetky Divi child témy pre WordPress.
Využiť zľavu
Platnosť do: 30.10.2024
Coupon Themes

50% zľavový kód na lifetime členstvo Coupon Themes

Coupon Themes
Zľava: 50%
Viac info o zľave
Zľavový kód sa aplikuje automaticky a môžno ho uplatniť na lifetime členstvo "Coupon Lifetime", ktoré zahŕňa všetky WordPress šablóny a pluginy.
Give WP
Nová

35% zľava na GiveWP plugin

Stellar WP
Zľava: 35%
Viac info o zľave
GiveWP je plugin ktorý umožňuje prijímať finančné dary prostredníctvom online formulára.
Využiť zľavu
Platnosť do: 16.06.2024

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *

WP-Zľavy.sk newsletter

Vždy aktuálne WordPress zľavy!

Začnite odoberať náš newsletter a už nezmeškáte žiadne zľavy a akcie na WordPress pluginy, šablóny, kurzy, hostingy a domény!

Úspešne ste sa prihlásili na odber noviniek! Ďakujeme.

Zdieľať
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram