Pluginy na vytvorenie oznamovacieho panela vo WordPress. Zásuvné moduly na vytvorenie panela oznámení vo WordPress bigSlide - navigačný panel v Jquery

Pomocou doplnku – WPFront Notification Bar môžete na svoj web pridať notifikačný panel do hornej alebo dolnej časti vášho webu WordPress. Panel môže zobraziť ľubovoľný text a tlačidlo s odkazom na ľubovoľnú stránku, do ktorej môžete pridať HTML kód. Môžete si prispôsobiť farby panela oznámení, môžete si vybrať umiestnenie panela v hornej alebo dolnej časti stránky. Panel môžete uzamknúť, takže pri posúvaní stránky je panel vždy viditeľný na obrazovke. Môžete si vybrať, na ktorých stránkach sa panel bude zobrazovať a na ktorých nie atď.

Doplnok si môžete nainštalovať priamo z administračného panela WordPress. Prejdite na záložku: Plugins – Add new, do vyhľadávacieho formulára zadajte názov pluginu, stlačte Enter, nainštalujte a aktivujte plugin.

Po nainštalovaní a aktivácii doplnku prejdite na stránku: WPFront – Panel s upozorneniami a nakonfigurujte doplnok.

Displej

– Povolené, začiarknutím políčka aktivujete panel oznámení.

– Pozícia, vyberte, kde sa bude panel zobrazovať, Hore – hore, Dolu – dole.

– Pevné na pozícii, ak začiarknete toto políčko, panel bude vždy viditeľný na obrazovke, dokonca aj pri posúvaní stránky.

– Display on Scroll, ak zaškrtnete toto políčko, panel sa zobrazí pri rolovaní stránky.

– Posun posúvania, tu môžete určiť, o koľko pixelov sa má stránka posunúť, kým sa zobrazí panel upozornení.

– Výška pruhu, tu môžete určiť výšku pruhu v pixeloch.

– Pozícia Offset, tu môžete nastaviť vzdialenosť od hornej časti stránky k panelu.

– Display After, môžete nastaviť čas, po ktorom sa panel zobrazí, nefunguje pre funkciu – Display on Scroll.

– Trvanie animácie, môžete nastaviť trvanie animácie, keď sa panel presunie na obrazovku.

– Display Close Button, začiarknutím políčka zobrazíte tlačidlo s krížikom na zatvorenie panelu.

– Auto Close After, môžete určiť, po koľkých sekundách sa panel automaticky zatvorí, nefunguje pre funkciu – Display on Scroll.

– Display Shadow, zobrazenie tieňa pre panel.

– Zobraziť tlačidlo opätovného otvorenia, ak zaškrtnete políčko, po zatvorení panela sa v rohu obrazovky zobrazí tlačidlo na otvorenie panelu.

– Keep Closed, ak začiarknete políčko, potom keď zatvoríte panel na jednej stránke, panel sa už nebude zobrazovať na iných stránkach.

– Keep Closed For, tu môžete určiť, koľko dní sa panel nebude zobrazovať používateľovi, ktorý panel zatvoril.

Obsah

– Text správy, tu zadajte text, ktorý sa zobrazí v upozornení, môžete pridať HTML kód.

– Spracovať krátky kód, začiarknite políčko, aby ste do upozornení mohli pridávať krátke kódy.

– Display Button, začiarknutím políčka zobrazíte tlačidlo na paneli.

– Text tlačidla, sem zadajte text tlačidla.

– Akcia tlačidla, sem zadajte odkaz na tlačidlo. Otvoriť URL v novej karte/okne – odkaz sa otvorí v novom okne. Žiadny odkaz na sledovanie – odkaz nebude indexovaný.

– Zavrieť panel kliknutím na tlačidlo, zatvorte panel stlačením tlačidla.

Filter

– Dátum a čas začiatku, môžete určiť dátum a čas, kedy sa panel začne zobrazovať.

– Dátum a čas ukončenia, môžete určiť dátum a čas, kedy sa panel zatvorí.

– Zobraziť na stránkach, vyberte, na ktorých stránkach sa bude panel zobrazovať. Všetky stránky – na všetkých stránkach. Zahrnúť do nasledujúcich stránok – označte stránky, na ktorých sa panel zobrazí. Vylúčiť na nasledujúcich stránkach – vylúčiť stránky.

