Naredite fiksni meni, ko se premikate po strani. Popravljen meni med drsenjem po strani. Kako popraviti zgornji meni v WordPressu

Ki jih vse pogosteje najdemo na straneh blogov in drugih virov. Uporaba takšnih navigacijskih vrstic je povsem upravičena. Eden glavnih razlogov za aktivno uporabo teh vtičnikov jQuery je, da je meni obiskovalcu vedno na dosegu roke, tudi če je na dnu strani. Poleg tega fiksni meni zavzame malo prostora in ne odvrne pozornosti od glavne vsebine. Na splošno fiksni meni izboljša uporabnost spletnega mesta.
Sestavil sem zbirko najboljših, po mojem mnenju, brezplačnih vtičnikov jQuery za implementacijo fiksnega menija. Poskušal sem zagotoviti, da je bil vsak od vtičnikov na nek način edinstven, tako da je bilo mogoče kateri koli vtičnik iz izbora uporabiti posebej v vašem projektu. V zbirki lahko najdete tako enostavne kot bolj zapletene vtičnike z animacijo itd.
Če potrebujete zelo preprost fiksni meni, nekaj takega, kot smo implementirali lepljivo ploščo z družabnimi gumbi, lahko storite brez vtičnikov jQuery, ker nalaganje strani s skripti ni zelo dobro, vendar bomo o tem govorili v naslednjih člankih. Naročite se na naš kanal ali strani, da ne zamudite zanimivih materialov.
torej. Tukaj je 6 vtičnikov jQuery za ustvarjanje fiksnega menija.

Auto-Hide Sticky HeaderjQuery fiksni navigacijski vtičnik, ki deluje po podobnem principu kot zgornji skript, vendar manj gladko, čeprav je na prvi pogled nekoliko lažji. Na žalost ne morem reči, da je navigacija popolnoma prilagodljiva, saj na majhnih zaslonih menijski elementi postanejo samo številke, kar je zelo čudno.

On Scroll Header Effects Zmogljiv vtičnik jQuery za fiksno navigacijsko vrstico. Med drsenjem lahko nastavite določene segmente na strani, ko jih dosežete, se plošča preoblikuje in se lahko popolnoma spremeni videz. Na strani je lahko poljubno število takih segmentov.

On-Scroll Animated Header Dober vtičnik za implementacijo lepljive navigacijske vrstice. Deluje takole: na samem začetku strani vidimo visoko glavo z logotipom in menijem. Med drsenjem se območje glave z vsemi elementi, vključno z logotipom in navigacijo, gladko zmanjša z uporabo lastnosti in postane ozek trak, prilepljen na vrh zaslona.

Pozdravljeni, dragi bralci spletnega dnevnika. To je bolj opomba zase, da ne pozabim, kaj točno sem naredil, ko bom hotel vrniti vse nazaj. Vse se je začelo, ko je eden od bralcev predlagal pisanje o vtičniku za WordPress, imenovanem Q2W3 Fixed Widget (Sticky Widget), ki lahko naredi kateri koli gradnik v stranski vrstici lebdeč ali, z drugimi besedami, fiksen.

Tisti. Ko se pomikate po strani, boste videli, da se bo glavni del stranske vrstice dvignil, vendar bo pripomoček, ki bo na samem dnu, ostal v območju za ogled, ne glede na to, kako daleč se pomaknete navzdol po besedilu. Takoj bom povedal, kaj objaviti kontekstualno oglaševanje to je prepovedano in se lahko za to kaznuje (kot se je izkazalo v komentarjih - YAN to dovoljuje, Adsense pa prepoveduje).

Vtičnik je odličen, vendar so pripomočki v moji temi onemogočeni, zato sem se odločil to nalogo z uporabo nekaj vrstic kode JavaScript, ki sem jih našel na internetu.

Posledično je moj zgornji meni fiksiran na samem vrhu vidnega polja (pravzaprav je bila za to dovolj samo koda CSS, vendar ne iščemo preprostih načinov) in Spodnji del Stranska vrstica je pritrjena v zgornjem desnem kotu zaslona, ​​ko jo dosežete med premikanjem po strani. Ne vem, ali bo to kaj koristilo, a rešitev je zelo preprosta.

Zakaj bi popravili meni in naredili lebdečo stransko vrstico?

