Papildiniai, skirti sukurti pranešimų skydelį „WordPress“. Įskiepiai, skirti sukurti pranešimų skydelį „WordPress bigSlide“ – skaidrių naršymo skydelis „Jquery“.

Naudodami papildinį – WPFront pranešimų juostą, savo svetainėje galite pridėti pranešimų juostą „WordPress“ svetainės viršuje arba apačioje. Skydelis gali rodyti bet kokį tekstą ir mygtuką su nuoroda į bet kurį puslapį, kurį galite įtraukti HTML kodą. Galite tinkinti pranešimų skydelio spalvas, galite pasirinkti skydelio vietą svetainės viršuje arba apačioje. Galite užrakinti skydelį, kad slenkant puslapiu skydelis visada būtų matomas ekrane. Galite pasirinkti, kuriuose puslapiuose skydelis bus rodomas, kuriuose ne ir pan.

Papildinį galite įdiegti tiesiai iš „WordPress“ administratoriaus skydelio. Eikite į skirtuką: Plugins – Add new, įveskite įskiepio pavadinimą paieškos formoje, paspauskite Enter, įdiekite ir aktyvuokite papildinį.

Įdiegę ir suaktyvinę papildinį, eikite į puslapį: WPFront – Pranešimų juosta, kad sukonfigūruotumėte papildinį.

Ekranas

– Įjungta, pažymėkite langelį čia, kad įjungtumėte pranešimų skydelį.

– Padėtis, pasirinkite, kur bus rodomas skydelis, viršuje – viršuje, apačioje – apačioje.

– Fiksuota vietoje, jei pažymėsite šį langelį, skydelis visada bus matomas ekrane, net ir slenkant puslapiu.

– Rodyti slinktyje, jei pažymėsite šį langelį, skydelis pasirodys, kai slinksite puslapiu.

– Slinkties poslinkis, čia galite nurodyti, kiek pikselių puslapis turi būti slinktas, kol pasirodys pranešimų skydelis.

– Bar Height, čia galite nurodyti juostos aukštį pikseliais.

– Position Offset, čia galite nustatyti atstumą nuo svetainės viršaus iki skydelio.

– Ekranas po, galite nustatyti laiką, po kurio skydelis pasirodys, neveikia funkcijai – Rodyti slinkties metu.

– Animacijos trukmė, galite nustatyti animacijos trukmę, kai skydelis perkeliamas į ekraną.

– Rodyti uždarymo mygtuką, pažymėkite langelį, kad būtų rodomas mygtukas su kryželiu, kad uždarytumėte skydelį.

– Auto Close After, galite nurodyti po kiek sekundžių skydelis užsidarys automatiškai, neveikia funkcijai – Display on Scroll.

– Rodyti šešėlį, rodyti skydelio šešėlį.

– Display Reopen Button, jei pažymėsite langelį, tada uždarius skydelį ekrano kampe bus rodomas mygtukas skydeliui atidaryti.

– Laikyti uždarytą, jei pažymėsite langelį, uždarius skydelį viename puslapyje, skydelis nebebus rodomas kituose puslapiuose.

– Laikyti uždarytą, čia galite nurodyti, kiek dienų skydelis nebus rodomas vartotojui, kuris uždarė skydelį.

Turinys

– Pranešimo tekstas, įveskite čia tekstą, kuris bus rodomas pranešime, galite pridėti HTML kodą.

– Apdorokite trumpąjį kodą, pažymėkite langelį, kad galėtumėte pridėti trumpuosius kodus prie pranešimų.

– Rodyti mygtuką, pažymėkite langelį, kad mygtukas būtų rodomas skydelyje.

– Mygtuko tekstas, čia įveskite mygtuko tekstą.

– Mygtuko veiksmas, čia įveskite mygtuko nuorodą. Atidaryti URL naujame skirtuke/lange – nuoroda atsidarys naujame lange. Nereikia sekti nuorodos – nuoroda nebus indeksuojama.

– Uždaryti juostą spustelėjus mygtuką, uždaryti juostą paspausdami mygtuką.

Filtras

– Pradėjimo data ir laikas, galite nurodyti datą ir laiką, kada skydelis bus rodomas.

– Pabaigos data ir laikas, galite nurodyti datą ir laiką, kada skydelis užsidaro.

– Rodyti puslapiuose, pasirinkite, kuriuose puslapiuose bus rodomas skydelis. Visi puslapiai – visuose puslapiuose. Įtraukti į kitus puslapius – patikrinkite puslapius, kuriuose bus rodomas skydelis. Išskirti šiuose puslapiuose – išskirti puslapius.

– Display for User Roles, čia galite pasirinkti, kuriems naudotojų vaidmenims bus rodomas skydelis. Visi vartotojai – visiems, Visi prisijungę vartotojai – tik įgaliotiems naudotojams, Svečiai – tik svečiams, Sekantys naudotojų vaidmenys – patikrinkite vaidmenis.