– Zobraziť pre roly používateľov, tu môžete vybrať, pre ktoré roly používateľov sa panel zobrazí. Všetci používatelia – pre všetkých, Všetci prihlásení používatelia – iba pre oprávnených používateľov, Hosťujúci používatelia – iba pre hostí, Pre nasledujúce používateľské roly – zaškrtnite roly.

Farba

– Farba pruhu, vyberte farby pruhu.

– Farba textu správy, zadajte farbu textu na paneli.

– Farba tlačidla, vyberte farby pre tlačidlo, môžete určiť dve farby na zobrazenie prechodu.

– Farba textu tlačidla, farba textu v tlačidle.

– Farba tlačidla na opätovné otvorenie, farba tlačidla na otvorenie panelu.

– Farba tlačidla zatvorenia, vyberte farby pre tlačidlo zatvorenia panela.

– Vlastné CSS, môžete si nastaviť vlastné CSS štýly pre panel, ale nie je to potrebné.

Nakoniec uložte zmeny.

Panel upozornení v hornej alebo dolnej časti vášho webu WordPress aktualizované: 25. júla 2018 používateľom: Iľja Žuravlev

Dobrý deň, milí čitatelia blogu. Dnes chcem hovoriť o pomerne funkčnom a pohodlnom doplnku upPrev, ktorý dokáže implementovať niekoľko typov prepojenia stránok naraz. Jeho prácu (aspoň v čase písania tohto článku) môžete pozorovať v spodnej časti každej stránky s článkom – vpravo sa objaví vyskakovací panel so zoznamom podobných materiálov.

Plugin dokáže zobraziť nielen podobné materiály, ale aj predchádzajúce články z rovnakej kategórie alebo archívu značiek (to je ten, o ktorom sme podrobne hovorili vo vyššie uvedenom článku a ktorého praktickú implementáciu som opísal), predchádzajúce materiály v formát celého blogu, ako aj náhodné publikácie. Celé sa to dá navyše okoreniť aj náhľadmi, ak si ich vytvoríte pri písaní príspevkov.

Akú rolu teraz zohráva prepojenie pri propagácii webu?

Vo všeobecnosti je optimalizácia webu pre jeho ďalšiu úspešnú propagáciu úlohou číslo jedna (číslo dva je získavanie spätných odkazov). Vnútorné faktory môžu blokovať a znižovať vplyv všetkého ostatného. Na druhej strane to nie je možné (najmä pri kľúčových slovách v obsahu a kotvách interných odkazov).

V dnešnej dobe má na starosti integrovaný prístup k propagácii a linkovanie v ňom zaberá pomerne významné miesto. V poslednej dobe sa stalo módou používať infografiku na vizuálne znázornenie čohokoľvek. Na tému SEO môžete nájsť veľa podobných vývojových diagramov, napríklad v článku Seopro o tom, ako propagovať web. Bohužiaľ, ešte nie som pripravený vytvoriť takéto majstrovské diela, ale odvolávanie sa na ne mi umožní nevylievať zbytočnú vodu.

Akú schému prepojenia zvoliť? Pomerne ťažká otázka, pretože mnohé zo schém, ktoré predtým dobre fungovali (rovnaký notoricky známy „prsteň“, odkazy na metódy implementácie, ktoré som uviedol vyššie), už neposkytujú fenomenálne výsledky, ktoré boli pozorované pred desiatimi rokmi. Vyhľadávače sa tiež učia a snažia sa nebrať do úvahy to, čo je z ich pohľadu očividné podvádzanie.

Vzájomné prepojenie vo forme série krúžkov by podľa Peydrankovej teórie malo vážne zvýšiť statickú váhu stránok lokality (), ktoré sú do tohto krúžku zapojené.

Nie vždy to však v praxi funguje. Je možné, že keď jednotlivé strany vypadnú z indexu, krúžok sa zlomí, alebo je možné, že s cieľom znížiť prirážky vyhľadávanie zaviedlo do klasického vzorca na výpočet váhy stavu závažný redukčný faktor.

Prepojenie webových stránok má ďalšiu úlohu, ktorá už nie je zameraná na potešenie Yandexu alebo Google, ale na sa bude návštevníkom páčiť. Jeden článok mu na vyskúšanie vášho blogu očividne nebude stačiť – určite ho musíte pozvať, aby išiel niekam inam, aby ste ho zaujali, udržali si ho a prípadne si z neho urobili odberateľa.

