Artikel ini merupakan kelanjutan dari artikel Menggunakan Google Custom Search di WordPress – bagian 1. Pada bagian 1 artikel ini, kita telah membuat Search Engine sendiri. Dan sekarang kita akan mencoba untuk mengintegrasikan nya kedalam instalasi wordpress yang kita miliki. Nah sebaiknya kita segera mulai langkah-langkahnya.

Cara yang akan kita lakukan kali ini adalah membuat sebuah custom page template yang nantinya akan digunakan oleh halaman yang menampung hasil pencarian dari mesin pencari kita. Untuk itu kita akan membuat sebuah file pada direktori theme, misalkan kita menggunakan theme default wordpress. Salinlah file archives.php pada direktori theme tersebut dan simpan sebagai google.php. Buka file google.php tersebut dalam teks editor.

Untuk menjadikan file google.php tersebut menjadi sebuah template, kita harus merubah nama yang ada pada (1). Misalkan kita ganti Archives menjadi Custom Google Search. Kemudian kita akan mengganti isi pada (2) dengan code yang telah kita dapatkan pada artikel bagian 1 (13). Sehingga isi file nya akan menjadi seperti ini :

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

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  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> <!-- #main -->

<script type='text/javascript' src='http://www.int2k.web.id/blog/wp-content/plugins/smilies-themer-toolbar/stt-common.js?ver=2.0'></script>

<div id="footer" class="clearfix">
<p class="alignright">
  <a href="#home" class="top-link">Back to Top</a>
</p>

<p>
	&copy; 2010 INT2K Blog &#8211; Think and write the code  &middot; Proudly powered by  <a href="http://wordpress.org/" title="Blogsoftware by WordPress">WordPress</a>
	<span class="amp">&amp;</span>
  <a href="http://cordobo.com/green-park-2/" title="Cordobo Green Park 2 Beta 5">Green Park 2</a>
  by  <a href="http://cordobo.com/" title="Webdesign by Cordobo">Cordobo</a>.
</p>

<p class="signet">
  Valid XHTML 1.0 Transitional | Valid CSS 3  <br /><br />
	<img src="http://www.int2k.web.id/blog/wp-content/themes/cordobo-green-park-2/img/logo-cgp2.png" alt="Cordobo Green Park 2 logo" title="Cordobo Green Park 2" width="75" height="12" />
</p>

</div>

<!-- Smilies package, Kaskus, courtesy of Int2k (http://www.int2k.web.id) -->

<!-- SyntaxHighlighter Stuff -->
<script type="text/javascript" src="http://www.int2k.web.id/blog/wp-content/plugins/syntaxhighlighter-plus/syntaxhighlighter/src/shCore.js"></script>
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

</body>
</html>

Setelah template tersebut di buat, kita akan membuat sebuah page baru dengan menggunakan template yang telah kita buat. Page nya akan kita namakan Google Search, dengan slug / permalink nya google-search. Untuk isian page nya kita tidak usah mengisi apa-apa, cukup pastikan Page Template yang dipilih adalah page template yang telah kita buat. Setelah selesai simpan dan publish.

Selanjutnya kita akan membuat search box, dimana kita bisa buat sendiri lewat widget atau merubah search form default bawaan wordpress. Sebaiknya untuk coba-coba kita buat dahulu sebuah widget text, isinya berupa code yang di dapatkan pada artikel bagian 1 (12).

<form action="" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="010988781855861982943:t2fuhsoohj0" />
    <input type="hidden" name="cof" value="FORID:9" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

Setelah selesai coba lakukan pencarian dengan menggunakan widget text yang baru kita buat tersebut

• Previous Entry: Menggunakan Google Custom Search di WordPress – bag. 1
• Next Entry: Update untuk Modul Shipping OSCommerce Kurir Tiki