WordPress – Arama Terimini jQuery İle Vurgulamak

WordPress’in ne kadar harika bir içerik yönetim sistemi olduğundan her fırsatta bahsederim. Güçlü bir arama altyapısına da sahip olan WordPress, kişiselleştirilebilir olması sebebiyle bu kadar popüler. İşte o kişiselleştirmelerden biri daha: Arama sayfalarında arama terimini vurgulamak.

Bu özellik WordPress’te varsayılan olarak gelmiyor, ama 2 dakikalık bir değişiklikle bunu gerçekleştirmek mümkün.

1) Tema klasörünüzün içinde bulunan functions.php dosyasını bir kod editörüyle açın ve diğer fonksiyonları bozmadan aşağıdaki fonksiyonu ekleyin:

function hls_set_query() {
$query = attribute_escape(get_search_query());
if(strlen($query) > 0){
echo '
<script type="text/javascript">
var hls_query = "'.$query.'";
</script>
';
}
}
function hls_init_jquery() {
wp_enqueue_script('jquery');
}
add_action('init', 'hls_init_jquery');
add_action('wp_print_scripts', 'hls_set_query');

 2) Tema klasörünüzde bulunan header.php dosyasını yine bir kod editörüyle açın ve <head> </head> etiketlerinin arasına, diğer kod bloklarını bozmayacak şekilde aşağıdaki kodu ekleyin:

<style type="text/css" media="screen">
.hls { background: #D3E18A; } /* <- Vurgulamak istediginiz terimin arka plan rengi */
/* icin istediginiz rengin HEX kodunu buraya girin. */
</style>
<script type="text/javascript">
jQuery.fn.extend({
highlight: function(search, insensitive, hls_class){
var regex = new RegExp("(<[^>]*>)|(\\b" search.replace(/([-.* ?^${}()|[\]\/\\])/g,"\\$1") ")", insensitive ? "ig" : "g");
return this.html(this.html().replace(regex, function(a, b, c){
return (a.charAt(0) == "<") ? a : "<strong class=\"" hsl_class "\">" c "</strong>";
}));
}
});
jQuery(document).ready(function($){
if(typeof(hls_query) != 'undefined'){
$("#post-area").highlight(hls_query, 1, "hls"); // <- post-area kısmını, vurgulamak istediğiniz
// html etiketinin ID'siyle değiştirebilirsiniz.
// Şu anki haliyle arama teriminiz hem başlıkta
// hem de gösterilen yazı özetinde vurgulanacak.
}
});
</script>

Bu kadar :)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Eksik sayıyı RAKAMLA yazın: