Ahojte všetci! Dnes by som chcel povedať, ako bez pluginov a skriptov brick Muronry Blocks(murivo. z angličtiny - Brick Murárstvo), to znamená, že bloky rôznych výšok budú krásne rozmiestnené na seba bez veľkých prázdnych zarážok. Áno! To všetko možno urobiť veľmi ľahko s CSS.
CSS má vlastnosť, s ktorou môžete vytvoriť viacfarebný text alebo bloky. Používajú ho.
Nehnuteľnosť sa volá stĺpce. Toto je univerzálna vlastnosť, ktorá vám umožní okamžite nastaviť šírku a počet stĺpcov. Viac o tom si môžete prečítať dobré CSS. adresár.
Takže, všetko je v skutočnosti veľmi jednoduché. Máme napríklad 6 prvkov rôznych výšok, ale rovnakú šírku. Jasný príklad je bočný panel (bočný stĺpec) na miestach. Existujú všetky bloky rovnakej šírky, ale rôznych výšok. Zvyčajne B. mobilná verzia SiteBar stránky má po hlavnom obsahu, v spodnej časti stránky a samotný obsah robí celú šírku obrazovky. Samozrejme, že stránka je iracionálna v jednom stĺpci, pretože na bokoch bude veľa voľného miesta, najmä ak sa pozriete z tablety.
Ale ak bloky nastaví nehnuteľnosť displej: Inline-Block, potom automaticky, ak je dosť šírky kontajnera, bude umiestnená v niekoľkých stĺpcoch. Všetko však nemusí vyzerať veľmi krásne:
Súhlasím, tieto zarážky medzi blokmi sa vôbec nevyzerajú. Preto je potrebné urýchlene stanoviť! Pre to do bloku kontajnera,v ktorých blokoch sa nachádzajú, musíte pridať potrebné štýly:
Moz-stĺpce: 300px auto; -Webkit-stĺpce: 300px auto; Stĺpce: 300px AUTO;
Pre cross-prehliadač použite vlastnosti pre prehliadače Firefox a Webkit (Chrome, Safari, Android). Napríklad sme umiestnené s blokmi označený zoznam Potom štýly pre príklad na obrázku budú vyzerať takto:
Ul (šírka: 1050px; -Moz-stĺpce: 300px AUTO; -Webkit-stĺpce: 300px AUTO; stĺpce: 300px AUTO;) LI (Displej: Inline-Block; Box-Shadow: 0 8px # 555; zoznam-štýl: žiadny Vyplnenie: 10px; šírka: 300px; okraja-dole: 30px; vertikálne-zarovnané: top;)
V tomto prípade budú bloky umiestnené v niekoľkých stĺpcoch. minimálny 300px šírka a počet stĺpcov sa automaticky určuje prehliadačom. Je vhodné vytvoriť prispôsobivosť. V tento prípad Tam bude 3 stĺpce, a to je, ako to bude vyzerať:
Šírka kontajnera (1050px) bude musieť vyzdvihnúť, ak chcete, aby vzdialenosť medzi zvislých blokov sa zhodovala s horizontálne. V opačnom prípade bude šírka medzi reproduktormi automaticky nainštalovaná prehliadačom. Mať nehnuteľnosť kolóna.ktorý nastaví vzdialenosť medzi reproduktormi. Ale v tomto prípade to nebude fungovať, ako chcete.
Tam je ďalšia možnosť: Pre bloky, ktoré potrebujete na nastavenie šírky: 100%. Aj vtedy, ak je nainštalovaný vlastnosť polstrovania, ako v mojom prípade, musíte nastaviť majetok boxu: Border-box. Teraz môžete bezpečne pridať vlastnosť stĺpca do kontajnera, aby ste nastavili vzdialenosť medzi stĺpcami. Takže to bude fungovať podľa potreby.
Súhlasím, to vyzerá oveľa lepšie! Môžete tiež umiestniť bloky "DIV" vo vnútri DIV kontajnera. Buď, ak potrebujete distribuovať text do niekoľkých stĺpcov, jednoducho v značke "P" s napríklad textovou triedou pridať požadovaný text a pre túto triedu predpíšeme majetok stĺpce..
To je všetko! Tak jednoducho bez zbytočných skriptov, môžete umiestniť bloky vo forme murivu alebo textu v niekoľkých stĺpcoch. Ale všimnite si, že v tomto prípade bude vyzerať len krásne, ak sú bloky rovnakú šírku. V inom prípade zostáva len použiť dobrý film muriva. Skript automaticky pozí každý blok. Ale to je ďalšia téma ...
To je všetko! Ak sa objavili niektoré otázky alebo pripomienky, nechajte ich v komentároch. Veľa štastia!
V sekcii blogu. Táto fotografia tému WordPress Bude to náš príklad, ale pravdepodobne ste videli použitie JQuery Masonry a na iných WordPress.
Čo je jquery
Murárstvo môže byť považované za pridanie s CSS, s ktorými môžete prvky umiestniť horizontálne, otočte sa do zvislej polohy v závislosti od šírky monitora. V dôsledku toho sú minimalizované zvislé medzery medzi prvkami rôznych výšok. Ak chcete urobiť aj pomoc CSS, Verte mi, že budete mať veľa bolesti hlavy.
V tomto príklade môžete vidieť princíp práce JQuery Masonry pred a po použití:
Ako vidíte výsledok na tvár, ak používate CSS plavák: vľavo, potom sú tam prázdne intervaly, musíte použiť pozíciu CSS, ktorá je celkom problematická, môžete, ale prečo, v tejto pomoci pomôže murivo.
Používame JQuery Manal na wordpress stránkach
Murárstvo môže byť použité v dvoch prípadoch. Prvým je, keď všetky vaše bloky s informáciami sú rovnaká šírka, v tomto prípade potrebujete použiť tento kus skriptu:
|
Ak máte rôzne bloky šírky, musíte použiť nasledujúci kód:
|
Kde solumpwidth. Toto je šírka mriežky (v pixeloch). Murárstvo bude nasledovať tieto dva pravidlá:
- Celková šírka prvkov (vypočítaná podľa tohto vzorca) \u003d CSS šírka + polstrovanie-vpravo + polstrovanie vľavo + hraničná pravá šírka + hraničná ľavá šírka + rozpätie - vpravo + margin-vľavo
- Pri použití stĺpcovia musia byť všetky prvky usporiadané horizontálne na šírku stĺpca (napríklad pre stĺpca: 200, položky začne s 0 alebo 200 alebo 400 pixelmi a tak ďalej). Nemusí to byť úplne jasné, ale v tom nie je nič ťažké, pozeráme sa na obrázok.
Prvý prvok celkovej šírky 190px a ročného rozpätia: 0. A druhý prvok má margin-vľavo: 0, teoreticky sa musia tieto dva prvky navzájom dotknúť. Ale pretože stĺpec má hodnotu 200PX, potom druhý prvok začína zobraziť vzdialenosť 200px.
Tento proces sa nestane, ak nemáme hodnotu stĺpca v skripte a všetky prvky začínajú navzájom, takže je potrebné ich oddeliť s maržou.
Takže zázraky jquery murivo a wordpress 3 ..
Teraz som trochu kódoval. Ak chcete začať, pripojte potrebné knižnice jQuery a muriva v súbore hlavičky.php. Preskočiť tento kód v headter.php (si môžete stiahnuť na stránke mimo lokality):
// Pripojiť jQuery// pripojiť murivo.
Uistite sa, že wp_enqueue_script stojany pred wp_head. Skript muriva sa nachádza v priečinku JS z mojej témy, môžete mať iné meno.
< div id = "content_masonry" > < div class = "masonry_box" > < ! -- post content -- > < / div > < div class = "masonry_box" > < ! -- post content -- > < / div > . . . < / div > < ! -- #content_masonry--> |
Div Id \u003d "Content_Masonry" zavolá skript muriva a Div Class \u003d "Masonry_Box" zobrazí naše príspevky pomocou skriptu. Teraz CSS, môžete urobiť content_maasonry napríklad šírka 100%, potom sa nemusíte liečiť, ale ak urobíte pevnú šírku content_masonry, musíte urobiť potrebné výpočty. Napríklad vytvoríte 4 stĺpce s príspevkami, každý má šírku + polstrovanie 190px a margin-right: 10px, potom veľkosť obsahu obsahu content_maasonry bude 200 x 4 \u003d 800px:
#Content_masonry (šírka: 800px;) #content_masonry .Masonry_box (šírka: 170px; Vypraktovanie: 10px; RIGHT-RIGHT: 10PX; rozpätie - dno: 10px;)
#Content_masonry ( Šírka: 800px; #Content_masonry .Masonry_box ( Šírka: 170px; Čalúnenie: 10px; rOZHODNUTÉ RIGHTU: 10PX; rOZPNÚTNOSTI: 10PX; |
Teraz zostáva pridať PHP, ktorá bude generovať HTML, v tomto prípade budem používať WP_QUERY na zobrazenie 20 príspevkov z kategórie Masonry, napríklad na displeji stránky (strana.php):
< div id = "content_masonry" > $ Linksposts \u003d nový wp_query (); $ Linksposts -\u003e dotaz ("showposts \u003d 20 & CAT \u003d 10"); had_posts ()): $ linksposts -\u003e the_post (); ?\u003e. < div class = "masonry_box" > < div class = "masonry_box_inner" > < h2 > < a href = " ID, "URL", TRUE)) ECHO GET_POST_META ($ POST -\u003e ID, URL, TRUE); Inak the_permalink (); ?\u003e "> < / a > < / h2 > |
Dobrý deň všetkým! Toto je môj druhý článok v tomto roku. Prvýkrát som vydal prvý o ikonu písma a som rád, že som našiel čas na písanie druhého článku s takým malým maržám. Zatiaľ pre mňa je to malá medzera, pretože Častejšie napíšete žiadnu príležitosť, ale skúsim. 😎 A teraz sa zaoberáme, čo bude diskutovať v tomto článku.
Možno mnohí z vás videli na stránkach umiestnenie prvkov (obrázky, články, rôzne bloky) tehlový efekt. Hovoríte - je to možné prostredníctvom CSS? Možno je to možné, ale iba taká flexibilita nebude. Samotný skript umiestni položky na stránke pomocou vertikálneho priestoru. Pri polohovaní blokov, skript pridáva animáciu. Je možné viniť v adaptívnom dizajne, čím sa zníži okno prehliadača. Takže je to všetko dosiahnuté s malou knižnicou JavaScript - muriva. Tento skript je veľmi široko používaný v moderných dizajnoch trendov. Neviem, ako v ruskom pohanstve, ale v nadhodnotení internetovej muriva dostal veľkú popularitu.
Autorský murivo je David Desandro z USA. Chcel by som mu veľmi poďakovať za taký dobrý skript. Táto knižnica je distribuovaná úplne zadarmo, takže ho môžete bezpečne používať na vašich webových stránkach.
Myslím, že mnohí sa páčilo. V skutočnosti všetko vyzerá veľmi pekne. Poďme sa zaoberať tým, ako pracovať s murivom, ako priniesť naše bloky na našich stránkach s tehlový efekt?
Štruktúra článku
Po prvé, musíme ísť na skriptovú stránku - http://maasonry.desandro.com a stiahnuť najnovšiu verziu. V čase písania tohto článku je táto verzia 4.0. Aj na tejto stránke nájdete podrobnú dokumentáciu v angličtine. Odvolávam sa na scenár hlavných bodov z dokumentácie - Ako sa pripojiť, ktoré možnosti sú k dispozícii atď. Nebudem mať vplyv na všetko, pretože Ja sám som to nezistil v niektorých bodoch. Ak chcete predstaviť svoje stránky, musíte vykonať minimum akcie. Teraz si na to zvyknutý.
Na webovej stránke na stiahnutie sú dve verzie skriptu - komprimované (minimalizované) a nekomprimované. Je lepšie používať presne - Masonry.PKGD.min.js. Knižnica môže byť tiež načítaná z CDN:
nekomprimovaný
stlačený (minimalizovaný)
Odporúčam vám pripojiť minimalizovanú verziu muriva z CDN. Znížujeme počet nepotrebných požiadaviek HTTP. Všeobecne platí, že bez ohľadu na skript, ktorý pripojíte, ak môžete pripojiť manuzovanú verziu s CDN, potom ju pripojiť.
Ak chcete pracovať murivo, musíme vytvoriť materský blok a dať do nej prvky.
Pre jasnosť som vytvoril demo stránku s obrázkami rôznych veľkostí. Vzal som obrázok ako príklad prvkov, pretože Majú rôzne výšky, ale namiesto obrázkov môže byť akýkoľvek blok: text, video atď. Skúste skrátiť okno prehliadača a uvidíte obrázky hladko zmeníte svoju pozíciu.
Pozrime sa, čo bude vyzerať HTML kód:
...
#Container (hranica: 1px pevná #ccc; okraj: 0 auto; čalúnenie: 50px 0; max-šírka: 1170px;) / * mesh prvok * / bodu (hranice: 2px pevná RGBA (0, 0, 0, 0, 0,35); Spodné okno: 15px; Vyplnenie: 1px; Šírka: 280px) / * / Mesh Element * / H1 (Text-ALIGN: Center; Margin: 0 50px)
Ako môžete vidieť, CSS sa tu používa minimálne.
Inicializácia muriva
Môžete to urobiť niekoľkými spôsobmi.
Inicializácia muriva cez JavaScript
Môžete použiť murivo ako jquery-plugin:
$ ("Volič"). Murivo ();
Ale majte na pamäti, že pre túto metódu musíte byť pripojený k knižnici JQuery:
Na demo i Inicializované murivo ako jquery-plugin, t.j. Mám nasledujúci inicializačný kód:
JQuery (dokument) .Ready ($) ($ ("(" Elements-Gride "). Masonry (// MOŽNOSTIKOĽVEKOKOĽVEKEVYVÁRU:" BEZPEČNOSŤ)
Ak ste nakreslite metódu "Masonry ()", prešli sme dve možnosti: ItemsEctor a Combintwidth. Vyžadujú sa dve možnosti. Podľa vývojára sú potrebné pre normálnu prevádzku skriptu. Budeme však hovoriť o možnostiach tesne nižšie. Všetko, čo by tieto kroky mali fungovať všetko.
Inicializácia s vanilkovým javascriptom
Môžete použiť murivo aj s vanilku JS:
Nové murivo (ELEM, MOŽNOSTI)
Konštruktor muriva () má dva argumenty: detský prvok kontajnera a možnosť objektu. Inicializačný kód bude nasledovný.
Var elem \u003d Document.QueryVektor ("prvky-grid"); var msnry \u003d Nové murivo (ELEM (// MOŽNOSTIKOĽVEKEVYVORA: " // prvok argument môže byť volič reťazca // pre individuálny prvok var msnry \u003d nová muriva (". Elements-GRID", (// Možnosti));
Úprimne, nefungoval som s Vanilkou JS, preto nemôžem povedať konkrétne to, čo je dobré ako jQuery. Len viete, že existuje takáto metóda.
Inicializácia cez HTML.
Môžete inicializovať murivo cez HTML, bez toho, aby ste napísali jeden riadok JavaScript kód. Aby ste to urobili, budete musieť pridať kontajner atribút- "Data-Masonry" na všetky detské prvky. Možnosti je možné prenášať ako hodnotu.
Prenesené parametre sa musia zhodovať s formátom JSON. Chcem upriamiť vašu pozornosť na použitie citácií v kóde. Citáty pre atribút dátového muriva sú jednoduché a pre prenášané možnosti - dvojnásobne. Tí. To je, ako sa zobrazuje v príklade.
Táto možnosť je možné použiť, ak nechcete používať prebytočný Javascript na stránke. Nechcem napríklad okamžite odoslať jQuery, ak nebol použitý kdekoľvek na stránke.
Tu je taká knižnica. Neexistuje nič komplikované. Čo bude ďalej?
Veľkosti prvkov
Rozmery dcérskych prvkov môžu byť pevné aj gumené. S pevnou veľkosťou (šírka a výška) šírky blokov blokov a dizajnu je nastavená v súbore SSS Styling. Výška, ktorú chcem povedať, ak používate prázdne bloky, výška bloku bude liečená prehliadačom na základe jeho obsahu. V mojom prípade sa nepýtam výšku, pretože Obrázky, takže máte vlastnú výšku.
...
Gumová mriežka
S gumovou mriežkou je šírka prvkov nastavená ako percento. Gumová mriežka sa používa hlavne v adaptívnom dizajne. Budeme hovoriť viac o možnostiach nižšie.
...
Zábery.
Niekedy, keď je stránka načítaná, môže sa stať, že prvky sa navzájom prekrývajú. Zároveň idú na všetkých v jednej paličke a vyzerá hrozne. Takže tento problém môžete vyriešiť s malou knižnicou - zábery.. Najlepšia vec sa prejavila so mnou s adaptívnym dizajnom. Bolo to, keď som otvoril stránku z mobilného telefónu mriežku obrázkov, ktoré som išiel na jednu hromadu.
Pripojte zábery s CDN:
Použitie položky ImageLaladed je umiestnená na stránke len po jeho plnom zaťažení.
// init murronry var $ grid \u003d $ (". mriežka"). Masonry ((// Možnosti ...)); // Layout Murivo po každom zábere zaťaženie $ Grid.imagesload (). Progress (Funkcia () ($ Grid.maasonry ("rozloženie"););
Alebo inicializácia muriva sa vyskytuje až po úplnom zaťažení všetkých obrázkov.
Var $ grid \u003d $ (". Mriežka"). Imagesloadované (funkcia () (// init muronry po všetkých obrázkoch načítali $ grid.masonry ((// možnosti ...));););
Možnosti (možnosti)
Teraz sa zaujímame o tom, čo môžeme prejsť metódu možností murárstvo ().
Všetky možnosti sú zoskupené. No, je to hotové, aby bolo ľahšie navigovať.
Pozrime sa teraz, aké možnosti sú zahrnuté v konkrétnej skupine.
položkaVektor
Táto voľba označuje, aké prvky sa použije murivý účinok. Túto možnosť je užitočné, pretože môžeme znížiť položky, ktoré nie sú súčasťou rozloženia. Tento parameter nám už známy, keď rozoberáme inicializáciu muriva.
ItemsECECTOR: "BEZPEČNOSŤ"
stĺpec.
Určuje šírku prvkov rozloženia. Ak tento parameter vynechajú murivo vonkajšiu šírku prvého prvku. Vývojár vždy radí, aby ste určili šírku reproduktorov, či už je pevná alebo gumová prvky.
Stĺpec: 80.
Veľkosti prvkov (veľkosť elementu)
Ak chceme, aby sa naše usporiadanie s gumovými prvkami, napríklad s adaptívnym dizajnom, potom na tieto účely je parameter, ktorý robí naša gumová mriežka.
percenta
Kód gumového mriežky sme rozoberali vyššie, ale možnosti nestúpili do detailov.
...
Ako vidíme, aktivovať gumovú mriežku, pridali sme percentný parameter na inicializačný kód s booleovou hodnotou " pravda.". A ako šírka ukázala triedu prvku, ku ktorému je šírka v percentách priradená v CSS.
Žľabu.
Medzi prvkom, môžete nastaviť zarážku horizontálne pomocou možnosti. Žľabu., Absolvovanie čísla. Číslo bude zodpovedať ústupom v pixeloch.
Odkvapka: 15.
Vertikálne zarážky medzi prvkami sú nastavené v CSS.
Prvok (okraja-dole: 15px;)
Prerážky môžu byť nastavené ako percento, t.j. Budú sa líšiť v závislosti od veľkosti okna prehliadača.
...
Pred zoznamom položiek sme vytvorili prázdny DIV blok.
CSS pre tento blok ukázali šírku v percentách. A v možnosti inicializačného kódu Žľabu. Uviedli sme triedu tohto prázdneho prvku. Samotný script vytvorí odsadenie v percentách, založené na šírke tohto bloku.
pečiatka.
Táto možnosť môže byť priradená položiek, ktoré budú opečiatkované v murnej mriežke. Zostávajúce prvky budú nižšie a bude obsahovať opečiatkované. Niekedy to môže byť užitočné. možnosti pečiatka. Prejdeme triedu opečiatkovaného prvku.
Pečiatka: ".stamp"
Ak je to potrebné, môžete podrobnejšie vyhľadávať v Codepeen, rovnako ako upraviť.
fitwidth.
Podstatou tejto možnosti je, že keď ho aktivujeme materským prvkom, pridá sa pevná šírka v pixeloch. Okrem toho sa šírka materského bloku rovná množstvu šírky všetkých detských prvkov. Určenie pravidla rodičovského bloku CSS teda " margin: 0 AUTO»Môžeme umiestniť blok s murivami v centre.
Prvky-GRIDE (Margin: 0 Auto;) IsfitWidth: TRUE
Pozor! Táto možnosť nefunguje s prvkami, ktorých šírka je uvedená v percentách. Hodnota možnosti "Stĺpca" musí byť špecifikovaná v pixeloch, napríklad "stĺpec: 120". V opačnom prípade môžu byť prvky prijaté do seba.
pôvod.
V predvolenom nastavení sú všetky prvky siete zarovnané vľavo. S možnosťou pôvod. Môžete zmeniť horizontálny prietok položiek a nastaviť zarovnanie vpravo doľava. Stačí prejsť booleovou hodnotou " fALSE. "
ORGANY ORGANY: FALSE
origintop.
Tiež, ako aj horizontálne, predvolené mriežkové prvky sú zarovnané na hornom okraji. S možnosťou origintop. Môžete zmeniť prúd položiek vertikálne a nastaviť zarovnanie zo zdola nahor, približne ako v Tetris 🙂.
OrigintP: False.
Nastavenie (nastavenie)
Prejdite na možnosti nastavení.
kontajner
Táto možnosť zruší štýly prvkov materskej kontajnera. Štandardne je rodičom nastavený na pravidlo "Pozícia: Relatívne". Toto pravidlo môže byť zrušené.
KontajnerStyle: null
Samozrejme, bolo možné prepísať cez súbor CSS pomocou "DÔLEŽITÉ", ale nemám rád to. Všeobecne platí, že to je zlé pravidlo tónu pri rozložení. Je lepšie vyčistiť štýly, tým viac nám dáva developer túto príležitosť.
prechod.
Trvanie prechodu, keď položky zmenia svoju polohu. Predvolený čas je nastavený - 0,4 sekundy. Formát času je nastavený ako formát času CSS.
Prechod / 0,4s "
Tu sú niektoré príklady nastavenia času.
// Rýchly prechod AnimationDúrenie: "0,2s" // Slow Animation Dositiva: "0,8s" // NO ANIMALION DOSTATIONDRATION: 0
zmenšiť veľkosť
Pomocou tejto možnosti môžete zrušiť zmenu veľkosti rodičovského bloku. Tí. V predvolenom nastavení, ak nešpecifikujete pevnú veľkosť rodiča so znížením obrazovky prehliadača, naše prvky detskej siete zmenia svoju polohu, presunie sa dole, zaberajú voľné miesto. Takže s možnosťou "Resize" môžete zrušiť prechody.
Zmena veľkosti: FALSE
Úprimne, ten istý efekt možno dosiahnuť, ak sa opýtate rodiča len pevnú veľkosť. Tu nerozumiem vývojárovi - buď som niečo nepochopil, alebo táto voľba sa koná v určitých prípadoch. Viac informácií nájdete na príklade v Codepeen. Skúste zmeniť veľkosť obrazoviek prehliadača. Potom zmeniť "Zmena veľkosti: FALSE" na "Zmena veľkosti: TRUE" A porozumiete, o čom hovoríme.
initlayout
Táto možnosť Aktivuje našu tehlovú mriežku pri inicializácii skriptu. V predvolenom nastavení je zapnutý - "INITLAYOUT: TRUE". Ale môžete zrušiť.
Initlayout: FALSE
Pred aktivovaním mriežky môžete použiť metódy a udalosti. Môžete napríklad urobiť, aby vaša mriežka bola aktivovaná kliknutím na konkrétne tlačidlo. No, potom niečo také.
V tomto článku nebudem rozoberať udalosti a metódy, pretože Článok, takže sa ukázalo odolám. Môžete ich nezávisle preskúmať na webovej stránke developera. Nájde aj príklady implementácie. Všetko je dosť zrozumiteľné. Nie vždy autori skriptov sú napísané takéto pokyny. Pre pokyny pre vývoja muriva, dal by som tvrdo - 5 . 🙂
Murárstvo na čistých CSS
K dispozícii je tiež možnosť realizovať murivo na čistom CSS. Nebudem tu dať všetok kód. Môžete sa pozrieť na Codepeen, nie je nič komplikované. V tomto prípade je vhodné skutočnosť, že nemusíte pripojiť extra knižnice JS a pochopiť možnosti plug-in.
V zásade je všetko, čo som uviedol vyššie, stačí použiť tehlový efekt na vaše webové stránky.
A na to všetko. Ďakujem vám všetkým za vašu pozornosť. Špecifikujte otázky v komentároch, budem vždy rád pomôcť. Uvidíme sa v nasledujúcich článkoch. Až!
Povedal som, ako zmeniť nový dizajn blogu, naivne veriť, že už bola vykonaná všetka dôležitá práca. Ale, ako sa ukázalo, bolo ešte veľa práce. Okrem toho som vytvoril svoju vlastnú časť. Ale prvé veci prvé. V tomto príspevku sa dotknem nasledujúce otázky:
- ako zaviesť nové WordPress čipy v predmete registrácie - rekordné formáty;
- ako opraviť problémy s polohovaním v skripte muriva;
- ako implementovať murivo na ľubovoľnú stránku.
A čo murions a javascript? Ukazuje sa, že existuje spoločný kontakt! Dúfam, že každý vie, kto sú takým slobodom. Ak nie, tu je krátka definícia:
Murárialebo frank-Masons - V doslovnom preklade "voľných orgánov", hnutie, ktoré sa objavilo v XVIII Century vo forme uzavretej organizácie. Freeminasronry berie svoj pôvod z málo známych zdrojov na konci XVI - začiatok XVII storočia, údajne prevádzkových workshopov Masona. Všetky aktivity Masons sú veľmi symbolické, veľa je spojené s architektonickým symbolom a jedným zo základných znakov je skrátená pyramída.
Mám veľmi záujem o Masons a všetko, čo je s nimi spojené. To je veľmi zaujímavé. Chcel by som hovoriť s skutočným Masonom (ale nie s takým, kto je len kvôli Ponte, zavolajte si slobodný murár, a to so skutočným majstrom). Ale to tak nie je. A v skutočnosti, že v téme dizajnu Pinbin používa skript, ktorý spôsobuje bloky s oznámeniami záznamov, aby sa zmenili ako tehly. Teraz je to veľmi obľúbený štýl, rôzne spôsoby sa používajú na realizáciu takéhoto účinku, ale jeden z najlepších je nepochybne javascript Murivo..
Oficiálne webové stránky tohto JavaScriptu je muronry.desandro.com, demonštruje, ako to funguje a ukazuje, ako ho pripojiť k stránke. Okrem toho môže byť ľubovoľné miesto, nie nevyhnutne WordPress, A a DLE alebo všeobecne statické HTML. Stojí za to povedať, že v WordPress z posledných verzií (z 3,8, ak nie som mýliť) Masný skript je už zahrnutý v základnom balení. Ale ako už bolo spomenuté - všetko v poriadku.
Ako implementovať v téme Formáty podpory Support Support Records?
Takže v procese zdokonaľovania som sa rozhodol zahrnúť do mojej témy registrácie funkcie chýbajúce funkcie v ňom, takže na hlavnom prípade by mohol publikovať stav, galériu, obrázok alebo video, s rôznym dizajnom týchto blokov. Som prehrabanovaný v archívoch dizajnu a našiel som veľmi malý počet takýchto tém, ktoré túto funkciu podporujú.
Ale ak aktualizujete svoje WordPress, formáty záznamov môžu byť implementované v predmete, a to je jednoduché. Takže najprv otvorte súbor funkcie.php.vaša téma registrácie a pridajte nasledujúci kód:
Add_action ("After_setup_Theme", "SLUG_POST_FORMATS"); Funkcia SLUG_POST_FORMATS () (post-formáty, pole ("stranou", "obrázok", "video", "audio", "Citát", "Link", "Galéria", "Chat", "Status")); )
Tento kód je možné vložiť do ľubovoľného umiestnenia súboru. funkcie.php., hlavnou vecou nie je porušiť žiadnu funkciu. Ak sa všetko urobí správne, potom pri vytváraní nového záznamu by ste mali mať nový formátový blok, ak nie, potom otvorte ponuku "Nastavenia obrazovky" v hornej časti a označte artikulovaný blok.
Ale táto funkcia nebude fungovať, kým sa v priečinku s témou nezobrazia špeciálne súbory, s názvami typu obsah-niečo.php. - v názve "niečo" súbor, toto je indikácia šablóny, ktorej formát bude tento súbor.
Môžu byť:
Formáty nie sú potrebné na použitie všetkého, ale môžete zadať v kóde nad iba tie, ktoré potrebujete napríklad, ak potrebujete len video, jeden obrázok a galériu, potom vložte do funkcie.php.takýto kód:
Add_action ("After_setup_Theme", "SLUG_POST_FORMATS"); Funkcia SLUG_POST_FORMATS () (Post-formáty, pole ("image", "video", "galéria",);)
No, potrebujete iba súbory, ktoré sú uvedené v riadku: obsah-image.php, obsah-video.phpa obsah-galéria.php. plus content.php. Pre bežné záznamy. Odkiaľ pochádzajú tieto súbory? Môžete ich exhaonovať z témy dvadsaťfursteen (alebo akékoľvek iné podporné formáty, napríklad prepravky) a potom spresniť. Stačí si stiahnuť túto tému do počítača, vykonať súbory, ktoré potrebujete a vyplňte na server do priečinka s dizajnom. Potom sa objavia v konzole v sekcii Vzhľad -\u003e editor. Okrem toho musia byť tieto súbory upravené do požadovaného formátu, musíte tiež vytvoriť štýly v súbore Štýl.css..
Toto je starostlivá práca, ale bude vyplatiť stotočet. Ukážem príklady takýchto súborov (približne používam na tomto blogu):
Content-Status.php súbor:
Obsah-video.php súbory a obsah-galéria.php je úplne rovnaký:
Content.PhP súbor:
">
Malé kopanie, môžete zistiť, čo robiť vlastné šablóny pre formáty záznamov. Zároveň by ste nemali zabudnúť na štýly CSS. Nemôžem však poskytnúť žiadne odporúčania, pretože je to veľmi špecifická otázka a závisí od konkrétnej témy registrácie.
Ak sa objavia ťažkosti, alebo niečo nezrozumiteľné - môžete pomôcť v komentároch, ako môžem.
Formáty záznamov sú zapustené a perfektne pracovať. Ale nie tam bolo niečo ... Pracujú dobre, ale s murizmovým skriptom nechceli byť priateľmi. Napríklad pri vkladaní galérie pomocou príslušného formátu nahrávania, pod galériou bol obrovský priestor, o rovnakej povahe, ktorý je z predchádzajúceho príspevku, kde som hovoril o podivných medzerách medzi oznámeniami pri používaní webových fontov z Google Fonty. Tu sú tieto problémy, naučíme sa rozhodnúť nižšie.
Ako opraviť Blokovanie polohovacích problémov v murive
Dovoľte mi, aby som vám pripomenul podstatu problému: Pri použití fontov Google Fonts v práci skriptu muriva sa problémy objavili vo forme rôznej výšky prestávok medzi oznámeniami článkov. Rovnaký účinok, len oveľa výraznejší a používanie rekordných formátov, najmä pri vkladaní galérie tliesnej galérie z Jetpack Pagin.
Ako som povedal, používam balenie Jetpack na mojom blogu, v ktorom je nádherný plugin módnych galérií dlaždice, ale pri vkladaní takejto galérie pod veľkým obdobím sa objavil:
Murivý skript je na vine, to je skript muriva: Pri použití webových fontov, funguje to skôr, ako sú písma naložené, a preto na konci plného zaťaženia stránky sú bloky mierne vyrovnané. Môže existovať ďalšia možnosť - keď sa bloky spočiatku stávajú hladkými a potom na seba.
Galéria je o tom istom: Pri budovaní krásneho kachľovej galérie tliesnej galérie z jetpack, skript, ktorý vypočíta veľkosť obrázkov trávi veľa času na tomto (a robí to v niekoľkých štádiách) a murivo funguje oveľa rýchlejšie a pre Umiestnenie blokov používa prvé prichádzajúce (medziľahlé) dáta, ktoré vracia script galérie. Preto sa objaví táto medzera.
Ak chcete bojovať na oficiálnej webovej stránke muriva (pozri vyššie) Existujú vysvetlenia: Sekcie Imagesload a webové fonty. Môžete sa oboznámiť s oficiálnymi metódami na zadaných odkazoch. Aby sme zjednodušili prácu na opravu týchto chýb, dám svoje odporúčania.
Ak chcete spravovať parametre muriva, používam súbor funkcie.js. V ktorom predpíšem potrebné pokyny a pripojte ho do šablóny. Po prvé, špecifikujem parametre animácie a potom vložte kód opravu chyby. Dám obsah tohto súboru úplne s komentármi, môžete ho použiť s prakticky bez zmeny:
/ * Definícia hlavných parametrov muriva * / jQuery (dokument) .Ready ($ ("# # post-area"). Masonry (/ * Uveďte ID bloku, ku ktorému používame murivu * / Isanimované: TRUE, / * Ak chcete zakázať blokovanie blokov, umiestnite false * / animationoptions: (Trvanie: 500, / * Rýchlosť animácie v milisekundách * / Uvoľnenie: "Lineárny", front: FALSE))););); / * Korekcia problémov s galériou * / / * Enable Masonry * / / / * Oneskorenie vykonania, kým nie sú všetky obrázky načítané * / / * Štart * / (funkcia (# po ploche "); / * Poznámka: Tu potrebujete Uveďte blokovanie bloku * / $ kontajner.Imagesloadované (funkčné () ($ container.masonry ();));))) (jQuery); / * END * / / * Upevňovacie problémy s webovými fontami * / / * Štart * / Funkcia TriggigMermaASonry () (ak (! $ Kontajner) (návrat;) $ container.masonry (());) $ (funkcia () () $ kontajner \u003d $ ("# po ploche"); TriggimerMasonry ();); TYPEKIT.LOAD ((Active: Triggmmonry, neaktívne: Triggermsonry); /* koniec */
Vyberte, čo potrebujete, a komentáre a zbytočnú časť skriptu je možné vymazať, napríklad, ak máte len problém s webovými fontami, oneskorenie pri načítaní obrázkov možno vymazať.
Pripojte tento súbor do šablóny. V súbore predmetu hEADER.PHP.pred zatváraním Vložiť:
Mimochodom, tento kód môže byť pripojený priamo na stránke, ako aj pred zatvoreným značkou Vložiť:
Účinok bude približne rovnaký, hoci Javascript je správne pripojený k súboru.
Mimochodom, ak máte WordPress, potom pripojte samotný script Muriry a súbor nastavenia je možný prostredníctvom súboru. funkcie.php.vo vašej téme, len pridáte kód do nej:
Funkcia Mason_Script () (WP_REGISTISTER_SIPTOR ("MASONRY", "/ INPUT J. / FILE / MAASONRY.PKGD.MIN.JS"); wp_enqueeue_script ("Masonry.Functions", "cesta / do / súbor / funkcie.js"); Wp_enceue_script ("muriva");) add_action ("wp_enqueeue_scripts", "MASON_SIPTION");
Samozrejme, že to všetko nie je presné pokyny a sprievodca akciami, ale iba všeobecné odporúčania, pretože každý prípad je jedinečný a vytváranie univerzálnych sprievodcov je takmer nemožné. Ak máte otázky - Opýtajte sa v komentároch.
Ako implementovať murivo na ľubovoľnú stránku
Teraz si predstavte situáciu, na ktorej naše stránky nie sú zapnuté Cms wordpress Posledná verzia, ale povedzme ďalej (Engine DataLife) A tiež chceme takú krásnu polohu blokov pomocou muriva.
Všetko celkom jednoduché. Po prvé, stiahnete si z oficiálnej webovej stránky muriva mASONRY.PKGD.MIN.JS. . Nalejte ho na váš server a pripojte ho do šablóny. Pre DLE v téme main.tpl k zatváraniu Vložiť:
Teraz definujeme štruktúru bloku, v ktorej murivo bude fungovať. Napríklad:
V CSS musíte špecifikovať niečo ako:
Mason-box (šírka: 25%;) .Mason-box široký (šírka: 50%;)
Teraz stránka potrebuje inicializovať operáciu skriptu:
Teraz sa ukážem na naozaj spustený príklad:
1. Pripojte súbor mASONRY.PKGD.MIN.JS. Ako je uvedené vyššie.
2. Na stránke cez HTML, inicializujte skript:
3. V CSS sa zaznamenáva: \\ t
Halfnews-obsah (čalúnenie: 0 5px 5px 10px; okraje-dno: 15px; hranice: 1px pevná # e9e9e9; -webkit-box-tieň: 0 0 1px #bbb; -moz-box-tieň: 0 0 1PX #BBB; Box-Shadow: 0 0 1PX #BBB; Šírka: 345PX; / * Veľmi dôležitá položka - K dispozícii je šírka bloku * / / * Ak je to viac, než potrebujete, potom blokuje alebo nemôžete * / / * zarovnať horizontálne alebo uzavreté Na priateľa * / Margin-Left: 10px; / * je nastavený na vzdialenosť horizontálne medzi blokmi * /)
Tu je taký jednoduchý dizajn na hlavnej stránke webovej stránky Technotron (kde sa obsah nachádza v dvoch stĺpcoch).
To je všetko. Keby som sa niekde niekde mýlil, nebolo to na účel, len rýchly príspevok a chcel som veľa, takže chyby nie sú vylúčené - ak niečo nevychádza von, alebo niekde jasná chyba: pochopte, nájdeme chybu a nájdeme chybu a správny. Ospravedlňujem sa za obec opísaných metód.
Doteraz. Dúfam, že to bolo užitočné.
Namiesto epilogy:
Tajomstvo úspešného podnikania:
1. Heher ho pozná.
2. Sam nejako vyšla
Tagy :,,,
Pisano 08/01/2014 
