Cara Menambahkan Transisi Pencarian di WordPress
Pernahkah Anda melihat ikon pencarian perangkat 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 transisi pencarian ke tema WordPress.
Catatan: Tutorial ini ditujukan untuk pengguna tingkat menengah dengan pengetahuan praktis tentang template WordPress, HTML, dan CSS. Pemula dianjurkan untuk berlatih terlebih dahulu di server lokal.
Lihat formulir pencarian WordPress
WordPress menambahkan kelas CSS standar ke HTML yang dihasilkan oleh berbagai tag template dalam sebuah tema. Gunakan template 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’, matrix(‘search pattern’)) di file features.php, tag template ini akan menghasilkan template pencarian HTML5. Jika tidak, itu menghasilkan formulir pencarian HTML4.
Cara lain untuk mengetahui bentuk apa yang dibuat tema Anda adalah dengan melihat kode sumber untuk formulir pencarian.
Berikut contoh get_search_form() yang akan muncul saat tema Anda tidak memiliki dukungan HTML5:
Ini adalah bentuk umum untuk tema dengan HTML5.
Untuk tutorial terbaik, gunakan contoh HTML5 di bawah ini. Mereka memiliki tema umum dalam bentuk HTML4, agregat, dan satu baris kode dan fungsi arsip. Tema:
add_theme_support(‘html5’, array(‘template pencarian’));
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 efek perangkat ke formulir pencarian WordPress
Hal pertama yang Anda butuhkan 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 harus memuat ikon pencarian ini ke folder gambar tema Anda. Hubungkan ke situs Anda dengan 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:
judul .situs .formulir pencarian {
Posisi mutlak;
kanan: 200 piksel;
atas: 200 piksel;
}
.site-header .search-field {
warna latar belakang: transparan;
gambar latar belakang: url (gambar/ikon-pencarian.png);
posisi latar belakang: 5px tengah;
pengulangan latar belakang: tidak ada pengulangan;
ukuran latar belakang: 24px 24px;
perbatasan: tidak ada;
penunjuk: penunjuk;
tinggi: 37 piksel;
margin: 3 piksel 0;
bantalan: 0 0 0 34px;
Posisi relatif;
-webkit-transisi: lebar 400ms mudah, latar belakang mudah 400ms;
transisi: lebar 400ms mudah, latar belakang 400ms mudah;
lebar: 0;
}
.site-header .search-field: fokus {
warna latar belakang: #fff;
perbatasan: 2px solid #c3c0ab;
kursor: teks;
Garis besar: 0;
lebar: 230 piksel;
}
.Pencarian formulir
.search-kirim {
tidak dipajang;
}
Hal penting yang perlu diingat dengan CSS ini adalah bahwa transisi CSS3 memungkinkan kita membuat transisi dengan mudah. Perhatikan juga bahwa Anda masih perlu menyesuaikan posisi pencarian dan ikon bentuk sesuai dengan desain tema Anda.
Kami harap artikel ini membantu Anda menambahkan efek pertukaran pencarian ke tema WordPress Anda. Apa pendapat Anda tentang formulir pencarian pertukaran? Kami melihat semakin banyak situs web yang menggunakan efek ini. Tinggalkan komentar dan pertanyaan Anda di komentar di bawah atau bergabunglah dalam percakapan di Google+.