Teda aj prepojenie ovplyvňuje behaviorálne faktory, s čím pátranie tiež počíta a každý rok vo väčšej a väčšej miere. Takmer všetci správcovia webu to chápu a pridávajú na stránku bloky s podobnými materiálmi, s najčítanejšími publikáciami alebo s článkami z rovnakej kategórie. Pravdepodobne existujú ďalšie variácie na tému.

Prirodzene, existuje aj veľa možností na implementáciu interného prepojenia. Dokonca sa zaobídete aj bez pluginov (príklad si môžete pozrieť v článku), no na prepojenie ich bolo napísaných veľa. Najťažšie je vybrať si možnosť, ktorá pre váš blog dokonale funguje.

Sám som ich vyskúšal veľa a dokonca som o niektorých napísal recenzie (). V skutočnosti je spomínaný plugin jeden z najlepších na výpočet súvisiacich príspevkov a ich uvádzanie na stránkach blogu.

Jeho údaje však môžu používať aj iné rozšírenia WordPress, ktoré ich navrhujú pestrejšie alebo náročnejšie. V tom istom článku o YARP som práve uviedol príklad toho, ako jeho údaje využíval doplnok Related Posts Slider, ktorý mu umožňoval zobrazovať podobné príspevky v nasledujúcej forme:

No alebo toto:

Volal sa náš dnešný hrdina horePred tiež vie, ako získať informácie z databázy doplnkov Yet Another Related Posts Plugin a robí správnu vec, pretože nie je potrebné zakaždým znovu vynájsť koleso. V skutočnosti prejdime k popisu schopností tohto zázraku inžinierstva.

Možnosti prepojenia pomocou doplnku upPrev

Týchto štýlov som sa nedotkol, pretože som sa vybral inou cestou (nie najpriamejšou), ktorú opíšem nižšie v texte. Potom prejdite na druhú kartu:

Vyberte počet príspevkov, na ktoré bude tento doplnok generovať odkazy. Ale o niečo nižšie sme akurát vyberte typ prepojenia pre našu stránku. Vybral som možnosť podobných príspevkov pomocou zásuvného modulu Yet Another Related Posts Plugin (musí byť predinštalovaný), ale môžete nakonfigurovať prepojenie typu zvonenia výberom druhej alebo tretej možnosti, ako aj prepojenie veľkého kruhu výberom možnosti najprv .

Mal som v úmysle organizovať túto záležitosť iba pre príspevky, čo je označené začiarknutím v príslušnom poli. Okrem názvu príspevku môže tento panel zobraziť aj niekoľko slov (ich počet je nastavený úplne dole) od začiatku príspevku alebo oblasti citátu, ak ho vyplníte. Zdalo sa mi to zbytočné.

Tretia záložka slúži na nastavenie sledovania počtu kliknutí na odkazy v tomto paneli, ktoré som nevyužil. Na štvrtej karte som však stále aktivoval vyrovnávaciu pamäť. Na piatej karte som zakázal zobrazovanie panelu na mobilných telefónoch, ale nenamietal som proti jeho zobrazovaniu na tabletoch:

No, to je všetko, upPrev dokončil nastavenia, ale už som zmenil vzhľad panela v nastaveniach doplnku Yet Another Related Posts.

Prispôsobenie vzhľadu obsahu posuvného panelu

Tam som vybral súbor šablóny, ktorý bude zodpovedný za zobrazovanie podobných príspevkov (podstatu a špecifiká práce s týmto rozšírením nájdete v odkaze vyššie):

To. Teraz je vzhľad zoznamu podobných príspevkov zobrazených doplnkom upPrev (v rozbaľovacom paneli) určený kódom, ktorý je napísaný v mojom súbore yarpp-template-list.php z priečinka s mojou témou (). Ak váš blog generuje miniatúry pre príspevky, potom má zmysel vybrať si šablónu z arzenálu doplnkov Yet Another Related Posts s ich podporou.

Kód pre tento súbor je:

have_posts()): $postsArray = array(); while ($related_query->have_posts()) : $related_query->the_post(); $postsArray = "
• ".get_the_title()."
"; endwhile; echo implode(" "."\n",$postsArray); // vytlačí zoznam súvisiacich položiek oddelených čiarkami else:?>

Žiadne súvisiace príspevky.

Ako vidíte, toto je miesto, kde žije hlavička posuvného soketu, takže budete musieť tento súbor skonvertovať (ak je to potrebné) na kódovanie UTF-8 bez kusovníka, aby ste sa vyhli crack(). Neviem ako vy, ale ja mám Notepad++ () ako hlavný editor už dosť dlho a v ňom sa táto konverzia robí takto:

