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.
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.
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.
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í:
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.
Začněte odebírat náš newsletter a už nezmeškáte žádné slevy a akce na WordPress pluginy, šablony, kurzy, hostingy a domény!