Langkah Menggunakan Google Custom Search Engine (Bag. 2)

November 3, 2008 by maseko

Pada tulisan Langkah Menggunakan Google Custom Search Engine (Bag. 1) telah saya tuliskan mengenai langkah-langkah membuat custom search engine disertai penjelasan dan gambaran singkat mengenai menu-menu dalam Panel Kontrol-nya guna mengatur lebih lanjut custom search engine yang dibuat.

Pada Bagaian 2 tulisan ini, saya akan mencoba menuliskan bagaiamana langkah-langkah untuk menggunakan Google CSE sebagai fasilitas pencarian dalam website atau blog yang kita miliki. Pada tulisan ini, saya lebih memfokuskan cara penggunaannya pada blog bermesin WordPress yang dihosting sendiri.

Seperti yang Anda ketahui, ada dua elemen fasilitas pencarian dalam website atau blog:

• Form Pencarian, yaitu formulir yang dapat digunakan pengguna untuk memulai melakukan pencarian, di mana pengguna dapat memasukkan keyword atau kata kunci dan mengklik tombol Search atau dengan [Enter]. Form pencarian ini dapat diletakkan di halaman-halaman mana saja yang mudah dicapai pengguna ketika berniat melakukan pencarian. Pada blog ini, formulir pencarian ini adalah yang terletak pada bagian atas sebelah kanan menu yang ditampilkan pada setiap halaman maseko’s weblog.
• Hasil Pencarian, yaitu halaman yang nantinya akan memuat hasil pencarian yang dilakukan oleh pengguna. Mengacu pada cara yang saya terapkan dalam maseko’s weblog ini, maka yang akan dituliskan berikutnya adalah bagaimana menampilkan hasil pencarian dalam iframe pada halaman yang disiapkan sehingga hasil pencarian masih dalam website atau blog kita.

Kita kembali lagi masuk ke Google CSE, kemudian masuk ke halaman pengelolaan mesin pencari yang telah dibuat. Melalui menu Kode pada Panel Kontrol Google CSE, pada bagian Pilihan hosting hasil pencarian kita pilih Meng-host hasil di situs Web Anda kemudian pilih iframe.

Setelah itu, pada bagian Tetapkan hasil pencarian, kita masukkan URL di situs di mana hasil pencarian nantinya akan ditampilkan. Isikan dengan URL atau alamat web dimana sebuah halaman web mungkin untuk dapat dibuat, misalnya saja di sini kita dapat memasukkan http://www.domain.com/search.html dan untuk blog Wordpress yang dihosting sendiri dapat seperti http://www.domain.com/?page_id=2 atau http://www.domain.com/search/ tergantung setting permalink yang digunakan. Pada bagian ini pula kita menentukan di bagian mana iklan akan ditempatkan, apakah kanan, kanan dan atas, atau atas dan bawah.

Selagi mengatur setting di atas, maka dibagian bawah pengaturan tersebut akan ditampilkan kode yang dapat digunakan baik untuk form pencarian maupun hasil pencarian.

Sementara kita tinggalkan dulu halaman Kode dalam Google CSE tersebut dalam keadaan terbuka. Selanjutnya kita menuju ke website atau blog kita dimana kode tersebut akan disisipkan. Di sini kita perlu mengedit file-file web, jadi diperlukan akses FTP atau fasilitas pengelolaan berbasis web seperti Cpanel dan membuka file yang diperlukan untuk dilakukan editing.

Pertama adalah menyisipkan kode form atau kotak pencarian. Buka file html, asp, php, atau lainnya yang didalamnya akan disisipkan kotak pencarian. Di sini Anda perlu mengenal sedikit pengetahuan HTML agar letak kode yang akan disisipkan bernar-benar tepat.

Untuk blog WordPress, penyisipan kode form pencarian ini dilakukan pada file theme yang digunakan dengan menyesuaikan nama file dan di bagian mana akan disisipkan, apakah bagian atas di header, sidebar, atau lainnya. Anda dapat saja menggunakan kotak pencarian ini sebagai tambahan kotak pencarian default dari Wordpress atau untuk menggantinya seperti yang saya terapkan dalam blog ini. Untuk theme yang saya gunakan, form pencarian diletakan pada file header.php, sementara untuk theme Default Wordpress, form pencarian aslinya ada pada file searchform.php. Beda theme, bisa jadi beda nama file yang perlu diedit, jadi kita harus bisa menentukan file yang tepat. Untuk mengubah form pencarian asli WordPress pada blog dengan theme Default WordPress, maka semua isi file searchform.php diganti dengan kode kotak pencarian dari Google CSE.