Spalva

– Juostos spalva, pasirinkite juostos spalvas.

– Pranešimo teksto spalva, skydelyje nurodykite teksto spalvą.

– Mygtuko spalva, pasirinkite mygtuko spalvas, galite nurodyti dvi spalvas, kad būtų rodomas gradientas.

– Mygtuko teksto spalva, mygtuko teksto spalva.

– Iš naujo atidaryti mygtuko spalva, mygtuko spalva, skirta atidaryti skydelį.

– Uždaryti mygtuko spalva, pasirinkite skydelio uždarymo mygtuko spalvas.

– Pasirinktinis CSS, galite nustatyti savo skydelio CSS stilius, bet tai nėra būtina.

Pabaigoje išsaugokite pakeitimus.

Pranešimų juosta jūsų „WordPress“ svetainės viršuje arba apačioje atnaujinta: 2018 m. liepos 25 d.: Ilja Žuravlevas

Sveiki, mieli tinklaraščio svetainės skaitytojai. Šiandien noriu pakalbėti apie gana funkcionalų ir patogų upPrev įskiepį, kuris vienu metu gali įgyvendinti kelių tipų puslapių susiejimą. Jo darbą galite stebėti (bent jau šio straipsnio rašymo metu) kiekvieno straipsnio puslapio apačioje – dešinėje pasirodo iššokantis skydelis su panašių medžiagų sąrašu.

Papildinys gali rodyti ne tik panašią medžiagą, bet ir ankstesnius straipsnius iš tos pačios kategorijos ar žymų archyvo (apie tai mes išsamiai kalbėjome aukščiau esančiame straipsnyje ir kurio praktinį įgyvendinimą aprašiau), ankstesnę medžiagą viso tinklaraščio formatu, taip pat atsitiktine tvarka paimtus leidinius. Be to, visa tai gali būti pagardinta miniatiūromis, jei jas sukursite rašydami įrašus.

Kokį vaidmenį nuorodų teikimas dabar vaidina reklamuojant svetainę?

Apskritai svetainės optimizavimas tolimesniam sėkmingam jos reklamavimui yra užduotis numeris vienas (antroji – atgalinių nuorodų gavimas). Vidiniai veiksniai gali blokuoti ir sumažinti viso kito įtaką. Kita vertus, tai neįmanoma (ypač naudojant raktinius žodžius turinyje ir vidinių nuorodų inkarus).

Šiais laikais vadovaujamasi integruotu požiūriu į reklamą, o susiejimas jame užima gana reikšmingą vietą. Pastaruoju metu tapo madinga naudoti infografiką, norint vizualiai pavaizduoti bet ką. SEO tema galite rasti daug panašių schemų, pavyzdžiui, Seopro straipsnyje apie tai, kaip reklamuoti svetainę. Deja, tokių šedevrų kurti dar neprisiruošiau, bet remdamasis jais leisiu nepilti nereikalingo vandens.

Kurią susiejimo schemą pasirinkti? Gana sunkus klausimas, nes daugelis anksčiau gerai veikusių schemų (visi tas pats liūdnai pagarsėjęs „žiedas“, nuorodas į jų įgyvendinimo būdus, kuriuos pateikiau aukščiau) nebeduoda tokių fenomenalių rezultatų, kurie buvo pastebėti prieš dešimt metų. Paieškos sistemos taip pat mokosi ir stengiasi neatsižvelgti į tai, kas, jų požiūriu, yra akivaizdi apgaulė.

Žiedų serijos susiejimas, remiantis Peydrank teorija, turėtų rimtai padidinti svetainės puslapių (), kurie yra susiję su šiuo žiedu, statinį svorį.

Tačiau tai ne visada veikia praktikoje. Gali būti, kad kai atskiri puslapiai iškrenta iš indekso, žiedas nutrūksta arba gali būti, kad siekiant sumažinti antkainius, paieška įvedė rimtą mažinimo koeficientą į klasikinę būsenos svorio skaičiavimo formulę.

Svetainių puslapių susiejimas turi dar vieną užduotį, kuria siekiama jau ne įtikti „Yandex“ ar „Google“, o į lankytojui patiks. Akivaizdu, kad vieno straipsnio jam nepakaks, kad išbandytų jūsų tinklaraštį – būtinai turite pakviesti jį eiti kur nors kitur, kad sudomintumėte, išlaikytumėte ir, galbūt, taptumėte savo prenumeratoriumi.

Taigi susiejimas taip pat turi įtakos elgesio veiksniai, į ką paieškoje taip pat atsižvelgiama ir kasmet vis didesniu mastu. Beveik visi žiniatinklio valdytojai tai supranta ir prideda prie svetainės blokus su panašia medžiaga, skaitomiausiais leidiniais arba tos pačios kategorijos straipsniais. Tikriausiai yra ir kitų temos variantų.

