# 94: Pengaturan Pencarian Kustom Google - Trik CSS

Anonim

Area pencarian di header "berfungsi" yang dirancang dan Anda dapat mengkliknya buka dan tutup dan semua itu. Tapi itu belum benar-benar melakukan pencarian. Itu sangat penting ya?

Di situs ini kami menggunakan Google Custom Search Engine untuk mencari konten. WordPress memiliki fitur pencarian bawaan, tetapi tidak terlalu bagus. Itu hanya mencocokkan string dan mendaftar apa yang ditemukannya secara berurutan. Tidak ada hal mewah seperti yang ditawarkan Google: logika pencarian, memperbaiki kesalahan eja secara otomatis, menentukan maksud, dan yang terpenting, menampilkan hasil yang paling relevan terlebih dahulu.

Jadi, kami akan menggunakan GCSE, dan kami memiliki beberapa penyiapan yang harus dilakukan. Kami masuk ke area admin mereka untuk membuatnya dan membuatnya dari awal. Kami akan menggunakan versi gratis. Bukan karena saya ingin iklan di seluruh pencarian saya (saya tidak melakukannya) tetapi karena versi berbayar mahal untuk situs sebesar ini. Baik saya membayar ribuan per bulan untuk pencarian bebas iklan, atau benar-benar mendapatkan beberapa dolar dengan memiliki iklan pada pencarian dan mendapatkan kemampuan pencarian secara gratis. Seorang no-brainer.

Yang pertama kami buat adalah penelusuran situs lengkap, jadi kami membuatnya menelusuri "css-tricks.com".

Kemudian kami mendapatkan kode yang diberikan GCSE untuk disertakan di situs agar penelusuran berfungsi. Kami harus melakukan sedikit penggalian untuk menemukan opsi yang menampilkan hasil pencarian saja, dan Anda "membawa sendiri" formulir pencarian. Itu pasti untuk kami, karena kami telah merancang formulir pencarian kami dan menyukainya apa adanya.

Kami memiliki template halaman khusus hanya untuk hasil pencarian. Kami membuat templat ini menjadi bentuk yang menunjukkan hal-hal yang kami ingin tunjukkan.

Kemudian kami mulai membuat lebih banyak mesin telusur ubahsuaian. Ini semacam cara hacky untuk mencapai apa yang kami inginkan: dapat menelusuri hanya sub-bagian situs sesuka hati. CSE kedua yang kami buat hanya untuk mencari “css-tricks.com/forums/”. Kemudian kita membuat halaman hasil pencarian yang berbeda hanya untuk pencarian forum (/ search-results / forum /) tetapi menggunakan template yang sama. Pada halaman ini, kami memasukkan kode dari CSE untuk mesin pencari baru yang lebih terbatas ini.

Kami hanya perlu memastikan pengguna mendapatkan yang benar entah bagaimana ...