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 901.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. Saat 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 pencari layar penuh ke WordPress.

fullscreensearch

Mesin pencari layar penuh muncul sebagai tren karena secara dramatis meningkatkan pengalaman pencarian untuk pengguna seluler. Karena layar seluler sangat kecil, menawarkan hamparan layar penuh mempermudah pengguna untuk menulis dan menelusuri situs Anda.

Menerapkan proses pembuatan mesin layar penuh ke dalam praktik bisa sedikit rumit, karena memerlukan beberapa kode. Inilah mengapa prosesnya disederhanakan melalui plugin sederhana.

Menambahkan mesin pencari layar penuh ke WordPress

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Hamparan Penelusuran Layar Penuh WordPress. Plugin Layar Penuh WordPress Searh Overlay bekerja tanpa konfigurasi, dan tidak memiliki parameter konfigurasi. Anda hanya perlu mengunjungi situs Anda dan mengklik kotak pencarian untuk melihat plugin beraksi.

fullscreensearchoverlay

Penting untuk diperhatikan 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 Tampilan Pencarian Layar Penuh WordPress dilengkapi dengan lembar gayanya sendiri. Untuk mengubah tampilan mesin pencari, Anda perlu mengedit file CSS plugin atau gunakan! Penting dalam bahasa CSS.

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

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/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]

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

Setelah Anda membuka file tersebut, 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, kita baru saja mengubah warna latar belakang pada baris 62, dan menambahkan warna font pada baris 150. Jika Anda mahir menggunakan CSS, silakan mengubahnya. pengaturan lain sesuai keinginan Anda.

Setelah selesai, Anda dapat mengupload file dari folder CSS melalui FTP. Sekarang Anda dapat melihat perubahannya dengan mengunjungi situs web Anda.

fullscreensearchwp

Catatan penting:

Jika Anda menggunakan di tema Anda sendiri, maka yang terbaik adalah menggunakan tag! Penting agar pembaruan plugin tidak membatalkan perubahan.

Buat Toko Online Anda dengan mudah

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

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

Itu saja ! Kami harap artikel ini membantu Anda menambahkan mesin pencari layar penuh ke situs WordPress Anda. Anda dengan hormat diminta untuk meninggalkan 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