Natūralu, kad taip pat yra daugybė vidinio susiejimo įgyvendinimo galimybių. Galima apsieiti net ir be įskiepių (pavyzdį galite pamatyti straipsnyje), bet nemažai jų parašyta susiejimui. Sunkiausias dalykas yra pasirinkti variantą, kuris puikiai tinka jūsų tinklaraščiui.

Aš pats išbandžiau daug jų ir net parašiau atsiliepimus apie kai kuriuos iš jų (). Tiesą sakant, minėtas papildinys yra vienas geriausių skaičiuojant susijusius įrašus ir įtraukiant juos į tinklaraščio puslapius.

Tačiau jo duomenis taip pat gali naudoti kiti „WordPress“ plėtiniai, kurdami juos spalvingesnius ar pretenzingesnius. Tame pačiame straipsnyje apie YARP pateikiau pavyzdį, kaip jo duomenis naudojo Related Posts Slider įskiepis, kuris leido jam rodyti panašius įrašus tokia forma:

Na, arba tai:

Paskambino mūsų šiandienos herojus į viršųAnkst taip pat žino, kaip paimti informaciją iš „Yet Another Related Posts Plugin“ duomenų bazės ir elgiasi teisingai, nes nereikia kiekvieną kartą išradinėti dviračio. Tiesą sakant, pereikime prie šio inžinerijos stebuklo galimybių apibūdinimo.

Susiejimo parinktys naudojant „upPrev“ papildinį

Šių stilių neliečiau, nes pasukau kitu keliu (ne pačiu tiesiausiu), kurį aprašysiu toliau tekste. Tada eikite į antrą skirtuką:

Pasirinkite pranešimų, į kuriuos šis papildinys generuos nuorodas, skaičių. Bet šiek tiek žemiau, mes tiesiog pasirinkite mūsų svetainės nuorodų tipą. Panašių įrašų parinktį pasirinkau naudodamas „Yet Another Related Posts“ papildinio bazę (jis turi būti iš anksto įdiegtas), tačiau galite konfigūruoti žiedo tipo susiejimą pasirinkdami antrą arba trečią parinktį, taip pat didelio žiedo susiejimą pasirinkdami Pirmas .

Šį reikalą ketinau organizuoti tik dėl postų, o tai rodo varnelė atitinkamame lauke. Be įrašo pavadinimo, šiame skydelyje taip pat gali būti rodomi keli žodžiai (jų numeris nustatytas pačiame apačioje) nuo įrašo pradžios arba citatos srities, jei ją užpildysite. Man tai atrodė nereikalinga.

Trečiasis skirtukas naudojamas nustatant šio skydelio nuorodų paspaudimų skaičiaus stebėjimą, kurio aš nenaudojau. Tačiau ketvirtame skirtuke vis tiek suaktyvinau talpyklą. Penktame skirtuke uždraudžiau rodyti skydelį mobiliuosiuose telefonuose, bet neprieštaravau, kad jis būtų rodomas planšetiniuose kompiuteriuose:

Na, tai viskas, „upPrev“ baigė nustatymus, bet aš jau pakeičiau skydelio išvaizdą „Yet Another Related Posts Plugin“ nustatymuose.

Slankiojo skydelio turinio išvaizdos pritaikymas

Ten pasirinkau šablono failą, kuris bus atsakingas už panašių įrašų rodymą (žr. aukščiau esančią nuorodą, kad sužinotumėte darbo su šiuo plėtiniu esmę ir specifiką):

Tai. Dabar įskiepio upPrev (iššokančiajame skydelyje) rodomo panašių įrašų sąrašo išvaizdą lemia kodas, įrašytas mano yarpp-template-list.php faile iš aplanko su mano tema (). Jei jūsų tinklaraštis generuoja įrašų miniatiūras, prasminga pasirinkti šabloną iš „Yet Another Related Posts Plugin“ arsenalo su jų pagalba.

Šio failo kodas yra:

Tai ne reklama, o panašūs straipsniai iš tos pačios svetainės (nuorodos atsidaro naujame lange):
    have_posts()): $postsArray = masyvas(); while ($susijusi_klausa->turėti_posts()) : $susijusi_klausa->postas(); $postsArray = "
  • ".get_the_title()."
  • "; endwhile; echo implode(" "."\n",$postsArray); // išspausdinti susijusių elementų sąrašą, atskirtą kableliais else:?>

Nėra susijusių įrašų.

Kaip matote, čia yra slankiojo lizdo antraštė, todėl turėsite konvertuoti (jei reikia) šį failą į UTF-8 koduotę be BOM, kad išvengtumėte crack(). Nežinau kaip jūs, bet aš ilgą laiką turiu pagrindinį redaktorių Notepad++ () ir joje ši konversija atliekama taip:

