Highlighting – Menyoroti Kata Kunci di Hasil Pencarian WordPress

Highlighting atau menyoroti kata kunci di laman pencarian wordpress ini berbeda dengan highlighting syntax yang pernah saya bahas. Jika Syntax Highlighting adalah menyoroti dan memberi style untuk setiap syntax dari berbagai bahasa pemprograman, sementara highlighting kata kunci (keyword) pencarian adalah menyoroti query pencarian dengan style tersendiri. Untuk memperjelas bagaimana maksudnya silahkan Anda lakukan pencarian di blog ini dengan memasukan keyword apa saja (kira-kira yang ada di blog ini deh, jangan yang gak ada ya?! :D). Anda akan melihat keyword yang dicari memiliki style yang berbeda seperti ini: kata kunci 1, kata kunci 2 dan seterusnya.

Nah dengan melihat gambar di atas saya yakin sekarang Anda paham maksud saya menyoroti kata pencarian di wordpress ini. Silahkan tonton video di bawah ini untuk menerapkannya pada theme WordPress Anda.

Untuk terjemahkan video ke bahsa Indonesia: pilih Settings-> CC – > Auto Translate -> pilih Indonesian.

Kode Hilite / Menyoroti Keyword Pencarian WordPress

Untuk memberi highlight atau menyoroti kata kunci pencarian (search terms) ada dua hal yang harus dirubah, yaitu titel atau judul artikel dan konten / excerpt atau teaser. Silahkan buka file search.php pada template sesuai tema yang digunakan. Fungsi pencarian mungkin tidak selalu sama untuk setiap template dan tidak selalu disimpan pada file search.php. Silahkan cari dan pastikan dengan benar, biasanya file yang digunakan sebagai halaman pencarian mengandung kode <?php if (is_search()) : ?>. Selanjutnya cari kode asal untuk memunculkan title yaitu <?php the_title(); ?> dan ganti dengan kode di bawah ini:

<?php if (is_search()){?>
<?php // highlight kata kunci pencarian pada titel
	$title = get_the_title();
	$keys  = explode(" ", $s);
	$title = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms">\0</span>',$title);
	echo $title;
?>
<?php } else {?><?php the_title(); ?><?php }?>

Langkah selanjutnya adalah mengubah kode default isi / konten. Pada bagian ini kode untuk memunculkan konten secara keseluruhan sudah diganti dengan ringkasan saja atau excerpt. Ini juga sebenarnya bisa berlaku pada halaman arsip atau halaman depan, dan pernah saya bahas pada Ringkasan Artikel tanpa Plugin. Silahkan cari kode <?php the_excerpt(); ?> atau <?php the_content(); ?> lalu gantikan dengan kode di bawah ini:

<?php if (is_search()){?>
<?php // highlight kata kunci pencarian pada titel content
	$excerpt = get_the_excerpt();
	$keys  = explode(" ", $s);
	$excerpt = preg_replace('/('.implode('|',$keys).')/iu','<span class="search-terms">\0</span>',$excerpt);
	echo $excerpt;
?>
<?php } else { the_excerpt(); }?>

Sampai tahap ini perintah highlight atau sorotan keyword pada titel dan konten sudah selesai. Namun Anda tidak akan menemukan perbedaan, karena kata kunci yang disoroti belum memiliki style yang khusus. Maka tambahkan kode di bawah ini pada file CSS template Anda.

span.search-terms { 
	background:#eef;
	border:1px dotted #88f;
	font-weight: bold;
}

Nah, selesai deh! Sekarang coba lakukan pencarian di blog Anda dan perhatikan perbedaannya. Tentu saja Anda juga bisa merubah gaya tampilan dengan mengganti CSS-nya. Silahkan sesuaikan saja agar macthing dengan tema WordPress Anda. Demikian artikel mengenai Highlighting – Menyoroti Keyword di Laman Pencarian WordPress semoga bermanfaat dan selamat mencoba.