Je jasné, že tento kód generuje iba banálny zoznam Html () a za vzhľad sú zodpovedné vlastnosti CSS zapísané v súbore štýlu pre triedy prítomné v kóde. V mojom prípade tieto štýly vyzerajú takto:

A.oy (color: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, bezpätkové;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;okraj: 5px 0;okraj: bodkovaný 2px #ccc;) li.eto:hover (text-decoration:underline;) div.oyy (margin:0 0 0 0;padding:5px 0;font:normal 17px "Trebuchet MS", Verdana, Arial;farba:#666;)

Trieda lampochka pridáva zelené značky začiarknutia, ktoré sú nastavené v mojom kóde CSS pomocou kódu base64 (tento kód som niekde skopíroval). Ak máte záujem, mrknite na môj style.css. Dobre, teraz je po všetkom. Ak ste na niečo zabudli, pýtajte sa. Je pravda, že túto možnosť prepojenia som nastavil pred mesiacom a počas tejto doby mi už niečo zmizlo z mysle.

Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu

Mohlo by vás to zaujímať

Ako odstrániť priehľadný pixel http://yarpp.org/pixels v doplnku Yet Another Related Posts a zmeniť nápis Podobné materiály
Vytvorenie zoznamu súvisiacich príspevkov vo WordPress (s miniatúrami) pomocou doplnku Related Posts na interné prepojenie
Ako zlepšiť štatistiku správania webových stránok pomocou doplnkov pre posúvač ešte ďalších súvisiacich príspevkov a súvisiacich príspevkov pre WordPress
Jednoduché počítadlá a ikony kategórií a stránok – krásne počítadlá RSS a Twitter, ako aj ikony kategórií a stránok vo WordPress
WordPress pluginy na mojom blogu (stránke) Posuvníky a prezentácie pre váš web – aké možnosti existujú a ako používať skripty jQuery Slider
Drobečková navigácia vo WordPress pomocou doplnku Breadcrumb NavXT (posilnenie prepojenia)
Zníženie spotreby pamäte vo WordPresse pri vytváraní stránok - WPLANG Lite plugin pre nahradenie lokalizačného súboru
WP-PageNavi - navigácia po stránkach pre blog WordPress - inštalácia, konfigurácia a zmena vzhľadu stránkovania
Kalendár to! - Kalendár udalostí pre WordPress
Mail sa z WordPressu neposiela a vizuálny editor nefunguje – riešenie pomocou doplnkov Configure SMTP a Post Editor Buttons

Určite ste sa na webových stránkach často stretli s výsuvnými panelmi rôznych typov a umiestnení, ktoré hovoria hore, dole, vpravo alebo vľavo plne automaticky, v danom časovom intervale, alebo sa aktivujú kliknutím. Takéto panely spravidla obsahujú niektoré dodatočné informácie, niektoré dôležité a niektoré menej dôležité, ktoré sú zatiaľ skryté pred očami používateľa. Napríklad formuláre predplatného, ​​widgety sociálnych sietí, odkazy, značky, kontaktné informácie atď., atď., skrátka čokoľvek.
Existuje obrovské množstvo hotových riešení na implementáciu posuvných panelov v javascripte, moduly a pluginy pre rôzne CMS, jednotlivé jQuery pluginy, no len veľmi málo, ktoré ma zaujali, boli úplne pracovné metódy v čistom CSS.

Niečo také som chcel spraviť už dlho, mechanizmus používania skrytých zaškrtávačiek je známy a pochopiteľný, ale akosi som sa k tomu nedostal. A tak, keď som na jeden narazil v zaprášených skladoch CodePen, rozhodol som sa zaexperimentovať a vyrobiť si vlastnú verziu vysúvacieho horného panelu v čistom CSS, celkom funkčný, mierne upravený a prispôsobený pre nášho brata, a stalo sa toto)) .

Pozreli sme sa na príklad, porovnali sme ho s originálom a teraz, kto to potrebuje, poďme spoločne prísť na to, ako to celé funguje. Ešte raz vám pripomínam, že všetku prácu urobia žiadne js, iba nedotknuté html a „kúzlo“ css.

Rozloženie HTML

Pozostáva z troch hlavných prvkov: základného kontajnera, bloku s obsahom a tlačidla na otvorenie/zatvorenie panelu.

