Štandardné vyhľadávanie, ktoré ponúka WordPress nie je bohviečo, ale zároveň sa neoplatí inštalovať si plugin na každú jednu funkciu, ktorú by sme na webstránke chceli mať. V tomto návode si ukážeme, ako vytvoriť vlastné ajaxové vyhľadávanie bez WordPress pluginu.
Čo je to Ajax?
AJAX (Asynchronous JavaScript and XML) predstavuje technológiu webového vývoja, ktorá umožňuje interakciu s webovými stránkami bez potreby načítavania celej stránky zo servera. Využíva kombináciu asynchrónneho JavaScriptu a formátu dát XML alebo iných formátov (napríklad JSON) na výmenu dát medzi webovým prehliadačom a webovým serverom. Ajax predstavuje pri interakcii návštevníka s webstránkou vyšší komfort.
Vhodné využitie ajaxu možno demonštrovať práve na vyhľadávači na webe. Ak chcete umožniť návštevníkom webu vyhľadávať bez toho, aby museli čakať na načítanie celej stránky s výsledkami vyhľadávania, s využitím ajaxu môžete vytvoriť vyhľadávacie políčko (input), cez ktoré sa budú odosielať dáta (v našom prípade hľadané slová alebo frázy) asynchrónne na server. Ten následne spracuje prijaté dáta a asynchrónne pošle späť výsledky vyhľadávania. Výsledkom je, že sa dáta zobrazia na stránke bez nutnosti načítavania celého obsahu.
TIP: Prečítajte si viac o ajaxe vo WordPresse
Výhody vlastného ajaxového vyhľadávania
- Vyhľadávanie v nadpise, zhrnutí a obsahu – Zobrazí výsledky, ktoré sa zhodujú s vyhľadávaným slovom/frázou v nadpise, zhrnutí, alebo obsahu postu.
- Vyhľadávanie akéhokoľvek typu postu – V kóde si môžete vybrať čo všetko zahrniete do vyhľadávania. Či len články, alebo aj stránky, či produkty.
- Prispôsobenie výsledkov vyhľadávania – Podľa nižšie uvedeného hlavného kódu sa bude zobrazovať vo výsledkoch vyhľadávania ilustračný obrázok a nadpis. Vďaka plnej kontrole nad kódom si môžete výsledky vyhľadávania prispôsobiť podľa svojich predstáv.
- Vypísanie hlášky počas čakania na odpoveď – Kým server spracúva požiadavku a odosiela ju späť klientovi, namiesto výsledkov vyhľadávania sa zobrazí text „Hľadá sa…“.
- Vypísanie hlášky v prípade nulovej zhody – Ak sa nenašla žiadna zhoda s vyhľadávaným slovom/frázou, vypíše sa hláška „Nič sa nenašlo“.
- Šetrenie serverových zdrojov – požiadavky na server sa posielajú až keď sú napísané viac ako dva znaky vo vyhľadávacom políčku a zároveň ak sa 600ms nenapísal žiadny ďalší znak.
Na začiatku si vytvoríme textový input, cez ktorý budú návštevníci webu vyhľadávať. Umiestniť ho môžete kdekoľvek na webstránke. Ak využívate page buildre ako napríklad Elementor, Divi Builder od Elegantthemes, Breakdance Builder, alebo Oxygen Builder od Soflyy, môžete vložiť nasledovný kód priamo cez modul Code Block. Samozrejme ak máte iný zaužívaný spôsob ako vkladáte html na vašu WordPress webstránku, pokojne sa ho držte.
<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 hľadať – slúži ako možnosť prejsť na stránku vyhľadávania. Môže sa vynechať. -->
Hľadať
</button>
</form>
<div class="search_result" id="datafetch"></div> <!-- Tu sa budú zobrazovať výsledky vyhľadávania -->
Vyhľadávacie políčko spolu s tlačidlom a časťou, v ktorej sa zobrazujú výsledky vyhľadávania, som naštýloval do finálnej podoby nasledovným csskom, ktoré si môžete prispôsobiť podľa vašich predstáv tak, aby celé vyhľadávanie ladilo so zvyškom vašej webstránky.
.search_bar input {
padding: 8px 16px;
width: calc(100% - 80px);
color: #666666;
border: 1px solid #666666;
border-radius: 5px;
outline: none;
}
. search_bar form {
Width: 100%;
display: flex;
gap: 10px;
flex-wrap: nowrap;
}
.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.search_result {
display: none;
}
div.search_result ul {
list-style: none;
padding: 15px;
margin: 0;
}
div.search_result ul li {
color: white;
}
li.search-result-item {
padding: 10px 0;
border-bottom: 1px solid #666666;
}
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;
}
Teraz prejdeme na hlavnú časť. Do súboru functions.php, ktorý sa nachádza vo vašej child téme vložíme kód, ktorý zabezpečí asynchrónne odosielanie požiadavky na server a vypísanie prijatých dát na webstránke.
V kóde je viacero podmienok, ktoré určujú, kedy sa má poslať požiadavka na server a kedy nie. Na server príde dopyt až keď bude vo vyhľadávacom políčku napísaných viac ako dva znaky. Pri jednom, alebo dvoch znakoch by to nemalo veľký zmysel, pretože by sme dostali príliš veľa výsledkov. Aby sa neposielala požiadavka na server za každým napísaným znakom, ale až vtedy, keď dopíšete celé slovo, alebo frázu, nastavil som timeout na 600ms. Je to dostatočný čas, aby ste napísali ďalší znak a výsledky vyhľadávania sa Vám nemenili po každom jednom znaku, ktorý napíšete.
<?php
add_action( 'wp_footer', 'ajax_fetch' ); // Hook, ktorý určujte kde má byť kód umiestnený
function ajax_fetch() { ?>
<script type="text/javascript">
function debounce(func, delay) { // Táto funkcia zabezpečuje oneskorenie posielania požiadavky na server.
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() {
let keyword = jQuery(this).val().toLowerCase();
if (keyword.length > 2) { // Podmienka, ktorá určuje, že požiadavka na server sa pošle až pri viac ako dvoch napísaných znakoch
jQuery('#datafetch').html('<ul><li>Hľadá sa ...</li></ul>'); // Hláška, ktorá sa vypíše, kým sa čaká na výsledky od 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));
</script>
<?php }
// ajax funkcia
add_action('wp_ajax_data_fetch', 'data_fetch'); // ajax endpoint pre prihlásených používateľov
add_action('wp_ajax_nopriv_data_fetch', 'data_fetch'); // ajax endpoint pre neprihlásených používateľov
function data_fetch(){
$the_query = new WP_Query(
array( 'posts_per_page' => -1, // Určuje počet výsledkov (-1 = neobmedzený; vrátia sa všetky relevantné výsledky)
's' => strtolower(esc_attr( $_POST['keyword'] )), // Slúži na vyhľadávanie podľa zadaného kľúčového slova/frázy
'post_type' => array('page','post'), // Určuje, z akých typov obsahu (príspevkov alebo stránok) sa majú vrátiť výsledky.
'post_status' => 'publish', // Určuje, že sa majú vrátiť iba príspevky so stavom 'publish' (publikované).
)
);
if( $the_query->have_posts() ) : // Podmienka, ak existuje nejaký výsledok
echo '<ul>'; // Výsledky sa zobrazia ako unordered list
while( $the_query->have_posts() ): $the_query->the_post(); ?>
<li class="search-result-item">
<a href="<?php echo esc_url( get_permalink() ); ?>"> // Dynamický odkaz na článok/stránku
<img decoding="async" src="<?php echo get_the_post_thumbnail_url($post_id); ?>" width="87.5px" height="50px"> // Ilustračný obrázok (rozmery si môžete zmeniť)
<div><?php the_title(); ?></div> // Nadpis článku /stránky
</a>
</li>
<?php endwhile;
echo '</ul>';
else : {
echo '<ul><li>Nič sa nenašlo.</li></ul>'; // Ak sa nenašla žiadna stránka, ani článok, vypíše sa namiesto výsledkov hláška „Nič sa nenašlo“.
}
wp_reset_postdata();
endif;
die();
}
Na základe tohto kódu sa po vyhľadávaní zobrazia výsledky zo všetkých publikovaných stránok a článkov. V riadku ‚post_type‘ => array(‚page‘,’post‘), môžete zmeniť ‚page‘,’post‘, ak by ste nechceli vyhľadávať práve medzi stránkami a článkami, ale napríklad len medzi článkami, alebo pri eshope len medzi produktami.
Dúfam, že vám bude tento návod na vytvorenie ajaxového vyhľadávania nápomocný a prispeje k vyššej spokojnosti návštevníkov vašej webstránky.
Som tvorca a prevádzkovateľ webu wp-zlavy.sk, kde nájdete najviac WordPress zliav na jednom mieste. Baví ma skauting, programovanie, WordPress a všetko čo s ním súvisí.