Akivaizdu, kad šis kodas generuoja tik banalų HTML sąrašą (), o už išvaizdą atsakingos CSS savybės, parašytos stiliaus faile kode esančioms klasėms. Mano atveju šie stiliai atrodo taip:

A.oy (spalva: #333;šriftas:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5 tšk.; paraštė: 5 tšk. 0; kraštinė: taškinė 2 piks. #ccc;) li.eto:hover (teksto dekoravimas: pabrauktas;) div.oyy (paraštė: 0 0 0 0;padding: 5px 0;šriftas: normalus 17 piks. "Trebuchet" MS", Verdana, Arial;spalva:#666;)

Lampochka klasė prideda žalių varnelių, kurios mano CSS kode nustatomos naudojant base64 kodą (šį kodą kažkur nukopijavau). Jei susidomėjote, pažiūrėkite į mano style.css. Gerai, dabar viskas. Jei ką nors pamiršai, klausk. Tiesa, šią susiejimo parinktį sukūriau prieš mėnesį ir per tą laiką kažkas jau dingo iš galvos.

Sėkmės tau! Greitai pasimatysime tinklaraščio svetainės puslapiuose

Jums gali būti įdomu

Kaip pašalinti skaidrų pikselį http://yarpp.org/pixels iš „Yet Another Related Posts“ papildinio ir pakeisti užrašą Panašios medžiagos
Susijusių įrašų sąrašo kūrimas „WordPress“ (su miniatiūromis) naudojant „Related Posts“ papildinį, skirtą vidiniam susiejimui
Kaip pagerinti svetainės elgsenos statistiką naudojant „WordPress“ skirtus „Yet Another Related Posts“ ir „Related Posts“ slankiklio papildinius
Paprasti skaitikliai ir kategorijų bei puslapių piktogramos – gražūs RSS ir Twitter skaitikliai, taip pat kategorijų ir puslapių piktogramos „WordPress“
„WordPress“ papildiniai mano tinklaraštyje (svetainėje) Slankikliai ir skaidrių demonstracijos jūsų svetainei – kokios yra parinktys ir kaip naudoti „jQuery Slider“ scenarijus
Breadcrumb „WordPress“ naudojant „Breadcrumb NavXT“ papildinį (sustiprinimas)
Atminties sąnaudų mažinimas „WordPress“ kuriant puslapius – „WPLANG Lite“ papildinys, skirtas pakeisti lokalizacijos failą
WP-PageNavi – „WordPress“ tinklaraščio puslapių naršymas – diegimas, konfigūravimas ir puslapių išvaizdos keitimas
Sudarykite tai kalendoriuje! - „WordPress“ įvykių kalendorius
Laiškai nesiunčiami iš „WordPress“ ir neveikia vaizdo redaktorius – sprendimas naudojant „Configure SMTP“ ir „Post Editor Buttons“ papildinius

Tikrai dažnai svetainės puslapiuose susidūrėte su įvairių tipų ir vietovių ištraukiamomis plokštėmis, kurios kalba viršuje, apačioje, dešinėje arba kairėje visiškai automatiškai, tam tikru laiko intervalu arba aktyvuojamos spustelėjus. Paprastai tokiose plokštėse yra tam tikros papildomos informacijos, kai kurios svarbios, o kai kurios ne tokios svarbios, kuri kol kas yra paslėpta nuo vartotojo akių. Pavyzdžiui, prenumeratos formos, socialinių tinklų valdikliai, nuorodos, žymos, kontaktinė informacija ir t.t. ir t.t., trumpai tariant, bet kas.
Yra daugybė paruoštų sprendimų, kaip įdiegti „Javascript“ slankiojančias plokštes, įvairių TVS modulių ir įskiepių, atskirų „jQuery“ įskiepių, tačiau labai nedaugelis, kurie patraukė mano dėmesį, buvo visiškai veikiantys gryno CSS metodai.

Jau seniai norėjau ką nors panašaus padaryti, paslėptų žymimųjų langelių naudojimo mechanizmas yra gerai žinomas ir suprantamas, bet kažkaip taip ir nesupratau. Taigi, aptikęs vieną dulkėtuose „CodePen“ sandėliuose, nusprendžiau paeksperimentuoti ir sukurti savo ištraukiamos viršutinės plokštės versiją gryno CSS formatu, gana veikiančią, šiek tiek modifikuotą ir pritaikytą mūsų broliui, ir taip nutiko)) .

Pažiūrėjome į pavyzdį, palyginome jį su originalu, o dabar, kam to reikia, kartu išsiaiškinkime, kaip visa tai veikia. Dar kartą primenu, kad jokie js, tik nesugadintas html ir css „magija“ atliks visą darbą.

HTML išdėstymas

Jį sudaro trys pagrindiniai elementai: pagrindinis konteineris, blokas su turiniu ir mygtukas skydeliui atidaryti/uždaryti.

Skelbkite čia bet kokį turinį.....

