Gunakan Mesin Pencari Khusus Google di Tema WordPress GeneratePress

Ada dua alasan mengapa Anda mungkin ingin mengalihkan pencarian WordPress default ke Mesin Pencari Kustom Google di Tema GeneratePress.

• Anda memerlukan solusi sisi klien untuk situs WordPress Statis.
• Anda ingin meningkatkan pengalaman pencarian dengan menampilkan hasil yang sangat relevan.

Langkah-langkah untuk menambahkan Google Penelusuran Khusus

• Tambahkan halaman baru dengan judul “Hasil Pencarian” dan permalink “search” di WordPress Anda.
• Noindex halaman Hasil Pencarian mengikuti instruksi dari plugin SEO Anda.

• tambahkan kode CSE di bawah ini dalam mode Teks untuk menampilkan kotak Pencarian dan hasilnya.

<gcse:search enablehistory="false"></gcse:search>

• Masuk ke CSE website
• Tambahkan Mesin Pencari baru

• Berikan URL situs dalam format wildcard untuk menampilkannya di hasil Pencarian
• Jaga www atau non-www sesuai kanonik Anda 😉

• Selamat! Anda telah berhasil membuat mesin pencari kustom Anda.
• Pergi ke Panel Kontrol

• Buka “Tampilan dan Perasaan”
• Pilih tata letak Dua Halaman
• 💾 Simpan & Dapatkan kode

Mengonfigurasi Parameter URL Pencarian

• Di Rincian Hasil Pencarian, atur URL halaman Hasil Pencarian dan parameter Query.

• Klik tombol Simpan & Dapatkan Kode. Anda akan melihat kode Hasil Pencarian. Abaikan bagian Div, yang sudah kita tambahkan di langkah pertama. Salin saja JavaScript-nya. Kita akan menggunakannya dengan Hook.

Menyiapkan kode di dalam WordPress

• Aktifkan modul Elements yang tersedia di GeneratePress Premium.

• Buat Hook baru

• Beri nama ‘Custom Search Engine (Bahasa Inggris)’ dan tempelkan JS yang Anda salin pada langkah 7.

• Tempatkan kode JS yang Anda salin pada langkah 9. dari Google Custom Search Engine. Saya sendiri telah menambahkan bagian preload untuk memuat JS dengan cepat di browser. Pastikan untuk mengganti ID penerbit.

<link rel="preload" href="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY" as="script">
<script async src="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY"></script>

• Gunakan wp_head hook dengan nilai prioritas tertinggi 0 untuk memastikan script ditempatkan di bagian atas head pada HTML.
• Mengenai kinerja, kita dapat mengatur Display Rules untuk memuat JS ini hanya pada halaman Hasil Pencarian WordPress di mana itu benar-benar diperlukan dan halaman lainnya.

Sembunyikan Iklan Hasil Penelusuran Khusus Google

• Demikian pula, menggunakan Hook baru tambahkan CSS sebaris di bawah ini untuk desain halaman Hasil Pencarian yang baik. Ini akan menyembunyikan advt yang mengganggu juga dalam versi gratis.

<style>
/* Hasil pencarian Google */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Jangan tampilkan hitungan hasil pencarian */
.gsc-result-info {
display: none;
}
/* Sembunyikan branding Google dalam hasil pencarian */
.gcsc-branding {
display: none;
}
/* Sembunyikan gambar thumbnail dalam hasil pencarian */
.gsc-thumbnail {
display: none;
}
/* Sembunyikan cuplikan di hasil pencarian Google */
.gs-snippet {
font-size: 16px;
}
/* Mengubah ukuran font judul hasil pencarian */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Mengubah ukuran font cuplikan di dalam hasil pencarian */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Sorot tombol paginasi di bagian bawah hasil pencarian */
.gsc-cursor-page {
font-size: 1.3em;
padding: 4px 8px;
border: 2px solid #ccc;
}
.gsc-adBlockVertical, .gsc-adBlock {
/* this hides both the top and right ad blocks*/
display: none !important;
}
.gsc-thinWrapper {
/* this gives you use of the whole block, as opposed to 69% google gives*/
width: 100%;
}
.gsc-result-info-container {
display: none;
}
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
display: none;
}
td.gsc-configLabelCell {
display: none;
}
.gsc-above-wrapper-area {
border-bottom: 0px solid #E9E9E9!important;
padding: 0px!important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive table {
margin-bottom: 0px !important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive tbody {
border-bottom: 0px solid #ddd !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
border-bottom: 0px solid #4199FB;
}
.gs-webResult {
border: 0px solid #eee !important;
padding: 0em !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
margin-top: 18px !important;
}
div.gcsc-branding {
display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top: 0 !important;
padding-bottom: 30px !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 10px 0 !important;
}
table.gsc-search-box td {
border: 0px !important;
}
.gsc-input-box table {
margin: 0px ;
}
.gcsc-find-more-on-google {
display: none !important;
}
.gsib_a {
padding: 9px 9px 9px 9px !important;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
border-color: #da0000 !important;
background-color: #da0000 !important;
padding: 10px 19px 10px 19px !important;
}
button.gsc-search-button.gsc-search-button-v2 svg {
width: 18px;
height: 13px;
}
.gsc-input-box {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding: inherit !important;
}
</style>

Kita tahu WordPress menampilkan hasil pencarian di https://www.gulshankumar.net/id/?s=query

Oleh karena itu, penting untuk mengubah jalur tindakan untuk kotak Pencarian dan Yoast menambahkan markup JSON-LD untuk Pencarian Situs. Anda harus menempatkan cuplikan di bawah ini menggunakan plugin Code Snippet.

// Change Search path in the GeneratePress Theme
add_filter( 'generate_navigation_search_output', function() {
printf( 
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder=" Search" class="search-field" value="%2$s" name="q" title="%3$s" />
</form>', 
esc_url( home_url( '/search/' ) ), 
esc_attr( get_search_query() ), 
esc_attr_x( 'Search', 'label', 'generatepress' ) 
); 
} );
// Other theme? Use Real Time Find and Replace Plugin

Jalur JSON yang benar

// For Yoast SEO
function yst_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'wpseo_json_ld_search_url', 'yst_change_json_ld_search_url' );

// For Rankmath
function gk_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'rank_math/json_ld/search_url', 'gk_change_json_ld_search_url' );

Menampilkan Judul Halaman dan Heading sesuai Kueri Pencarian

Terima kasih kepada James Hibbard yang memberikan saya cuplikan di bawah ini yang didasarkan pada URLSearchParams. Ini seharusnya bekerja untuk semua peramban modern.

Pastikan untuk menempatkan script dengan hook wp_footer menggunakan GeneratePress Elements khusus untuk halaman ‘Hasil Pencarian’ yang telah kita buat di langkah pertama.

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const searchTerm = urlParams.get('q');
if (searchTerm) {
    const heading = document.querySelector('h1');
    const title = document.querySelector('title');
    heading.textContent = `Search Results for ${searchTerm}`;
    title.textContent = `Search Results for ${searchTerm}`;
}
</script>

Sekarang Anda dapat melihat Kueri Pencarian dalam Judul dan Heading.

FAQs

Terima kasih telah membaca.