Selanjutnya adalah menyisipkan kode hasil pencarian pada file yang alamatnya sudah ditentukan dalam pembentukkan kode di atas. Misalnya hasil pencarian akan diletakkan pada alamat http://www.domain.com/search.html maka kita perlu mengedit file search.html dan pada blok yang sesuai sisipkan kode tersebut.  Dari pengalaman saya, untuk menampung iframe hasil pencarian Google CSE ini setidaknya diperlukan blok dengan lebar 795px jika letak iklan berada disebelah kanan atau 500px jika tanpa meletakkan iklan di sebelah kanan.

Untuk pengguna blog WordPress.org, untuk menyisipkan kode tersebut dapat dilakukan dengan menambah halaman dari menu Write – Page. Gunakan judul yang sesuai dan sisipkan kode dengan editor pada mode HTML (bukan Visual).

Pastikan alamat yang dihasilkan (permalink) sudah sesuai dengan alamat yang disiapkan, jika berbeda dapat mengedit alamat tersebut. Jika memang tidak dapat membuat alamat yang sudah direncanakan dalam isian Google CSE, kita dapat saja menggunakan alamat yang dihasilkan dan mengubah pengaturan pada Google CSE termasuk kode kotak pencarian sebelumnya.

Opsi lainnya, seperti yang saya terapkan untuk blog ini adalah dengan membuat custom page template WordPress. Ini saya lakukan karena jika menggunakan page yang standar, maka halaman yang diperlukan untuk menampung hasil pencarian kurang lebar jika saya ingin meletakkan iklan pada bagian kanan. Untuk langkah ini diperlukan pengetahuan untuk mengutak atik file theme WordPress. Untuk mempermudah dapat saja meng-copy salah satu file theme yang ada seperti page.php atau single.php dan melakukan modifikasi atasnya. Yang diperlukan untuk membuat custom page template adalah memberi nama tempalte yang dibuat ini dengan menambahkan bagian kode seperti dibawah pada bagian awal file template halaman.

<?php

/*

Template Name: Google CSE Result

*/

?>

Contoh di atas digunakan untuk memberi nama custom page template dengan nama Google CSE Result. Contoh selengkapnya custom page template adalah seperti di bawah ini

<?php

/*

Template Name: Google CSE Result

*/

?>

<?php get_header(); ?>

    <div id="content" class="widecolumn">

            <div class="post" id="post-<?php the_ID(); ?>">

            <h2>Search Result</h2>

            <div class="entry">

                <div id="cse-search-results"></div>

<script type="text/javascript">

  var googleSearchIframeName = "cse-search-results";

  var googleSearchFormName = "cse-search-box";

  var googleSearchFrameWidth = 500;

  var googleSearchDomain = "www.google.com";

  var googleSearchPath = "/cse";

</script>

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

            </div>

        </div>

    </div>

<?php get_footer(); ?>

Bagaiman isi file yang sudah disisipi kode hasil pencarian Google CSE ini memang benar-benar harus disesuaikan dengan theme yang digunakan, jadi harus mengerti termasuk penggunaan CSS yang mendukungnya.

Dengan penggunaan custom page template seperti ini, maka ketika membuat halaman melalui menu Write – Page, pada bagian isi dikosongkan saja. Yang perlu diperhatikan adalah menerapkan template yang disediakan untuk halaman yang dibuat. Ini dilakukan melalui pengaturan Page Template dan pilih nama template halaman yang dibuat sebelumnya. Pastikan juga alamat halaman sudah sesuai dengan yang diisikan dalam pengaturan kode Google CSE.

Selanjutnya simpan dan coba lakukan pencarian melalui form pencarian yang sudah jadi sebelumnya. Jika memang form dan halaman hasil pencarian belum sesuai, kita perlu mengaturnya lebih lanjut. Pengetahuan akan (X)HTML dan CSS kemungkinan akan sangat diperlukan di sini.

Posted in Blogging, Google, Web Development, Wordpress

Tulisan lain yang mungkin terkait dengan tulisan di atas:

1. Google Blog Search
2. Mencari dengan Google Hacks
3. Excluded Sites untuk Pencarian di Maseko.com
4. ExactFactor untuk Mengecek Posisi Situs pada Search Engine
5. Menambah Search Engine Plugin untuk Mozilla Firefox