Kaip pasidaryti savo lipnią antraštės juostą, kaip „MakeUseOf“

Skelbimas

Maždaug prieš mėnesį „MakeUseOf“ pristatėme naują sąsajos elementą - slankiąją naršymo ir paieškos juostą. Gauti atsiliepimai yra beveik visiškai teigiami, padidėjo vidinis paieškos srautas, o kai kurie skaitytojai klausė, kaip sukurti savo svetainę, todėl maniau, kad pasidalinsiu.

Mes naudosime „jQuery“, kad pritvirtintume juostą ekrano viršuje, tačiau tik tam tikroje vietoje. Aš visa tai padarysiu pagal numatytąją „WordPress“ temą - dvidešimt vienuolika, nors, žinoma, ją galima pritaikyti bet kuriai temai ar svetainei, kurią pakankamai suprantate, kaip modifikuoti.

HTML

Pirmiausia atidarykite temų header.php ir nustatykite naršymo juostą, kurią padarysime lipnią. Kaip sakiau, žemiau pateiktas kodas yra numatytasis dvidešimt vienuolika; tavo gali skirtis.

Pirmiausia pridėkite naują DIV konteinerį, supantį visą šią NAV sekciją.

Taip pat perkelkime šią numatytąją paieškos juostą į čia. Pastebėsite, kad jis pagal numatytuosius nustatymus pridedamas viršutiniame dešiniajame temos viršuje. rasti liniją

php get_search_form (); ir įklijuokite jį į mūsų naršymo skyrių. Ištrinkite visus kitus šio failo egzempliorius.

Jei dabar išsaugosite ir atnaujinsite, pamatysite, kad paieškos forma iš tikrųjų nerodoma naršymo juostoje - ji vis tiek rodoma viršuje dešinėje. Taip yra todėl, kad jis yra visiškai CSS pozicijoje, ir mes viską ištrinsime per sekundę.

CSS

Atidarykite pagrindinį failą style.css ir raskite paieškos formos skyrių:

#branding #searchform {... }

Tai, kas yra jo viduje (turėtų būti apie keturias linijas, įskaitant absoliučią padėties nustatymą), pakeiskite taip:

#branding #searchform { plūdė: kairė; fonas: baltas; paraštė: 7 taškai; }

Nesivaržykite pakoreguoti spalvos ar paraštės. Pakeiskite plūdę, jei norite, kad ji būtų rodoma juostos dešinėje. Šioje temoje paieška nustatoma išplėsti, kai vartotojas spustelėja ją; tai nepatenka į šios mokymo programos apimtį, tačiau panašų poveikį galite pamatyti mūsų „MakeUseOf“ paieškoje.

jQuery

Jei jums įdomu, kodėl mes tai naudojame „jQuery“, tai paprasta: CSS yra fiksuota ir jos negalima dinamiškai koreguoti. Nors mes galėtume naudoti CSS, kad padarytume lipnią antraštę, ji turėtų būti svarbiausias puslapio elementas. Problema, kurią turime, yra tai, kad mūsų meniu nėra svarbiausias elementas, todėl negalime pradėti nuo to, kad jis yra lipnus. Čia naudojama „jQuery“; mes galime patikrinti, kada vartotojas eina per tam tikrą tašką; tada ir tik tada padarykite jį lipnų.

Pradėkite pridėdami „jQuery“ prie savo temos. Jūsų tema jau gali būti įkelta; jei ne, nesijaudinkite. Tai galite ir užkoduoti, pridėdami šį kodą prie function.php, pavyzdžiui:

php. funkcija my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Arba galite tiesiog apeiti „WordPress“ ir tai padaryti į antraštės failą. Kažkur savo galvos skyriuje tiesiog pridėkite šią eilutę:

Jei naudosite pirmąjį metodą, jis bus įkeltas „noConflict“ režimas, o tai reiškia, kad norėdami pasiekti „jQuery“ funkcijas, savo kode turėsite naudoti „jQuery“. Jei naudojate antrąjį būdą tiesiogiai pridėti jį prie antraštės, galite naudoti standartinį „jQuery“ priedą $. Aš manau, kad antrasis metodas pateiktas žemiau esančiame kode.

Taigi, norėdami pridėti tikrąjį „jQuery“ kodą, kažkur savo gale įdėkite šiuos dalykus antraštė.php - Aš padėjau savo priešais

Pirmas dalykas, kurį daro scenarijus, yra išsiaiškinti, kur prasideda naršymo juosta, ir atsimena šią vertę. Antra, mes pridedame prie slinkties įvykio - tai reiškia, kad kiekvieną kartą, kai vartotojas slenka puslapiu, mes galime paleisti šį kodo bloką. Kai kodas vykdomas, jį naudoti galima dviem būdais:
1. Jei langas paslinko per naršymo juostą, mes padarome ją fiksuota CSS (tai yra „lipni“ dalis).
2. Jei lango viršutinė dalis yra aukštesnė už pradinę naršymo juostos padėtį (ty vartotojas vėl slinko atgal į viršų), grąžiname ją į numatytąją statinę padėtį.

Noriu atkreipti jūsų dėmesį į du dalykus:

• +288 yra ten, kad ištaisytų klaidą dėl klaidingos padėties; be jo juosta per greitai suaktyvina lipnią būseną - pašalinkite ją, kad pamatytumėte, ką turiu omenyje. Tai nebus būtina visose temose, todėl tikriausiai galite sugalvoti geresnį sprendimą.
• Norėdami išspręsti naršymo juostos pločio pasikeitimo problemą, kai ji tampa lipni, redaguokite „style.css“, 550 eilutę, kad perskaitytumėte 1 000 taškų vietoj 100%

Štai jūsų naršymo juosta dabar turėtų būti gražiai priklijuota.

Santrauka:

Visas pakeitimas antraštė.php šios vadovėlio kodą galite rasti adresu tai pastebiu; ir pakeitimas stilius.cssčia. Tikėjausi, kad jums patiko ši maža instrukcija; Jei kyla problemų, rašykite komentaruose, tačiau nepamirškite savo svetainę padaryti viešai prieinamą, kad galėčiau eiti kartu ir pasižvalgyti. Jei esate čia naujas, būtinai peržiūrėkite visus kitus tinklaraštininkų ir interneto svetainių kūrimo straipsniai.