Cum să adăugați o suprapunere de căutare pe ecran complet în WordPress

Recent, unul dintre cititorii noștri ne-a întrebat dacă am putea scrie un tutorial despre cum să adăugăm o suprapunere de căutare pe tot ecranul în WordPress. Probabil ați văzut acest lucru pe site-uri populare precum Wired. Când un utilizator face clic pe pictograma de căutare, caseta de căutare se deschide și acoperă întregul ecran, ceea ce poate îmbunătăți experiența utilizatorului pe dispozitivele mobile. În acest articol, vă vom arăta cum să adăugați o suprapunere de căutare pe tot ecranul în WordPress.

Căutarea pe tot ecranul devine încetul cu încetul o tendință, deoarece îmbunătățește drastic experiența de căutare pentru utilizatorii de mobil. Deoarece ecranele mobile sunt foarte mici, oferind o suprapunere pe tot ecranul, facilitați utilizatorilor să tasteze și să caute pe site-ul dvs.

Când am primit prima dată această solicitare de tutorial, știam că va necesita niște cod. Scopul nostru la WPBeginner este de a face lucrurile cât mai simple posibil.

Odată ce am terminat de scris tutorialul, ne-am dat seama că procesul era prea complicat și ar trebui mai degrabă să fie încapsulat într-un plugin simplu.

Pentru a ușura lucrurile, am creat un tutorial video despre cum să adăugați o suprapunere de căutare pe ecran complet pe care îl puteți viziona mai jos.

Totuși, dacă doriți doar să urmați instrucțiuni text, puteți urma tutorialul nostru pas cu pas despre cum să adăugați un overlay de căutare pe tot ecranul în WordPress.

Adăugarea suprapunerii de căutare pe ecran complet în WordPress

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WordPress Full Screen Search Overlay. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Pluginul WordPress Full Screen Overlay Search funcționează imediat și nu există setări pe care să le configurați.

Puteți pur și simplu să vizitați site-ul dvs. web și să faceți clic pe caseta de căutare pentru a vedea pluginul în acțiune.

Vă rugăm să rețineți că pluginul funcționează cu funcția de căutare implicită WordPress. Funcționează excelent și cu SearchWP, care este un plugin premium care îmbunătățește semnificativ căutarea implicită WordPress.

Din păcate, acest plugin nu funcționează cu Google Custom Search.

Personalizarea suprapunerii de căutare pe ecran complet

Pluginul WordPress Full Screen Search Overlay vine cu propriul fișier de stil. Pentru a schimba aspectul suprapunerii de căutare, va trebui să editați fișierul CSS al pluginului sau să utilizați !important în CSS.

Mai întâi, va trebui să vă conectați la site-ul dvs. folosind un client FTP. Dacă sunteți nou în utilizarea FTP, atunci consultați ghidul nostru despre cum să încărcați fișiere pe WordPress folosind FTP.

Odată ce sunteți conectat, trebuie să localizați folderul CSS al plugin-ului. Îl veți găsi sub următorul cale:

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Veți găsi un fișier full-screen-search.css în interiorul folderului css. Trebuie să descărcați acest fișier pe computerul dvs.

Deschideți fișierul pe care tocmai l-ați descărcat într-un editor de text simplu, cum ar fi Notepad. Puteți face orice modificări la acest fișier. De exemplu, am dorit să schimbăm culoarea de fundal și a fontului pentru a se potrivi cu site-ul nostru demo.

/**
* 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; 
}

În acest cod, am schimbat doar culoarea de fundal la linia 62 și am adăugat culoarea fontului la linia 150. Dacă sunteți priceput la CSS, nu ezitați să modificați și alte reguli de stil.

Odată ce ați terminat, puteți încărca acest fișier înapoi în folderul CSS al plugin-ului folosind FTP. Acum puteți vedea modificările dvs. vizitând site-ul dvs.

Notă importantă:

Dacă folosiți acest lucru în propria temă, atunci este mai bine să folosiți etichete !important, astfel încât actualizările plugin-ului să nu suprascrie nicio modificare.

Pentru dezvoltatori și consultanți, puteți, de asemenea, să redenumiți pluginul și să îl includeți ca parte a temei sau a serviciilor dvs.

Am creat acest plugin doar pentru că toate celelalte modalități de a scrie acest tutorial ar fi fost prea complicate pentru utilizatorii începători.

Sperăm că acest articol v-a ajutat să adăugați un overlay de căutare pe tot ecranul pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați un efect de comutare a căutării în WordPress

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la canalul nostru de YouTube pentru tutoriale video WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.