Ritinot lapu, izveidojiet fiksētu izvēlni. Fiksēta izvēlne, ritinot lapu. Kā labot WordPress augšējo izvēlni

Kas arvien biežāk atrodami emuāru un citu resursu lapās. Šādu navigācijas joslu izmantošana ir diezgan pamatota. Viens no galvenajiem šo jQuery spraudņu aktīvās izmantošanas iemesliem ir tas, ka izvēlne vienmēr ir apmeklētājam rokas stiepiena attālumā, pat ja tā atrodas lapas apakšā. Turklāt fiksēta izvēlne aizņem maz vietas un nenovērš uzmanību no galvenā satura. Vispārīgi runājot, fiksēta izvēlne uzlabo vietnes lietojamību.
Esmu izveidojis labāko, manuprāt, bezmaksas jQuery spraudņu kolekciju fiksētas izvēlnes ieviešanai. Es centos nodrošināt, lai katrs spraudnis būtu kaut kādā veidā unikāls, lai jebkuru spraudni no atlases varētu izmantot tieši jūsu projektā. Kolekcijā var atrast gan vienkāršus, gan sarežģītākus spraudņus ar animāciju u.c.
Ja jums ir nepieciešama ļoti vienkārša fiksēta izvēlne, piemēram, kā mēs ieviesām lipīgo paneli ar sociālajām pogām, varat iztikt bez jQuery spraudņiem, jo ​​lapas ielāde ar skriptiem nav īpaši laba, taču par to mēs runāsim turpmākajos rakstos . Abonējiet mūsu kanālu vai lapas, lai nepalaistu garām interesantus materiālus.
Tātad. Šeit ir 6 jQuery spraudņi fiksētas izvēlnes izveidei.

Automātiski paslēpt Sticky HeaderjQuery fiksēto navigācijas spraudni, kas darbojas pēc līdzīga principa kā iepriekš minētais skripts, taču mazāk gluds, lai gan no pirmā acu uzmetiena tas ir nedaudz vieglāk. Diemžēl nevaru teikt, ka navigācija ir pilnībā adaptīva, jo mazos ekrānos izvēlnes vienumi kļūst tikai par cipariem, kas ir ļoti dīvaini.

On Scroll Header EffectsJaudīgs jQuery spraudnis fiksētai navigācijas joslai. Ritinot lapā var iestatīt noteiktus segmentus, kurus sasniedzot panelis transformējas un var pilnībā mainīties izskats. Lapā var būt neierobežots skaits šādu segmentu.

On-Scroll Animated Header Labs spraudnis lipīgas navigācijas joslas ieviešanai. Tas darbojas šādi: pašā lapas sākumā mēs redzam augstu galveni, kurā ir logotips un izvēlne. Ritinot, galvenes apgabals ar visiem elementiem, tostarp logotipu un navigāciju, vienmērīgi samazinās, izmantojot rekvizītus, un kļūst par šauru joslu, kas pielīmēta ekrāna augšdaļā.

Sveiki, dārgie emuāra vietnes lasītāji. Šī ir vairāk piezīme sev, lai neaizmirstu, ko tieši es darīju, kad vēlos visu atgriezt. Viss sākās ar to, ka kāds no lasītājiem ieteica uzrakstīt par WordPress spraudni Q2W3 Fixed Widget (Sticky Widget), kas var padarīt jebkuru sānjoslas logrīku peldošu vai, citiem vārdiem sakot, fiksētu.

Tie. Ritinot lapu, jūs redzēsiet, ka sānjoslas galvenā daļa pacelsies uz augšu, bet logrīks, kas atradīsies pašā apakšā, paliks apskates zonā neatkarīgi no tā, cik tālu jūs virzīsit tekstu uz leju. Es uzreiz pateikšu, ko publicēt kontekstuālā reklāma tas ir aizliegts un par to var sodīt (kā noskaidrojās komentāros - YAN to atļauj, bet Adsense aizliedz to darīt).

Spraudnis ir lielisks, taču manā motīvā logrīki ir atspējoti, tāpēc es nolēmu šo uzdevumu izmantojot dažas JavaScript koda rindiņas, ko atradu internetā.

Rezultātā mana augšējā izvēlne ir fiksēta pašā skata loga augšpusē (patiesībā šim pietika tikai ar CSS kodu, taču mēs nemeklējam vienkāršus veidus), un Apakšējā daļa Sānjosla ir fiksēta ekrāna augšējā labajā stūrī, kad to sasniedzat, ritinot lapu. Es nezinu, vai tas dos kādu labumu, bet risinājums ir patiešām vienkāršs.

Kāpēc labot izvēlni un izveidot peldošu sānjoslu?

