Cum să adăugați o suprapunere de afișare pe ecran în WordPress

Recent, unul dintre cititorii noștri a întrebat dacă putem scrie un tutorial despre cum să adăugăm o suprapunere de căutare pe ecran în WordPress. Ați văzut probabil acest lucru pe site-uri populare, cum ar fi 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 utilizatorilor pe dispozitivele mobile. În acest articol, vă vom arăta cum să adăugați o suprapunere de căutare pe ecran în WordPress.

Căutare pe tot ecranul devine treptat o tendință, deoarece îmbunătățește drastic experiența de căutare pentru utilizatorii mobili. Deoarece ecranele mobile sunt foarte mici, oferind o suprapunere pe ecran complet, le ușurați utilizatorilor să introducă și să caute pe site-ul dvs. web.

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

Odată ce am terminat de scris tutorialul, am realizat că era prea complicat pentru un proces și ar fi mai degrabă să fie înfășurat într-un simplu plugin.

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

Cu toate acestea, dacă doriți doar să urmați instrucțiunile de text, puteți urma instrucțiunile pas cu pas despre cum să adăugați o suprapunere de căutare în întregul ecran în WordPress.

Adăugarea de suprapunere de afișare pe ecran î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ă din cutie și nu există setări pe care să le configurați.

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

Rețineți că pluginul funcționează cu caracteristica implicită de căutare WordPress. De asemenea, funcționează excelent cu SearchWP, care este un plug-in premium care îmbunătățește foarte mult căutare WordPress implicită.

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

Particularizarea suprapunerii căutării pe ecran complet

Pluginul WordPress Full Screen Search Overlay vine cu o foaie de stil proprie. Pentru a modifica aspectul suprapunerii de căutare, va trebui să editați fișierul CSS al plugin-ului sau să îl folosiți! Important în CSS.

În primul rând, va trebui să vă conectați la site-ul dvs. web folosind un client FTP. Dacă sunteți nou la utilizarea FTP, atunci aruncați o privire la ghidul nostru cu privire la modul de a încărca fișiere în WordPress folosind FTP.

După ce vă conectați, trebuie să localizați dosarul CSS al plugin-ului. O veți găsi sub următoarea 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 dosarului css. Trebuie să descărcați acest fișier pe computer.

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

 / ** * Resetare * - Previne temele și alte pluginuri de la aplicarea propriilor stiluri în căutarea pe ecranul întregului ecran * / # full-screen-search, # full-screen-search button, # full-screen-search button.close, full-screen formular de căutare, # full-screen-căutare form div, # full-screen-căutare formular de intrare div, # full-screen-căutare formular div input.search font-family: Arial, sans-serif; fundal: nici unul; frontieră: 0 nu există; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; float: none; font-size: 100%; înălțime: auto; literă Spațiere: normal; list-style: none; schiță: nici una; Poziția: statică; text-decoration: none; text-liniuță: 0; text-shadow: nici unul; text-transform: none; lățime: auto; vizibilitate: vizibil; preaplin: vizibil; margin: 0; padding: 0; line-height: 1; box-dimensionare: de frontieră-box; dimensionarea -webkit-box-: frontieră-box; -moz-box-dimensionare: border-cutie; -webkit-box-umbra: nici unul; -moz-box-umbra: nici unul; -MS-box-umbra: nici unul; o- box-umbra: nici unul; box-shadow: nici una; -webkit-aspect: nici unul; tranziție: niciuna; -webkit-transition: none; -moz-tranziție: niciuna; -o-tranziție: niciuna; -ms-transition: none;  / ** * Background * / # full-screen-search vizibilitate: ascuns; opacitate: 0; z-index: 999998; top: 0; stânga: 0; lățime: 100%; înălțime: 100%; fundal: # 1bc69e; / ** * Adăugați unele tranziții CSS3 pentru afișarea Căutării pe ecran întreg * * / tranziție: opacitate 0.5s liniar;  / ** * Afișarea căutării pe ecran complet atunci când Open * / # full-screen-search.open / ** * Pentru că folosim vizibilitatea și opacitatea pentru suportul de tranziție CSS, * definim poziția: fix; aici, astfel încât căutarea pe ecran complet nu blochează * elementele HTML care stau la baza atunci când nu sunt deschise * / position: fixed; vizibilitate: vizibil; opacitate: 1;  / ** * Formularul de căutare * / # formularul de căutare pe tot ecranul position: relative; lățime: 100%; înălțime: 100%;  / ** * Închideți butonul * / # full-screen-search button.close position: absolute; z-index: 999999; top: 20px; dreapta: 20px; font-size: 30px; font-weight: 300; culoare: # 999; cursor: pointer;  / ** * Formularul de căutare Div * / # formularul de căutare pe tot ecranul div position: absolute; lățime: 50%; înălțime: 100px; top: 50%; stânga: 50%; marja: -50px 0 0 -25%;  / ** * Formularul de căutare Input Placeholder Culoare * / # full-screen-căutare formular input div :: - webkit-input-placeholder font-family: Arial, sans-serif; culoare: #ccc;  # full-screen-căutare formular de intrare div: -moz-placeholder font-family: Arial, sans-serif; culoare: #ccc;  # full-screen-search form input div :: - moz-placeholder font-family: Arial, sans-serif; culoare: #ccc;  # interogare full-screen-search form div: -ms-input-placeholder font-family: Arial, sans-serif; culoare: #ccc;  / ** * Formularul de căutare Input * / # full-screen-search form div intrare lățime: 100%; înălțime: 100px; fundal: #eee; padding: 20px; font-size: 40px; linia-înălțime: 60px; / * Am adăugat propria noastră culoare aici * / 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 bun cu CSS, puteți să schimbați și alte reguli de stil.

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

Notă importantă:

Dacă utilizați acest lucru în propria temă, atunci este mai bine să utilizați etichete importante, astfel încât actualizările plugin-ului să nu suprascrie toate modificările.

Pentru dezvoltatori și consultanți, puteți redenumi pluginul și îl puteți grupa ca parte a temei sau serviciilor dvs..

Am creat doar acest plugin deoarece toate celelalte moduri 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 suprapunerea căutării pe ecranul dvs. WordPress. De asemenea, ați putea dori să vedeți ghidul nostru despre cum să adăugați un efect de schimbare a căutării în WordPress

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