Kaip matote, skydelio dizaine yra type=" " vėliavėlė, kuri pagal numatytuosius nustatymus yra paslėpta ir neaktyvi. Naudojant žymą

o suaktyvinus slankiojantį skydelį, turinio blokas ir mygtukas nustumiami žemyn atstumu, atitinkančiu skydelio aukštį.

Dabar sukurkime savo slankiojančio skydelio stilius, pirmiausia nustatykite pagrindinio konteinerio matmenis, nustatykite fono spalvą ir pradinę vietą. CSS sukursime class.top-panel, kuriame surašysime visas mums reikalingas savybes.
Mūsų skydelis yra ištraukiamas, tai reiškia, kad turime jį paslėpti, tai daroma labai paprastai. Nustatyti fiksuotą padėties padėtį: fiksuota; , ištempti iki viso puslapio pločio plotis: 100%; , nenurodome skydelio aukščio (aukštis:), tokiu atveju skydelis automatiškai prisitaikys prie turinio dydžio, o naudojant transformaciją: translateY(-100%); , stumkite skydelį už viršutinio puslapio krašto.

. viršus- skydelis (fonas: #39464e; padėtis: fiksuota; viršuje: 0 ; plotis: 100%; paminkštinimas: 0 ; - webkit- box- dydis: border- box; - moz- box- dydis: border-box; box- dydis: border-box - webkit- transformate: translateY(- 100% ) ;

Viršutinis skydelis (fonas: #39464e; padėtis: fiksuota; viršuje: 0; plotis: 100%; pamušalas: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- dydis: border-box; -webkit-transform: translateY(-100%) -moz-transform: translateY(-100%);

Skydelio pranešimų blokas yra pagrindinio konteinerio viduje ir jam priskiriama konkreti class="message" , būtent jame nurodome visų elementų, esančių šios pusės viduje, savybes, spalvą ir šriftų šeimą, vaizdo dydžius ir pan. .
Žinoma, jūs galite lengvai apsieiti be šio papildomo bloko, įdėdami pranešimą tiesiai į pagrindinį konteinerį, tačiau tai praranda galimų skydelio nustatymų lankstumą.
Pranešimas rodomas griežtai centre ir ištemptas iki nurodyto pločio max-width: 980px; , vertė yra savavališka, galite pasirinkti visiškai skirtingus dydžius.

/* Pranešimų blokas */ .message ( spalva: #fff; šrifto svoris: 300; padėtis: santykinis; užpildymas: 2 em; paraštė: 0 automatinis; maksimalus plotis: 980 pikselių ) /* 1 lygio antraštė */ .message h1 ( spalva: #fff ) /* 2 lygio antraštė */ .message h2 ( spalva: #888 )

Toliau apibrėžsime visus būtinus skydelio jungiklio stilius. Pirmiausia paslėpkime tipo="checkbox" vėliavėlę nuo naudotojų akių, be didesnių rūpesčių html žymoje Parašykime paslėptą atributą, kuris lemia, ar objektas turi būti rodomas naršyklės lange, ar ne.

Atidaryta (pozicija: absoliuti; klipas: rect(0 0 0 0); neskaidrumas: 0; )

Tegu

/* Skydelio jungiklis */ etiketė. btn ( ekranas: blokas; padėtis: absoliuti; dešinė: 25 piks.; viršuje: 100 %; /*apačioje: -35 piks.;*/ žymeklis: žymeklis; fonas: #2bbbad; kraštinės spindulys: 0 0 3 piks. 3 piks.; užpildymas: 8 piks. 16 piks. spalva: #fff; teksto lygiavimas: centre - 0, 0, 0,16, 0 2px 0,12; z indeksas: 9999) /* Įjungti pelės žymeklį */ etiketė. btn: hover ( - webkit - perėjimas: 0, 35 s; - moz - perėjimas: 0, 35 s; perėjimas: 0, 35 s; langelis - šešėlis: 0 5 piks. 11 piks. 0 rgba(0, 0, 0, 0,18) , 0 4 piks. 15 piks. 0 rgba(0, 0, 0, 0,15)) /* Jungiklio rodyklė žemyn */ etiketė. btn: after ( turinys: "\f078" ; šriftas: normalus 18px/ 1 FontAwesome; teksto dekoravimas: paveldėti )

/* Skydelio jungiklis */ label.btn ( ekranas: blokas; padėtis: absoliutus; dešinė: 25 piks.; viršuje: 100%; /*apačioje: -35 piks.;*/ žymeklis: rodyklė; fonas: #2bbbad; kraštinės spindulys: 0 0 3 pikselių 3 pikselių spalva: #fff , 0,12); z-index: 9999 ) /* Užvedimo perjungimas */ label.btn:hover ( - webkit-transition: 0,35s; -moz-transition: 0,35s; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0,18), 0 4 pikselių 15 pikselių 0 rgba(0, 0, 0 , 0,15) ) /* Rodyklė žemyn */ label.btn:after ( turinys: "\f078"; šriftas: įprastas 18 pikselių/1 FontAwesome; teksto dekoravimas: paveldėti )

Perjungimo rodyklės atitinkamai paimtos iš FontAwesome šrifto piktogramos paketo, šio rinkinio stiliaus failas pirmiausia turi būti prijungtas prie puslapio:

< link href= „https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css“ rel="stiliaus lapas" >

Galite naudoti kitokio tipo jungiklį, pvz., atitinkantį tekstą arba html simbolį.
Pagal numatytuosius nustatymus aš apibrėžiau tris jungiklio būsenas: kai skydelis uždarytas – rodyklė žemyn, kai skydelis atidarytas – rodyklė aukštyn ir, žinoma, nedidelis užvedimo efektas užvedus.

Suaktyviname savo skydelį ir keičiame jungiklio būseną naudodami pseudo-class:checked .
Naudodamas langelio šešėlio savybę, prie apatinio aktyvaus skydelio krašto pridėjau šviesų šešėlį, o naudodamas perėjimą nustatiau paprastą perėjimo efektą tarp dviejų skydelio būsenų (atviros ir uždarytos).

. atidaryti: pažymėta ~ . viršutinis skydelis ( box- shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; - webkit- transform: translateY (0 ) - transformuoti: translateY(0) ; - webkit - perėjimas: 0. 35s; atidaryti: ne(: pažymėta) ~ . viršutinis skydelis (- webkit- perėjimas: 0,35s; - moz- perėjimas: 0,35s; perėjimas: 0,35s) /* Paspaudus pakeisti spalvą */. atidaryti: pažymėta ~ . viršutinis skydelis > etiketė. btn (fonas: #dd6149) /* Perjungti rodyklę aukštyn*/. atidaryti: pažymėta ~ . viršutinis skydelis > etiketė. btn: after ( turinys: "\f077" ; šriftas: normalus 18px/ 1 FontAwesome )

Atidaryti: pažymėta ~ .top-panel ( box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateY( 0); -moz-transform: translateY(0); -webkit-transition: 0.35s ) .open:not(:checked) ~ .top-panel ( -webkit-transition: 0.35s; -perėjimas: 0,35 sek. .top-panel > label.btn:after ( turinys: "\f077"; šriftas: normalus 18px/1 FontAwesome )

Norėdami pakeisti šrifto dydžius žiūrint skirtinguose vartotojo įrenginių ekranuose, naudojau @media medijos užklausas. Atsižvelgiant į šiuolaikines realijas, manau, visai nėra nereikalinga pridėti:

Tik @medijos ekranas ir (maks. plotis: 400 piks.) (tik korpusas (šrifto dydis: 90 %)) @medijos tik ekranas ir (maksimalus plotis: 800 piks.) (tik korpusas (šrifto dydis: 100 %)) @medijos tik ekranas ir (min. plotis: 1100 piks.) ( turinys ( šrifto dydis: 120 %) )

@medijos tik ekranas ir (maks. plotis: 400 piks.) (tik korpusas (šrifto dydis: 90 %) ) @medijos tik ekranas ir (maksimalus plotis: 800 piks.) ( korpusas (šrifto dydis: 100 %) ) @medijos tik ekranas ir (min. plotis: 1100 piks.) ( turinys ( šrifto dydis: 120 %) )

Tai turbūt viskas! Iš viršaus išstumiamas skydelis yra paruoštas naudoti, belieka jį užpildyti turiniu. Dar kartą pažiūrėkite į gyvą pavyzdį, atsisiųskite archyvą su šaltinio kodu, drąsiai eksperimentuokite su įvairiais parametrais ir kurkite, kurkite, kurkite...

Su visa pagarba, Andrew

Neseniai vienas iš mūsų skaitytojų paklausė, kaip pakeisti jo svetainės naršymo meniu „jQuery“ iššokančia meniu juosta. Toks skydelis gali žymiai pagerinti mobiliųjų svetainių versijų naudojimą. Šiame straipsnyje parodysime, kaip pridėti stumdomą meniu juostą prie „WordPress“ temų.

Pastaba: šiame straipsnyje pateikiamos vidutinės HTML ir CSS žinios.

Standartinio meniu pakeitimas stumdomu skydeliu „WordPress“.

Tikslas yra parodyti slankiojančią meniu juostą vartotojams, kurių ekrano skiriamoji geba yra žema, išlaikant standartinį mūsų temos meniu, kad darbalaukio naudotojai galėtų matyti visą meniu versiją. Prieš pradedant, svarbu suprasti, kad yra daug skirtingų „WordPress“ temų, todėl turėsite koreguoti CSS stilius, atsižvelgdami į savo dizainą.

Pirmiausia turime atidaryti teksto rengyklę, pvz., Notepad, ir sukurti naują failą. Nukopijuokite ir įklijuokite į jį šį kodą:

(function($) ( $("#toggle").toggle(function() ( $("#popout").animate(( left: 0 ), "slow", function() ( $("#toggle" ).html(" "); )); ), function() ( $("#popout").animate(( kairėje: -250), "lėtas", function() ( $("#toggle").html(" "); )); )); ))(jQuery);

Pakeiskite example.comį savo svetainės domeno pavadinimą, taip pat pakeisti tavo temaį tikrąjį dabartinės temos aplanką. Išsaugokite failą pavadinimu slidepanel.js kompiuteryje. Šis kodas naudoja jQuery, kad perjungtų stumdomą meniu juostą. Tai taip pat suaktyvina perjungimo efektą.

Atidarykite FTP klientą („Filezilla“ arba „Total Commander“) ir prisijunkite prie savo svetainės. Tada eikite į savo temos katalogą ir, jei jame jau yra aplankas js, tada atidarykite. Jei jūsų temoje tokio katalogo nėra, sukurkite jį ir įkelkite failą slidepanel.js į vidų.

Kitas žingsnis – sukurti arba rasti meniu piktogramą. Tam dažniausiai naudojama piktograma su trimis juostomis. Galite sukurti jį bet kuriame grafikos rengyklėje (pavyzdžiui, „Photoshop“) arba rasti vieną iš daugelio esamų „Google“. Šiame pavyzdyje piktogramai naudosime 27 x 23 pikselių dydį. Sukūrę jį pervardykite į menu.png ir įkelkite į vaizdų aplanką temos kataloge.

Kitas žingsnis skirtas slankiojančiai meniu juostai. Jums tereikia nukopijuoti ir įklijuoti šį kodą į failą funkcijos.php Temos:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", true);

Dabar, kai visi parengiamieji darbai baigti, turite pakeisti numatytąjį temos meniu. Paprastai daugumos temų faile rodomas naršymo meniu header.php Temos. Atidarymas header.php ir raskite eilutę, panašią į šią:

"pirminis", "meniu_klasė" => "nav-menu")); ?>

Iššūkis yra apvynioti temos meniu HTML kodu, kad būtų rodoma slankioji meniu juosta mažuose ekranuose. Mes jį suvyniosime

"pirminis", "meniu_klasė" => "nav-menu")); ?>

Pakeiskite example.com savo domeno pavadinimu, o temą – temos aplanku. Išsaugokite pakeitimus.

Paskutinis veiksmas yra naudoti CSS, kad paslėptumėte meniu piktogramą vartotojams, turintiems didelius ekranus, ir parodytumėte ją tiems, kurių ekranai yra maži. Taip pat turime pakoreguoti meniu piktogramos padėtį ir slankiojančio skydelio išvaizdą. Nukopijuokite ir įklijuokite šį CSS kodą į temos stiliaus lapą.

@medijos ekranas ir (minimalus plotis: 769 pikseliai) ( #toggle ( display:none; ) ) @medijos ekranas ir (maksimalus plotis: 768 pikseliai) ( #popout ( padėtis: fiksuota; aukštis: 100 %; plotis: 250 pikselių; fonas : rgb(25, 25, color: white: -250px; plotis: 24px); :hover (fonas:#CCC; ) .nav-menu li a (spalva:#FFF; teksto dekoravimas:nėra; plotis:100%; ) )

Atminkite, kad jūsų temos meniu gali būti naudojamos skirtingos CSS klasės ir jos gali prieštarauti aukščiau pateiktoms klasėms. Šią problemą galite išspręsti naudodami „Chrome“ arba „Firefox“ inspektorių, kad sužinotumėte, kurios klasės prieštarauja jūsų klasėms. Taip pat nepamirškite, kad galite laisvai pritaikyti skydelio išvaizdą, kad jis atitiktų svetainės dizainą.

Pranešimų skydeliai– itin efektyvi priemonė, skatinanti vartotoją pereiti į reikiamą puslapį. Be to, jie padeda rodyti svarbią informaciją, nes visada patraukia vartotojo dėmesį. Kai kuriuose skydeliuose yra duomenų įvedimo formos ir jos gali būti naudojamos, pavyzdžiui, tvarkyti adresatų sąrašų prenumeratą.

Internetinėse parduotuvėse pranešimų skydeliai aktyviai naudojami informuoti lankytojus apie akcijas ir nuolaidas, todėl yra galingas pardavimų didinimo mechanizmas.

Šioje apžvalgoje kalbėsiu tik apie kai kuriuos funkcionaliausius ir, mano nuomone, patraukliausius įskiepius, leidžiančius kurti tokias plokštes platformoje esančios svetainės ar tinklaraščio puslapiuose. Kiekvienas iš jų turi savų privalumų, daugybę funkcijų ir galimybę išvaizdą pritaikyti prie Jūsų svetainės stiliaus ir dizaino. Neabejoju, kad šios apžvalgos dėka galėsite pasirinkti labiausiai jūsų poreikius atitinkantį papildinį.

Pasirinktiniai pranešimai

Aukštos kokybės aukščiausios kokybės papildinys, turintis visas reikiamas funkcijas, būdingas tokio lygio papildiniui.

Pranešimų juostoje gali būti paprasto teksto, elektroninio pašto registracijos formą arba svetainėje, socialiniuose tinkluose ir atgalinės atskaitos laikmačiu.

Ir visa tai yra įdėta į prisitaikančius konteinerius ir bus teisingai rodoma bet kuriame ekrane. Be to, nustatymų skydelis leidžia beveik be jokių apribojimų valdyti padėtį puslapyje ir spalvų schemą.

Kaina: 29 USD

„BugMeBar“ „WordPress“ papildinys

Paprastas, bet akį traukiantis skydelis su labai gražiais ir akį traukiančiais spalvų efektais. Jį galima įdėti bet kurioje puslapio vietoje, be to, jis gali nustatyti slapukus ir būti nerodomas vėlesnio apsilankymo puslapyje, jei vartotojas staiga nebenorės jo matyti.

Kitos savybės, į kurias verta atkreipti dėmesį:

  • Nurodykite puslapius, kuriuose skydelis bus rodomas ir kuriuose ne.
  • Slapukų galiojimo laikotarpio nustatymas.
  • Visiška išvaizdos kontrolė, įskaitant spalvų pasirinkimą, skaidrumą ir kt.
  • Galimybė perkelti fiksuotas antraštes išlaikant išdėstymo vientisumą.
  • Galimybė įjungti arba išjungti tranzityvumą ir animaciją
Kaina: 12 USD

Sveiki Baras

Vienas iš populiariausių „Wordpress“ pranešimų juostos. Ir tada, Laisvas, nors savo funkcionalumu jis niekuo nenusileidžia aukščiausios kokybės kolegoms.
Norėdami naudoti „Hello“ juostą, tiesiog eikite į papildinį ir įveskite savo tinklaraščio URL. Tada būsite nukreipti į nustatymų skydelį, kuriame galėsite konfigūruoti pranešimų vietą ir išvaizdą. Be to, nustatymų skydelyje yra peržiūros funkcija, todėl galite greitai suteikti savo pranešimams norimą išvaizdą.
Atlikę nustatymus gausite kodo fragmentą, kurį turėsite įklijuoti tiesiai į svetainės puslapį. Jei nesijaučiate pakankamai kvalifikuotas šiai operacijai, galite įdiegti tokį, kuris atliks šį įprastą darbą už jus.

DW reklaminė juosta

Gana paprastas papildinys, kuriame yra tik esminiai dalykai. Pranešimų juostoje gali būti rodomas paprastas tekstas, mygtukas, nuoroda arba atgalinės atskaitos laikmatis. Jis atrodo patraukliai ir leidžia visiškai valdyti visas tinkinimo parinktis.

Foobar – „WordPress“ pranešimų juostos

Ši apžvalga nebūtų baigta, jei nepaminėčiau Foobar. Tai vienas iš plačiausiai naudojamų aukščiausios kokybės papildinių šioje klasėje. Jame yra daugiau nei 30 tinkinimo parinkčių ir, skirtingai nei daugelis kitų, galite tinkinti pranešimų juostą kiekvienam puslapiui atskirai.

Kaina: 9 USD

„WordPress“ pranešimų juosta

Nemokamas papildinys, lengva naudoti ir aktyvuoti. Skydelio turinys gali būti paprastas tekstas arba jame taip pat gali būti mygtukas, susietas su konkrečiu veiksmu. Dėl daugybės spalvų nustatymų galite puikiai pritaikyti skydelį prie savo svetainės dizaino.

„Royal Footer“ baras

„Royal Footer Bar“ yra aukščiausios klasės papildinys, tikrai „karališkas“. Atrodo labai profesionaliai ir turi platų pasirinkimą.

Informaciniame skydelyje gali būti paprastas tekstas, adresų sąrašų prenumeratos forma ir įvairios nuorodos, įskaitant paskyras socialiniuose tinkluose. Nustatymų skydelyje galite ne tik nustatyti reikiamus nustatymus, bet ir gauti visą veiklos statistiką.

Šio įskiepio akcentas yra tai, kad kūrėjai jį pavadino A/B/C testu – galima nustatyti kelis nustatymus ir, įvertinus juos savo darbo aplinkoje, pasirinkti labiausiai atitinkantį svetainės koncepciją.

Kaina: 39 USD

Pranešimų juosta

Labai paprastas įskiepis, kuris rodomas pranešimų skydelis puslapio viršuje arba apačioje. Apima 5 spalvų parinktis tekstiniam pranešimui arba
Susijusios publikacijos