Modifikasi halaman hasil pencarian dengan GCSE

Modifikasi halaman hasil pencarian dengan GCSE(Google Custom Search) – Maksud dari judul tulisan ini adalah mengganti kotak telusur atau mengganti halaman hasil pencarian bawaan WordPress dengan Google Custom Search. Abaikan judulnya kalau kurang tepat hehehe 😀

Google Custom Search memungkinkan kita untuk membuat mesin telusur di website, atau blog yang kita miliki agar pengunjung bisa dengan mudah mendapatkan informasi yang mereka cari. Walaupun pada setiap platform cms sudah disediakan, tetapi ada beberapa para blogger lebih memilih menggunakan Google Search Custom.

Apabila kalian tertarik dan ingin mencoba modifikasi halaman hasil pencarian dengan gcse, silahkan ikuti langkah di bawah ini.

Sebagai contoh, pada tutorial ini saya menggunakan tema bawaan WordPress yaitu twentyfifteen. Kalau kalian menggunakan tema lain, kalian tinggal menyesuaikan saja. Baiklah langsung saja kita mulai.

Edit layout

  • Login ke kontrol panel Google Custom Search
  • klik pada menu Look and feel
  • Pada tab Layout, pilih Result only.

modifikasi halaman hasil pencarian dengan gcse

  • klik Save & Get Code

Setelah itu, maka kita akan diarahkan ke halaman Get code for search results.

Sampai disini masih ada satu langkah lagi, yaitu merubah nama parameter query nya. Caranya klik menu Search Result Details. lalu ganti huruf dengan huruf s, karena disini kita akan menyesuaikan parameter query untuk cms wordpress kita. Selanjutnya klik save dan jangan lupa untuk menyalin code nya.

Contoh

<script>
(function() {
var cx = 'id_kalian_disini';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

Modifikasi halaman hasil pencarian dengan GCSE

pada langkah yang kedua ini kita akan meng edit file search.php pada tema kita. Berikut adalah code yang ada pada file search.php di tema twentyfiften.

<?php
/**
* The template for displaying search results pages.
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/

get_header(); ?>

<section id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php if ( have_posts() ) : ?>

<header class="page-header">
<h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyfifteen' ), get_search_query() ); ?></h1>
</header><!-- .page-header -->

<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>

<?php
/*
* Run the loop for the search to output the results.
* If you want to overload this in a child theme then include a file
* called content-search.php and that will be used instead.
*/
get_template_part( 'content', 'search' );

// End the loop.
endwhile;

// Previous/next page navigation.
the_posts_pagination( array(
'prev_text' => __( 'Previous page', 'twentyfifteen' ),
'next_text' => __( 'Next page', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
) );

// If no content, include the "No posts found" template.
else :
get_template_part( 'content', 'none' );

endif;
?>

</main><!-- .site-main -->
</section><!-- .content-area -->

<?php get_footer(); ?>

Rubah code di atas menjadi seperti ini

<?php
/**
* The template for displaying search results pages.
*
* @package WordPress
* @subpackage Twenty_Fifteen
* @since Twenty Fifteen 1.0
*/

get_header(); ?>

<section id="primary" class="content-area">
 <main id="main" class="site-main" role="main">
 <header class="page-header">
 <h1 class="page-title"><?php printf( __( 'Search Results for: %s', 'twentyfifteen' ), get_search_query() ); ?></h1>
 </header><!-- .page-header --> 

<?php 
    get_search_form();
?>

<script>
(function() {
var cx = 'id_kalian_disini';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

</main><!-- .site-main -->
</section><!-- .content-area -->

<?php get_footer(); ?>

Lalu simpan file tersebut dan lihat hasilnya 😀

Kalau ingin halaman search resultnya valid HTML5, silahkan ganti code ini

<gcse:searchresults-only></gcse:searchresults-only>

Jadi seperti ini

<div class="gcse-searchresults-only"></div>

Kalau menurut kalian ini tidak perlu, silahkan abaikan saja hehe

OK, sampai disini kita sudah selsai modifikasi halaman hasil pencarian dengan google custom search. Untuk demonya bisa kalian coba kotak telusur saya atau klik link ini.

Selamat mencoba 🙂

Memiliki pertanyaan atau saran? Silakan klik disini untuk berkomentar :).

Masgani

Halo, perkenalkan nama saya Gani. Saat ini saya sebagai penulis sekaligus pemilik situs web masgani.com. Selain menulis di situs web ini, keseharian saya saat ini yaitu sebagai Developer di salah satu perusahaan Startup. Saya berharap tulisan saya situs web ini dapat bermanfaat dan menginspirasi. Terima kasih :)

Postingan Terkait

2 Respon

  1. Maulpetru berkata:

    Alhamdulillah bisa broooo, thanks… sangat bermanfaat

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.