Zakaj popravljati zgornji meni, se sprašujete? No, na splošno je to majhen eksperiment na temo izboljšav. Čisto hipotetično lahko domnevamo, da bi to lahko povzročilo povečanje števila ogledanih strani in časa, ki ga uporabnik preživi na spletnem mestu.

Po drugi strani pa lahko pretirana vsiljivost takšne fiksne plošče povzroči negativno reakcijo bralcev, zato ostaja odprto vprašanje smiselnosti tega ukrepa. Rezultat si boste morali ogledati po enem tednu uporabe – če meni ni več fiksen (pribit na zgornji rob vidnega polja), je bil poskus neuspešen. Za vsak slučaj bom naredil posnetek zaslona, ​​​​kako se je vse skupaj zgodilo.

Lebdeča stranska vrstica v WordPressu je narejena iz nekoliko drugačnega razloga – da pritegne več pozornosti na nekaj. Načeloma lahko tukaj vstavite tako seznam kategorij kot tudi seznam priljubljenih ali nedavnih objav, ki bodo spet poskušale služiti nalogi izboljšanja vedenjskih. Najpogosteje pa je oglaševanje postavljeno v tak plavajoči blok (kontekstualno oglaševanje ni dovoljeno, kot sem že omenil), kar bi čisto hipotetično moralo povečati dohodek spletnega skrbnika. Bomo videli rezultat čez en teden.

Kako popraviti zgornji meni v WordPressu

Na tej strani sem našel rešitev zase - kako popraviti blok ali meni na spletni strani. Za uporabo ta metoda mora biti povezan knjižnica jQuery. Kako to storiti, je bilo podrobno opisano v članku o nalaganju vsebine.

Če se spomnite, morate v članku o optimizaciji hitrosti nalaganja strani poskusiti združiti vse CSS in JS v enega skupnega (v smislu dveh - enega za sloge in drugega za skripte). Pravzaprav sem tako datoteki dodal vrstice kode, ki so navedene spodaj. Čeprav jih lahko dodate neposredno v HTML koda, obdan z oznakami skripta. To lahko na primer storite v predlogi header.php znotraj oznak head.

Zgornji meni lahko popravite tudi z čisti CSS- da nam pomaga. Pravzaprav se tukaj uporablja tudi pozicioniranje s tem Lastnosti CSS, vendar postane tudi mogoče začeti prikazovati fiksni meni ne takoj, ampak nekaj časa po začetku drsenja (na določeni razdalji od vrha).

V mojem primeru je koda za popravljanje zgornjega menija videti takole:

$(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (top< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Naj vas spomnim, da lahko ta del kode prilepite v:

  • Datoteka s pripono .js, ki se nahaja v mapi s temo, ki jo uporabljate (/wp-content/themes/theme). Za vas je primeren le, če je zanj v datoteki header.php zapisana vrstica za nalaganje skupaj s spletnimi stranmi vašega spletnega mesta, kar je lahko videti takole:
  • Za zaključek lahko uporabite samo datoteko header.php to kodo med začetno in zapiralno oznako head in jo zavijete v oznake skripta, na primer takole: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (vrh< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • To kodo lahko zapišete tudi v oznake skripta kjer koli drugje. Glavna stvar je, da se naloži prave strani blog. To lahko na primer storite v footer.php pred končno oznako body.

    • Zdaj pa poglejmo neposredno to kodo. Izkazalo se je, da 10 slikovnih pik od vrha relativno pozicioniranje se nadomesti s fiksnim (glejte članek na zgornji povezavi). Če je potrebno, potem lahko v vrstici z else izberete neničelno vrednost za top, nato pa se bo meni, fiksiran na vrhu, odmaknil od zgornjega roba vidnega polja za dano vrednost slikovnih pik (po mojem mnenju je to nepotrebno).

    Za razliko od originalne kode sem moral dodati tudi širino: "100%", saj bi se drugače velikost menija zmanjšala po širini, kar bi pokvarilo celotno sliko.

    Poglejte, zaradi jasnosti bom navedel kodo Html, s katero je oblikovan zgornji meni v mojem WordPress predloga blog (živi v moji datoteki header.php od ):

    V vaši predlogi bo najverjetneje prikaz elementov menija določen z na primer takšno konstrukcijo (funkcijo), vendar to ni pomembno.