Ako vidíte, dizajn panela obsahuje príznak type=" ", ktorý je v predvolenom nastavení skrytý a neaktívny. Použitie značky , ktorý je navrhnutý ako tlačidlo v css, vytvoríme spojenie medzi checkboxom, t.j. ak kliknete na štítok, vstup bude fungovať (stane sa aktívnym). No, pomocou pseudotriedy: v css vytvoríme spojenie medzi skrytým zaškrtávacím políčkom a prvkami panela.
Hneď by som chcel poznamenať, že tlačidlo otvorenia/zatvorenia nie je viazané na telo panela, ale je umiestnené vzhľadom na kontajner s obsahom hlavnej stránky

a keď je posuvný panel aktivovaný, blok obsahu a tlačidlo sa posunú nadol o vzdialenosť zodpovedajúcu výške panelu.

Teraz si vytvoríme štýly nášho posuvného panelu, najprv nastavíme rozmery základného kontajnera, určíme farbu pozadia a jeho počiatočné umiestnenie. V CSS si vytvoríme class.top-panel, do ktorého napíšeme všetky potrebné vlastnosti.
Náš panel je zasúvateľný, čo znamená, že ho musíme skryť, to sa robí veľmi jednoducho. Nastaviť pevnú polohu polohovania: pevná; , roztiahnuť na celú šírku strany šírka: 100 %; , neuvádzame výšku (výšku:) panelu, v tomto prípade sa panel automaticky prispôsobí veľkosti obsahu a pomocou transform: translateY(-100%); , zatlačte náš panel za horný okraj stránky.

