Membuat Search Widget WordPress Khusus Postingan

4

A. Pengertian Search Widget

Search widget WordPress default akan menghasilkan pencarian menyeluruh baik page (laman), post (artikel), product (WooCommerce) dan taxonomy lainnya. Bagi website berbasis blog tentunya hal ini tidak diperlukan. Jika anda menemukan masalah search widget menampilkan konten bukan artikel maka anda perlu melakukan konfigurasi search widget pada tema WordPress anda.Anda dapat melakukan modifikasi template anda pada searchform.php

File ini terintegrasi secara langsung dengan fungsi utama get_search_form yang berfungsi memberikan interface form pencarian Widget WordPress.

B. Jenis-jenis Kode searchform.php

Script ini secara umum menggunakan html untuk memberikan interface pada website anda dan ada pula yang menambahkan dengan CSS dari tema.

<form action="/" method="get">
<label for="search">Search in <?php echo home_url( '/' ); ?></label>
<input type="text" name="s" id="search" value="<?php the_search_query(); ?>" />
<input type="image" alt="Search" src="<?php bloginfo( 'template_url' ); ?>/images/search.png" />
</form>

Tambahkan input dengan menggunakan kode html di bawah sebelum syntax </form>

1. Script input tambahan searchform.php khusus artikel 

<input type="hidden" value="post" name="post_type" id="post_type" />

2. Script input tambahan searchform.php khusus product woocommerce

<input type="hidden" value="product" name="post_type" id="post_type" />

3. Script input tambahan searchform.php khusus halaman

<input type="hidden" value="page" name="post_type" id="post_type" />

Jika anda tidak menemukan searchform.php anda dapat melakukan cara yang lebih mudah. Anda hanya perlu menulis script tambahan pada tema WordPress anda yang terletak di functions.php 

Script ini dapat ditemukan di direktori utama tema WordPress.

4. Script khusus menampilkan post artikel

function wpdocs_my_search_form( $form ) 
{
$form = '
<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="hidden" value="post" name="post_type" id="post_type" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>
';
return $form;
}
add_filter( 'get_search_form', 'wpdocs_my_search_form' );

wpdocs_my_search_form() merupakan function yang terintegrasi dengan search widget. Variabel $form merupakan variabel yang kita definisikan sebagai string  berupa script form html untuk memberikan interface pada tema.

add_filter() merupakan metode yang digunakan untuk menghubungkan function tersebut dengan menggunakan API WordPress.

5. Script khusus menampilkan product WooCommerce

function wpdocs_my_search_form( $form )
{
$form = '
<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="hidden" value="product" name="post_type" id="post_type" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>
';
return $form;
}
add_filter( 'get_search_form', 'wpdocs_my_search_form' );

6. Script khusus menampilkan laman

function wpdocs_my_search_form( $form )
{
$form = '
<form role="search" method="get" id="searchform" class="searchform" action="' . home_url( '/' ) . '" >
<div>
<label class="screen-reader-text" for="s">' . __( 'Search for:' ) . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" />
<input type="hidden" value="page" name="post_type" id="post_type" />
<input type="submit" id="searchsubmit" value="'. esc_attr__( 'Search' ) .'" />
</div>
</form>
';
return $form;
}
add_filter( 'get_search_form', 'wpdocs_my_search_form' );

Baca juga: Daftar Isi Tutorial WordPress


Sekian artikel Membuat Search Widget WordPress Khusus Postingan. Nantikan artikel menarik lainnya dan jangan lupa share artikel ini ke kerabat anda. Terimakasih…

4 KOMENTAR

AYO BERKOMENTAR

Tulis komentar
Masukkan nama Anda