Loncat ke Konten Utama

Bagaimana menambahkan mesin pencari layar penuh di Wordpress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Situs populer seperti Wired menggunakan mesin pencari layar penuh. Ketika pengguna mengklik ikon pencarian, mesin pencari membuka dan menutupi seluruh layar, yang dapat meningkatkan pengalaman pengguna di perangkat seluler. Pada artikel ini, kami akan menunjukkan kepada Anda cara menambahkan mesin pencarian layar penuh di WordPress.

fullscreensearch

Mesin pencarian layar penuh menjadi tren, karena secara dramatis meningkatkan pengalaman pencarian untuk pengguna ponsel. Karena layar seluler sangat kecil, menawarkan overlay layar penuh memudahkan pengguna untuk menulis dan mencari situs Anda.

Menerapkan proses pembuatan mesin layar penuh bisa sedikit rumit karena memerlukan beberapa kode. Karena itulah prosesnya disederhanakan melalui plugin sederhana.

Menambahkan mesin pencarian layar penuh di WordPress

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Hamparan Penelusuran Layar Penuh WordPress. Plugin Layar Penuh WordPress Searh Overlay berfungsi tanpa konfigurasi, dan tidak memiliki pengaturan konfigurasi apa pun. Anda hanya perlu mengunjungi situs Anda dan klik pada kotak pencarian untuk melihat plugin dalam tindakan.

fullscreensearchoverlay

Penting untuk dicatat bahwa plugin ini kompatibel dengan fungsi pencarian default WordPress. Ini juga bekerja dengan baik SearchWP, yang merupakan plugin premium yang meningkatkan pencarian default WordPress.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Sayangnya, plugin ini tidak bekerja sama Google Custom Search.

Menyesuaikan mesin pencari di layar penuh

Le Plugin Hamparan Penelusuran Layar Penuh WordPress ditawarkan dengan style sheet tersendiri. Untuk mengubah tampilan mesin pencari, Anda harus memodifikasi file CSS plugin atau menggunakan! Penting dalam bahasa CSS.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Pertama, Anda harus terhubung ke situs web Anda menggunakan klien FTP. Setelah Anda masuk, Anda harus mencari folder CSS plugin. Anda akan menemukannya melalui jalur berikut:

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Anda akan menemukan sebuah file layar penuh-search.css di dalam folder " css". Kemudian unduh file ke komputer Anda.

Setelah membuka file, dan Anda dapat mengubahnya. Misalnya, kami ingin mengubah latar belakang dan font untuk situs demo kami.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

Dalam kode ini, kami baru saja mengubah warna latar belakang ke garis 62, dan menambahkan warna font ke garis 150. Jika Anda baik dengan CSS, silakan mengubah pengaturan lain sesuai keinginan Anda.

Setelah selesai, Anda dapat mengunduh file dari folder CSS melalui FTP. Anda sekarang dapat melihat perubahan dengan mengunjungi situs web Anda.

fullscreensearchwp

Catatan penting:

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Jika Anda menggunakan tema Anda sendiri, maka lebih baik menggunakan tag! Penting agar pembaruan plugin tidak membatalkan perubahan.

Menurut pengembang dan konsultan, Anda juga dapat mengganti nama plugin dan menganggapnya sebagai bagian dari tema Anda.

Itu saja! Kami harap artikel ini akan membantu Anda menambahkan mesin pencarian layar penuh ke situs WordPress Anda. Silakan tinggalkan komentar dan saran Anda di area khusus.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham2
menciak
Register