Newspaper merupakan tema premium news dan magazine terbaik yang pernah saya temukan. Tema ini buatan TagDiv. Didalamnya terdapat berbagai macam fitur, termasuk dukungan woocommerce, bbpress, drag and drop page builder, dan lain-lain. Dan tentu saja, blog ini menggunakan Newspaper. Ngomong-ngomong soal blog ini, sudahkah kamu cek fitur kotak pencarian website pojok kanan atas? Yak, jika kamu coba gunakan untuk melakukan pencarian maka hasilnya akan terlihat di halaman yang berbeda, menggunakan Google CSE.
CSE atau singkatan dari Custom Search Engine merupakan fitur pencarian dari Google yang dapat kamu pasang di blogmu tentunya secara gratis. Jadi jangan diragukan lagi soal keakuratan pencariannya. Selain itu keuntungan yang dapat kamu peroleh dari memasang CSE ini kamu juga bisa memonetisasinya, tentunya jika kamu sudah diterima untuk menampilkan iklan Google Adsense.
Bagaimana? Tertarik untuk memasang Google CSE di tema Newspapermu? Untuk itu kali ini saya akan memberikan tutorial mengenai cara mengganti kotak pencarian bawaan dari tema Newspaper dengan Google Custom Search Engine. Perlu diperhatikan tutorial ini hanya untuk tema Newspaper. Untuk pengguna tema lain saya tidak merekomendasikannya. Untuk pengguna blogspot, kamu bisa mencoba Tutorial Memasang CSE di Blogspot. Oke, daripada basa-basi langsung saja simak caranya berikut.
Mendaftarkan Website ke Google Custom Search Engine
Langkah pertama yaitu mendaftarkan blog ke Google CSE. Jika sudah mempunyai code CSE silahkan untuk melewati step ini. Buka halaman CSE lalu login menggunakan akun Google. Lalu isi form pendaftarannya dan klik tombol create.
Lalu kamu akan diarahkan ke halaman dengan 3 opsi. Jika kamu ingin langsung mendapatkan kode dan tidak ingin modifikasi klik saja tombol Get Code. Tapi jika ingin melakukan modifikasi search engine klik tombol Control Panel. Saya sarankan untuk melakukan modifikasi terlebih dahulu untuk medapatkan tampilan yang cocok dengan blogmu.
Buka menu Setup disisi kiri dan lakukan pengaturan sesuai dengan yang diinginkan. Pada menu ini kamu bisa menambahkan deskripsi, keyword, monetisasi pada search engine. Jika sudah buka menu Look and feel, pada tab Layout ganti dengan 2 page.
Setelah itu beralih ke tab Themes pilih Minimalist. Sampai disini kamu bisa klik Save & Get Code. Simpan codenya di notepad. Jika ingin melakukan modifikasi lebih lanjut klik saja tab Customize. Jika sudah kamu hanya perlu klik tombol Save dan perubahan akan otomatis. Jadi gaperlu klik Save & Get Code lagi.
Memasang Custom Search Engine di Tema Newspaper
1. Membuat Halaman Hasil Pencarian
Buat page baru dan beri nama terserah. Ubah permalinknya menjadi /search/ atau apapun terserah. Contoh: https://domainkamu/search/. Jadi fungsi page ini adalah untuk menampilkan hasil pencarian.
Berhubung tema Newspaper ini sudah include plugin Visual Composer, jadi tinggal pilh Backend Editor lalu Add Element, pilih Raw HTML dan pastekan code CSEmu di dalamnya.
Lalu ubah Atribut Page nya menjadi Page builder + page title. Setelah itu baru deh klik Publish.
2. Modifikasi Tombol Search Tema Newspaper
Jadi langkah selanjutnya yaitu memodifikasi tombol search bawaan tema Newspaper agar bisa digunakan untuk menampilkan hasil pencarian CSE. Langkah ini diharuskan untuk mengedit file tema. Jadi dimohon untuk melakukan back up terlebih dahulu.
Buka cPanel kamu dan masuk ke direktori berikut public_html/wp-content/themes/newspaper/parts/header/. Lalu edit file header-menu.php. dan cari baris script berikut.
<div class="header-search-wrap">
<div class="header-search-wrap">
<div class="dropdown header-search">
<div class="td-drop-down-search" aria-labelledby="td-header-search-button">
<form method="get" class="td-search-form" action="<?php echo esc_url(home_url( '/' )); ?>"> <div role="search" class="td-head-form-search-wrap">
<input id="td-header-search" type="text" value="<?php echo get_search_query(); ?>" name="s" autocomplete="off" />
<input class="wpb_button wpb_btn-inverse btn" type="submit" id="td-header-search-top" value="<?php _etd('Search', TD_THEME_NAME)?>" />
</div>
</form>
<div id="td-aj-search"></div>
</div>
</div>
</div>Ganti dengan
<div class="header-search-wrap">
<div class="dropdown header-search">
<div class="td-drop-down-search" aria-labelledby="td-header-search-button">
<form role="search" method="get" class="td-search-form" action="http://www.domainkamu.com/search/">
<div class="td-head-form-search-wrap">
<input id="td-header-search" type="text" value="Search" name="q" class="s search-input" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" /> <input type="submit" id="td-header-search-top" class="wpb_button wpb_btn-inverse btn" value="Search" />
</div>
</form>
</div>
</div>
</div>Jangan lupa ganti http://www.domainkamu.com/search/ dengan punyamu. Lalu save. Coba test apakah bekerja atau tidak. Jika ternyata masih belum berhasil coba cek apakah didalam folder header terdapat header-menu1.php, jika ada, edit juga seperti langkah diatas. Done.
Demikian cara memasang Google Custom Search Engine pada tema Newspaper. Jika terdapat kesulitan silahkan berkomentar. Selamat mencoba dan semoga bermanfaat.