Kādēļ labot augšējo izvēlni, jūs jautājat? Nu vispār šis ir neliels eksperiments par uzlabošanas tēmu. Tīri hipotētiski mēs varam pieņemt, ka tas varētu palielināt skatīto lapu skaitu un lietotāja vietnē pavadīto laiku.

No otras puses, šāda fiksēta paneļa pārmērīga uzbāzība var izraisīt lasītāju negatīvu reakciju, tāpēc jautājums par šīs darbības lietderību paliek atklāts. Rezultāts būs jāskatās pēc nedēļas lietošanas – ja izvēlne vairs nav fiksēta (piesprausta pie skata laukuma augšējās malas), tad eksperiments bija neveiksmīgs. Katram gadījumam uztaisīšu ekrānuzņēmumu, kā tas viss notika.

Peldošā sānjosla programmā WordPress ir izveidota nedaudz cita iemesla dēļ - lai kaut kam piesaistītu vairāk uzmanības. Principā šeit var ievietot gan kategoriju sarakstu, gan populāru vai nesenu ierakstu sarakstu, kas atkal mēģinās kalpot uzvedības uzlabošanas uzdevumam. Bet visbiežāk reklāma tiek ievietota tādā peldošā blokā (kontekstuālā reklāma nav atļauta, kā jau minēju), kam tīri hipotētiski vajadzētu palielināt tīmekļa pārziņa ienākumus. Redzēsim rezultātu pēc nedēļas.

Kā labot WordPress augšējo izvēlni

Es atradu sev risinājumu šajā lapā - kā salabot bloku vai izvēlni vietnē. Lietošanai šī metode jābūt savienotam jQuery bibliotēka. Kā to izdarīt, sīki aprakstīts rakstā par satura ielādi.

Ja atceraties, rakstā par lapas ielādes ātruma optimizēšanu jums jāmēģina apvienot visus CSS un JS vienā kopīgā (divu nozīmē - viens stiliem un otrs skriptiem). Tātad patiesībā es šādam failam pievienoju zemāk norādītās koda rindas. Lai gan jūs varat tos pievienot tieši HTML kods, ko ieskauj skripta tagi. Piemēram, to var izdarīt header.php veidnē header tagos.

Varat arī labot augšējo izvēlni, izmantojot tīrs CSS- lai mums palīdzētu. Faktiski, izmantojot šo, šeit tiek izmantota arī pozicionēšana CSS īpašības, taču kļūst iespējams arī sākt rādīt fiksētu izvēlni nevis uzreiz, bet kādu laiku pēc ritināšanas sākuma (noteiktā attālumā no augšas).

Manā gadījumā augšējās izvēlnes labošanas kods izskatās šādi:

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

Atgādināšu, ka varat ielīmēt šo koda daļu:

  • Fails ar paplašinājumu .js, kas atrodas mapē ar jūsu izmantoto motīvu (/wp-content/themes/theme). Tas ir piemērots jums tikai tad, ja failā header.php ir ierakstīta rindiņa, lai to ielādētu kopā ar jūsu vietnes tīmekļa lapām, kas var izskatīties šādi:
  • Varat izmantot pašu header.php failu, noslēdzot šo kodu starp sākuma un aizvēršanas tagiem head un iesaiņot to skripta tagos, piemēram: $(function())( $(window).scroll(function() ( var top = $(document).scrollTop(); if (tops< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Varat arī ierakstīt šo kodu skripta tagos jebkurā citā vietā. Galvenais, lai tas ielādējas nepieciešamās lapas emuārs. Piemēram, to var izdarīt failā footer.php pirms beigu body tag.

    • Tagad apskatīsim tieši šo kodu. Izrādās, ka 10 pikseļi no augšas relatīvā pozicionēšana tiek aizstāts ar fiksētu (skatiet rakstu tieši iepriekš norādītajā saitē). Ja nepieciešams, rindā ar citu kā augšējo vērtību varat atlasīt nulli, kas nav nulles, un tad augšpusē fiksētā izvēlne attālināsies no skata loga augšējās malas par dotā vērtība pikseļi (manuprāt, tas ir lieki).

    Atšķirībā no oriģinālā koda man bija jāpievieno arī platums: "100%, jo pretējā gadījumā izvēlnes izmērs samazinātos platumā, kas sabojātu visu attēlu.

    Paskaties, skaidrības labad es norādīšu Html kodu, ar kuru manā tiek veidota augšējā izvēlne WordPress veidne emuārs (tas atrodas manā header.php failā no ):

    Jūsu veidnē, visticamāk, izvēlnes vienumu attēlojums tiks norādīts, izmantojot, piemēram, šādu konstrukciju (funkciju), taču tas nav galvenais.