. horný panel ( pozadie: #39464e; pozícia: pevná; horná časť: 0 ; šírka: 100 %; výplň: 0 ; - veľkosť webkitu- boxu: border- box; - moz- box-sizing: border- box; box- sizing: border- box - webkit- transform: translateY(- 100% ) ; - moz- transform: translateY(- 100% ) ;

Horný panel ( pozadie: #39464e; pozícia: pevná; horná časť: 0; šírka: 100 %; výplň: 0; -rozmery webkit-box: border-box; -moz-box-sizing: border-box; box- veľkosť: border-box -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%);

Blok správy panela sa nachádza vo vnútri základného kontajnera a má priradenú špecifickú class="message" , v ňom špecifikujeme vlastnosti pre všetky prvky umiestnené na tejto strane, farbu a rodinu písma, veľkosti obrázkov atď. .
Bez tohto dodatočného bloku sa samozrejme ľahko zaobídete umiestnením správy priamo do základného kontajnera, čím sa však stráca flexibilita možných nastavení panelov.
Správa je zobrazená presne v strede a roztiahnutá na špecifikovanú šírku max-width: 980px; , hodnota je ľubovoľná, môžete si vybrať úplne iné veľkosti.

( farba: #fff ) /* Hlavička 2. úrovne */ .správa h2 ( farba: #888 )

Ďalej zadefinujeme všetky potrebné štýly pre náš prepínač panelov. Na začiatok skryjeme príznak type="checkbox" pred očami používateľov bez ďalších okolkov v značke html Napíšeme atribút skrytý, ktorý určuje, či sa má objekt zobraziť v okne prehliadača alebo nie.

Otvoriť ( poloha: absolútna; klip: obdĺžnik (0 0 0 0); nepriehľadnosť: 0; )

Tegu priraďme class="btn" , s ktorým budeme pracovať v css, aby sme „nakreslili“ celkom pekný prepínač (tlačidlo):

/* Prepínač panelov */štítok. btn ( display: block; position: absolute; right: 25px; top: 100%; /*dole: -35px;*/ kurzor: pointer; background: #2bbbad; border- polomer: 0 0 3px 3px; padding: 8px 16px ; farba: #fff font-size: 100% text- align: center- font- smoothing: pointer 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ); z-index: 9999) /* Zapnúť kurzor myši */štítok. btn: hover ( - webkit- prechod: 0, 35 s; - moz- prechod: 0, 35 s; prechod: 0, 35 s; box- shadow: 0 5px 11px 0 rgba(0, 0, 0, 0,18) , 0 4px 15px 0 rgba (0 , 0 , 0 , 0,15 ) ) /* Šípka nadol */štítok. btn: after ( obsah: "\f078" ; písmo: normálne 18px/ 1 FontAwesome; dekorácia textu: zdediť )

/* Prepínač panela */ label.btn ( display: block; position: absolute; right: 25px; top: 100%; /*bottom: -35px;*/ kurzor: pointer; background: #2bbbad; border-radius: 0 0 3px 3px farba: #fff , 0,12 z-index: 9999 ) /* Prepnutie kurzora */ label.btn:hover ( - prechod-webu: 0,35s; -moz-prechod: 0,35s; box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0,18), 0 4px 15px 0 rgba(0, 0, 0, 0,15) ) /* Šípka nadol */ label.btn:after ( obsah: "\f078"; font: normal 18px/1 FontAwesome; dekorácia textu: zdediť )

Šípky prepínačov sú prevzaté z balíka FontAwesome font-icon, takže súbor štýlu pre túto sadu musí byť najprv pripojený k stránke:

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

Môžete použiť iný typ prepínača, ako napríklad zodpovedajúci text alebo symbol html.
Štandardne som pre spínač definoval tri stavy: pri zatvorenom paneli - šípka nadol, pri otvorenom paneli - šípka hore a samozrejme mierny efekt vznášania pri visení.

Aktivujeme náš panel a zmeníme stav prepínača pomocou pseudo-class:checked .
Pomocou vlastnosti box-shadow som na spodný okraj aktívneho panelu pridal svetlý tieň a pomocou prechodu som nastavil jednoduchý prechodový efekt medzi dvoma stavmi panelu (otvorený a zatvorený).

. otvorené: začiarknuté ~ . horný 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 ) ; - - transform: translateY(0) ; transform: translateY(0) ; - webkit- prechod: 0. 35s - moz- prechod: 0. 35s) open: not(: check) ~ . horný panel ( - webkit- prechod: 0,35 s; - moz- prechod: 0,35 s; prechod: 0,35 s ) /* Prepnúť farbu po kliknutí */. otvorené: začiarknuté ~ . horný panel > štítok. btn (pozadie: #dd6149) /* Prepnúť šípku nahor*/. otvorené: začiarknuté ~ . horný panel > štítok. btn: after ( obsah: "\f077" ; písmo: normálne 18px/ 1 FontAwesome )

Open:checked ~ .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; -moz); -prechod: 0,35 s; prechod: 0,35 s ) /* Prepnúť farbu po kliknutí */ .open:checked ~ .top-panel > label.btn ( background: #dd6149 ) /* Šípka prepínača nahor*/ .open:checked ~ .top-panel > label.btn:after ( content: "\f077"; font: normal 18px/1 FontAwesome )

Na zmenu veľkosti písma pri zobrazení na rôznych obrazovkách používateľských zariadení som použil dopyty @media media. Vzhľadom na modernú realitu si myslím, že to nie je zbytočný doplnok:

@obrazovka iba pre médiá a (maximálna šírka: 400 pixelov) (telo (veľkosť písma: 90 %)) obrazovka iba pre @médiá a (maximálna šírka: 800 pixelov) (telo (veľkosť písma: 100 %)) @obrazovka iba pre médiá a (min. šírka: 1100 pixelov) ( telo (veľkosť písma: 120 %))

@obrazovka iba pre médiá a (maximálna šírka: 400 px) ( telo (veľkosť písma: 90 % ) ) obrazovka iba pre @médiá a (maximálna šírka: 800 px) ( telo (veľkosť písma: 100 % ) ) @obrazovka iba pre médiá a (min. šírka: 1100 pixelov) ( telo (veľkosť písma: 120 %))

To je asi všetko! Panel, ktorý sa vysúva zhora, je pripravený na použitie, zostáva ho len naplniť obsahom. Ešte raz si pozrite živý príklad, stiahnite si archív so zdrojovým kódom, pokojne experimentujte s rôznymi parametrami a tvorte, tvorte, tvorte...

So všetkou úctou, Andrew

Nedávno sa jeden z našich čitateľov opýtal, ako nahradiť svoju navigačnú ponuku na stránkach kontextovou ponukou jQuery. Takýto panel môže výrazne zlepšiť použiteľnosť na mobilných verziách stránok. V tomto článku vám ukážeme, ako pridať posuvný panel s ponukami do tém WordPress.

Poznámka: Tento článok predpokladá stredne pokročilé znalosti HTML a CSS.

Nahradenie štandardnej ponuky posuvným panelom vo WordPress

Cieľom je zobraziť posuvný panel s ponukami používateľom s nízkym rozlíšením obrazovky pri zachovaní štandardnej ponuky našej témy, aby používatelia pracovnej plochy mohli vidieť plnú verziu ponuky. Než začneme, je dôležité pochopiť, že existuje veľa rôznych tém WordPress, a preto budete musieť upraviť štýly CSS v závislosti od vášho návrhu.

Najprv musíme otvoriť textový editor ako Poznámkový blok a vytvoriť nový súbor. Skopírujte a vložte do nej nasledujúci kód:

(funkcia($) ( $("#prepnúť").toggle(funkcia() ( $("#popout").animate(( left: 0), "pomaly", function() ( $("#toggle" .html(" "); )); ), function() ( $("#popout").animate(( vľavo: -250), "pomaly", function() ( $("#toggle").html(" "); )); )); )) (jQuery);

Nahradiť example.com na názov domény vášho webu a tiež zmeniť vaša téma do aktuálneho priečinka vašej aktuálnej témy. Uložte súbor s názvom slidepanel.js na počítači. Tento kód používa jQuery na prepínanie posuvného panela s ponukami. Oživuje tiež spínací efekt.

Otvorte svojho FTP klienta (Filezilla alebo Total Commander) a pripojte sa k svojej stránke. Ďalej prejdite do adresára vašej témy a ak už v ňom je priečinok js, potom ho otvorte. Ak váš motív takýto adresár nemá, vytvorte ho a nahrajte doň súbor slidepanel.js.

Ďalším krokom je navrhnúť alebo nájsť ikonu pre menu. Na to je najpoužívanejšia ikona s tromi pruhmi. Môžete si ho vytvoriť v akomkoľvek grafickom editore (napríklad Photoshop) alebo nájsť jeden z mnohých existujúcich na Google. V tomto príklade použijeme pre ikonu veľkosť 27x23px. Keď ho vytvoríte, premenujte ho na menu.png a nahrajte ho do priečinka s obrázkami v adresári témy.

Ďalším krokom je posuvný panel s ponukami. Stačí skopírovať a vložiť nasledujúci kód do súboru funkcie.php témy:

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

Teraz, keď sú všetky prípravné práce dokončené, musíte upraviť predvolenú ponuku tém. Väčšina tém zvyčajne zobrazuje navigačnú ponuku v súbore hlavička.php Témy. Otvorenie hlavička.php a nájdite riadok podobný tomuto:

"primary", "menu_class" => "nav-menu")); ?>

Výzvou je zabaliť ponuku témy do HTML, aby sa na malých obrazovkách zobrazil posuvný panel s ponukami. Zabalíme to

"primary", "menu_class" => "nav-menu")); ?>

