Cara Menambahkan Transisi Pencarian di WordPress

Pernahkah Anda melihat ikon pencarian mengonversi di banyak situs web populer? Lihatlah proyek saudara List25 kami untuk melihat contohnya. Idenya adalah untuk menampilkan ikon pencarian sederhana, dan ketika pengguna mengkliknya, formulir pencarian akan meluncur keluar, juga dikenal sebagai efek transisi. Ini adalah efek rapi yang juga menghemat ruang dan memungkinkan pengguna untuk fokus pada konten. Belum lagi, ini sangat ideal untuk tema responsif seluler. Pada artikel ini, kami akan menunjukkan cara menambahkan efek transisi pencarian di Tema WordPress.

Catatan: Tutorial ini ditujukan untuk pengguna tingkat menengah dengan pengetahuan praktis tentang tag template WordPress, HTML, dan CSS. Pengguna level pemula dianjurkan untuk berlatih terlebih dahulu di server lokal.

Tampilkan formulir pencarian WordPress

WordPress menambahkan kelas CSS default ke HTML yang dihasilkan oleh tag template yang berbeda dalam sebuah tema. Gunakan templat tag tema WordPress untuk menampilkan formulir pencarian. Anda dapat membuat dua formulir pencarian yang berbeda, satu untuk tema HTML4 dan satu untuk tema yang didukung HTML5. Jika tema Anda memiliki baris add_theme_support(‘html5, array(‘search form)) di files.php, tag template ini akan menghasilkan formulir pencarian HTML5. Jika tidak, itu akan menghasilkan formulir pencarian HTML4.

Cara lain untuk mengetahui bentuk apa yang dihasilkan tema Anda adalah dengan melihat kode sumber dari formulir pencarian.

Ini adalah tag templat formulir get_search_form() yang akan ditampilkan saat tema Anda tidak memiliki dukungan HTML5:

Dan beginilah cara mencari tema yang mendukung HTML5.

Untuk keperluan tutorial ini, kita akan menggunakan form pencarian HTML5. Jika tema Anda menghasilkan formulir pencarian HTML4, tambahkan baris kode ini ke file theme’s.php Anda:

add_theme_support('html5', array('search-form'));

Setelah Anda memastikan bahwa formulir pencarian Anda menghasilkan formulir HTML5, langkah selanjutnya adalah menempatkan formulir pencarian di tempat yang Anda inginkan untuk ditampilkan dengan transisi.

Tambahkan transisi ke formulir pencarian WordPress

Hal pertama yang Anda perlukan adalah ikon pencarian. Tema Twenty Thirteen default di WordPress hadir dengan ikon kecil yang sangat bagus dan kami akan menggunakannya dalam tutorial kami. Namun, jangan ragu untuk membuat foto Anda di Photoshop atau mengunduhnya dari web. Pastikan saja file tersebut bernama search-icon.png.

Sekarang Anda perlu memuat ikon pencarian ini ke folder gambar tema Anda. Hubungkan ke situs web Anda menggunakan klien FTP seperti Filezilla dan buka folder tema Anda.

Sekarang ini adalah langkah terakhir dan terpenting. Anda perlu menambahkan CSS ini ke lembar gaya tema Anda:

.site-header .search-form {
	position: absolute;
	right: 200px;
	top: 200px;
}

.site-header .search-field {
	background-color: transparent;
	background-image: url(images/search-icon.png);
	background-position: 5px center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	border: none;
	cursor: pointer;
	height: 37px;
	margin: 3px 0;
	padding: 0 0 0 34px;
	position: relative;
	-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;
	width: 0;
}

.site-header .search-field:focus {
	background-color: #fff;
	border: 2px solid #c3c0ab;
	cursor: text;
	outline: 0;
	width: 230px;
}
.search-form
.search-submit { 
display:none;
}

Hal penting yang perlu diingat tentang CSS ini adalah bahwa transisi CSS3 memungkinkan kita untuk menganimasikan transisi dengan mudah. Perhatikan juga bahwa Anda masih harus menyesuaikan posisi ikon dan formulir pencarian sesuai dengan desain tema Anda.

Kami harap artikel ini membantu Anda menambahkan transisi pencarian ke tema WordPress Anda. Apa pendapat Anda tentang formulir pencarian konversi? Kami melihat semakin banyak situs web yang menggunakan efek ini. Tinggalkan komentar dan pertanyaan Anda di komentar di bawah atau bergabunglah dengan kami di obrolan Google+.