Nahraďte example.com názvom svojej domény a svoju tému priečinkom s témou. Uložte zmeny.

Posledným krokom je použitie CSS na skrytie ikony ponuky pre používateľov s veľkými obrazovkami a jej zobrazenie pre používateľov s malými obrazovkami. Musíme tiež upraviť polohu ikony ponuky a vzhľad posuvného panela. Skopírujte a prilepte tento kód CSS do šablóny so štýlmi vašej témy.

@media screen and (min-width: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout (pozícia: pevná; výška: 100%; šírka: 250px; pozadie) : rgb(25, 25, 25); farba: biela: -250px: 60px výška: 24px; :hover ( background:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )

Majte na pamäti, že ponuka vašej témy môže používať rôzne triedy CSS a tie môžu byť v rozpore s vyššie uvedenými triedami. Tento problém môžete vyriešiť pomocou inšpektora v prehliadači Chrome alebo Firefox, aby ste zistili, ktoré triedy sú v konflikte s vašimi. Nezabudnite tiež, že si môžete voľne prispôsobiť vzhľad panelu tak, aby vyhovoval dizajnu stránky.

Panely upozornení- mimoriadne účinný prostriedok stimulácie používateľa, aby sa presunul na požadovanú stránku. Okrem toho slúžia na zobrazenie dôležitých informácií, keďže vždy upútajú pozornosť užívateľa. Niektoré panely obsahujú formuláre na zadávanie údajov a možno ich použiť napríklad na organizáciu predplatného na zoznamy adries.

V internetových obchodoch sa oznamovacie panely aktívne používajú na informovanie návštevníkov o akciách a zľavách, a preto sú silným mechanizmom na zvýšenie predaja.

V tejto recenzii budem hovoriť iba o niektorých z najfunkčnejších a najatraktívnejších doplnkov na vytváranie takýchto panelov na stránkach webovej stránky alebo blogu na platforme. Každý z nich má svoje výhody, množstvo funkcií a možnosť prispôsobiť vzhľad štýlu a dizajnu vašej stránky. Nepochybujem o tom, že vďaka tejto recenzii si budete môcť vybrať plugin, ktorý najlepšie vyhovuje vašim požiadavkám.

Vlastné upozornenia

Vysokokvalitný prémiový doplnok, ktorý má všetky potrebné funkcie obsiahnuté v doplnku tejto úrovne.

Panel oznámení môže obsahovať jednoduchý text, e-mailový vstupný formulár alebo na webovej stránke, sociálnych sieťach a odpočítavaní času.

A to všetko je uzavreté v adaptívnych kontajneroch a správne sa zobrazí na akejkoľvek obrazovke. Panel nastavení navyše umožňuje takmer bez obmedzení ovládať polohu na stránke a farebnú schému.

Cena: 29 dolárov

Doplnok BugMeBar WordPress

Jednoduchý, ale pútavý panel s veľmi krásnymi a pútavými farebnými efektmi. Dá sa umiestniť kamkoľvek na stránku a navyše dokáže nastaviť cookies a nezobraziť sa pri ďalšej návšteve stránky, ak ju užívateľ zrazu nechce vidieť.

Ďalšie vlastnosti, ktoré stoja za zmienku:

• Určenie stránok, na ktorých sa panel zobrazí a na ktorých nie.
• Nastavenie doby platnosti cookies.
• Plná kontrola nad vzhľadom vrátane výberu farby, priehľadnosti atď.
• Schopnosť posúvať pevné hlavičky pri zachovaní integrity rozloženia.
• Schopnosť povoliť alebo zakázať prechodnosť a animáciu

Cena: 12 dolárov

Ahoj Bar

Jeden z najpopulárnejších oznamovacie lišty pre Wordpress. A potom, zadarmo, aj keď z hľadiska funkčnosti nie je v žiadnom prípade horší ako jeho prémiové náprotivky.
Ak chcete použiť panel Hello, jednoducho prejdite na doplnok a zadajte adresu URL svojho blogu. Ďalej sa dostanete na panel nastavení, kde môžete nakonfigurovať umiestnenie a vzhľad upozornení. Panel nastavení má navyše funkciu náhľadu, takže svojim upozorneniam môžete rýchlo dodať požadovaný vzhľad.
Po dokončení nastavení dostanete fragment kódu, ktorý musíte vložiť priamo na stránku lokality. Ak sa necítite dostatočne kvalifikovaní na túto operáciu, môžete si nainštalovať taký, ktorý túto rutinnú prácu vykoná za vás.

DW Promobar

Celkom jednoduchý plugin obsahujúci len to najnutnejšie. Notifikačná lišta môže zobrazovať jednoduchý text, tlačidlo, odkaz alebo časovač. Vyzerá atraktívne a poskytuje vám plnú kontrolu nad všetkými možnosťami prispôsobenia.

Foobar – oznamovacie lišty WordPress

Táto recenzia by nebola úplná, keby som nespomenul Foobar. Toto je jeden z najpoužívanejších prémiových doplnkov v tejto triede. Obsahuje vyše 30 možností prispôsobenia a na rozdiel od mnohých iných umožňuje prispôsobiť si notifikačný panel samostatne pre každú stránku.

Cena: 9 dolárov

Panel oznámení WordPress

Bezplatný plugin, jednoduché použitie a aktivácia. Obsah panela môže byť obyčajný text alebo môže obsahovať aj tlačidlo spojené s konkrétnou akciou. Vďaka širokému spektru nastavenia farieb si panel dokonale prispôsobíte dizajnu vášho webu.

Royal Footer Bar

Royal Footer Bar je plugin najvyššej triedy, skutočne „kráľovský“. Vyzerá veľmi profesionálne a má širokú škálu možností.

Informačný panel môže obsahovať obyčajný text, formulár na prihlásenie sa do zoznamov adries a rôzne odkazy vrátane účtov na sociálnych sieťach. Na paneli nastavení môžete nielen nastaviť potrebné nastavenia, ale získať aj kompletné štatistiky o aktivite.

Vrcholom tohto pluginu je, že ho vývojári nazvali A/B/C test – môžete si nastaviť niekoľko nastavení a po ich vyhodnotení vo vašom pracovnom prostredí si vybrať to, ktoré najviac vyhovuje konceptu stránky.

Cena: 39 dolárov

Panel upozornení

Veľmi jednoduchý plugin, ktorý sa zobrazuje oznamovací panel buď v hornej alebo dolnej časti stránky. Obsahuje 5 farebných možností pre textovú správu alebo