Ahoj všichni! Dnes bych chtěl říct o tom, jak bez pluginů a skriptů cihlové zdivo bloky(zdivo. z angličtiny - Cihlové zdivo), to znamená, že bloky různých výšek budou krásně rozmístěny bez velkých prázdných odrážek. Ano! To vše lze provést velmi snadno s CSS.
CSS má vlastnost, se kterou můžete vytvořit vícebarevný text nebo bloky. Používají ji.
Vlastnost je nazývána sloupce. Jedná se o univerzální vlastnost, která vám umožní okamžitě nastavit šířku a počet sloupců. Více o tom si můžete přečíst dobré CSS. adresář.
Takže vše je vlastně velmi jednoduché. Například máme 6 prvků různých výšek, ale stejnou šířku. Jasný příklad je postranní panel (boční sloupec) na stránkách. Existují všechny bloky stejné šířky, ale různých výšek. Obvykle B. mobilní verze SiteBar stránka má po hlavním obsahu, v dolní části webu a samotný obsah dělá celou šířku obrazovky. Samozřejmě, že místo je také iracionální v jednom sloupci, protože na stranách bude spousta volného místa, zejména pokud se podíváte z tabletu.
Ale pokud bloky nastavit nemovitost displej: Inline-blok, pak se automaticky, pokud je dostatek šířky kontejneru, bude umístěna v několika sloupcích. Všechno však nemusí vypadat velmi krásně:
Souhlasím, tyto odsazení mezi bloky nevypadají vůbec. Proto je naléhavě nutné být opraveno! Pro tohle k bloku kontejneru,ve kterých blokech jsou umístěny, musíte přidat potřebné styly:
MOZ-Sloupce: 300px Auto; -Webkit-sloupce: 300px Auto; Sloupce: 300px Auto;
Pro cross-prohlížeč použijte vlastnosti pro prohlížeče Firefox a Webkit (Chrome, Safari, Android). Například jsme umístěni s bloky s označený seznam Pak budou vypadat styly pro příklad na obrázku takto:
UL (šířka: 1050px; -Moz-Clou0s: 300px Auto; -webKit-sloupce: 300px Auto; sloupce: 300px Auto;) LI (zobrazení: inline-blok; Box-Shadow: 0 8px # 555; Seznam styl: Žádný ; Polstrování: 10px; šířka: 300px; okraj-dno: 30px; vertikální-align: top;)
V tomto případě budou bloky umístěny v několika sloupcích. minimální Šířka 300px a počet sloupců bude automaticky určen prohlížečem. Je vhodné vytvořit přizpůsobivost. V tento případ Bude tam 3 sloupce, a to je, jak to bude vypadat:
Šířka kontejneru (1050px) bude muset vyzvednout, pokud chcete, aby vzdálenost mezi svislým bloky se shodovala s vodorovně. V opačném případě bude šířka mezi reproduktory automaticky nainstalována prohlížečem. Mít majetek sloupcová mezera.který stanoví vzdálenost mezi reproduktory. Ale v tomto případě nebude fungovat tak, jak chcete.
Existuje další možnost: Pro bloky musíte nastavit vlastnost šířky: 100%. Také, pokud je vlastnost polstrování nainstalována, jako v mém případě, musíte nastavit vlastnost Box-Sizing: Border-Box. Nyní můžete bezpečně přidat vlastnost sloupec-gap na kontejner, abyste nastavili vzdálenost mezi sloupcemi. Tak to bude fungovat podle potřeby.
Souhlasím, vypadá to mnohem lépe! Můžete také umístit bloky "DIV" uvnitř kontejneru DIV. Buď, pokud potřebujete distribuovat text do několika sloupců, jednoduše v tagu "P" s, například, třída textu přidat požadovaný text a pro tuto třídu předepisujeme nemovitost sloupce..
To je vše! Takže jednoduše bez zbytečných skriptů můžete umístit bloky ve formě zdiva nebo textu v několika sloupcích. Ale všimněte si, že v tomto případě bude vypadat pouze v případě, že bloky jsou stejné šířky. V jiném případě zůstane pouze použít dobrý zdivo skriptu. Skript automaticky umístí každý blok. Ale to je další téma ...
To je vše! Pokud se objevily některé otázky nebo komentáře, nechte je v komentářích. Hodně štěstí!
V sekci blogu. Tato fotka wordpress téma Bude to náš příklad, ale pravděpodobně jste viděli používání jQuery zdiva a na jiných wordpress weals.
Co je jquery mansory
Zednické zdivo lze považovat za přidávání CSS, se kterým můžete umístit prvky vodorovně, otočením do vertikální polohy v závislosti na šířce monitoru. V důsledku toho jsou vertikální mezery mezi prvky různých výšek minimalizovány. Pokud chcete udělat taky cSS HELP.Věřte mi, že budete mít spoustu bolesti hlavy.
V tomto příkladu můžete vidět princip jQuery zdivo principu dříve a po použití:
Jak vidíte výsledek na obličej, pokud používáte CSS Float: vlevo, pak jsou prázdné intervaly, musíte použít polohu CSS, což je poměrně problematické, můžete, ale proč to pomůže zdivo pomůže.
Používáme jquery mansory na wordpress weals
Zednické zdivo lze použít ve dvou případech. První je, když všechny vaše bloky s informacemi jsou stejné šířky, v tomto případě musíte použít tento kus skriptu:
|
Pokud máte různé šířky bloky, musíte použít následující kód:
|
Kde naolumnwidth. To je šířka mřížky (v pixelech). Zednické zdivo bude dodržovat tato dvě pravidla:
- Celková šířka prvků (vypočtená podle tohoto vzorce) \u003d CSS šířka + polstrování-vpravo + polstrování-vlevo + hranice-pravá šířka + hraniční levicová šířka + okraj-vpravo + okraj vlevo
- Při použití sloupcoviny musí být všechny prvky uspořádány vodorovně na šířku sloupce (například pro sloupcovou sloupci: 200, položky začínají 0 nebo 200 nebo 400 pixely a tak dále). Nemusí to být zcela jasné, ale v tom není nic těžkého, podíváme se na obrázek.
První prvek celkové šířky 190px a okraje vpravo: 0. A druhý prvek má okraj vlevo: 0, teoreticky, tyto dva prvky se musí navzájem dotýkat. Ale protože sloupec má hodnotu 200px, pak druhý prvek začíná zobrazit vzdálenost 200px.
Tento proces se nestane, pokud nemáme sloupcovou hodnotu ve skriptu a všechny prvky začínají vzájemně, takže je nutné je oddělit s okrajem.
Takže zázraky jquery zdivo a wordpress 3 ..
Teď jsem trochu kódoval. Chcete-li začít, připojte potřebné knihovny JQuery a zdiva v souboru header.php. Přeskočit tento kód v header.php (můžete si můžete stáhnout na stránce off):
// Připojte JQuery.// připojit zdivo
Ujistěte se, že se před WP_headem stává WP_ENQUEUEUE_Script. Skript zdiva se nachází ve složce JS mém tématu, můžete mít jiný název.
< 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á Script zdiva a Div Class \u003d "Masonry_Box" zobrazí naše příspěvky pomocí skriptu. Nyní CSS, můžete udělat content_maasonry například šířka 100%, pak nemusíte být léčeni, ale pokud uděláte pevnou šířku content_masonry, musíte provést potřebné výpočty. Například, děláte 4 sloupce s příspěvky, každý má šířku + polstrování 190px a okrajově vpravo: 10px, pak velikost obsahu kontejneru content_maasonry bude 200 x 4 \u003d 800px:
#Content_Masonry (šířka: 800px;) #content_Masonry .Masonry_box (šířka: 170px; polstrování: 10px; vpravo na okraji: 10px; okraj-dno: 10px;)
#Content_Masonry ( šířka: 800px; #Content_Masonry .Masonry_box ( šířka: 170px; polstrování: 10px; právo okraje: 10px; marže-dno: 10px; |
Nyní zůstane přidat PHP, který bude generovat HTML, v tomto případě budu používat WP_Query pro zobrazení 20 příspěvků z kategorie zdiva, například na zobrazení stránky (strana.php):
< div id = "content_masonry" > $ Linksposts \u003d nový wp_query (); $ LinkSposts -\u003e dotaz ("Showposts \u003d 20 & Cat \u003d 10"); has_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, adresa url, true); Jinak the_permalink (); ?\u003e ""> < / a > < / h2 > |
Dobrý den všem! To je můj druhý článek tento rok. Zveřejnil jsem první o ikoně písmo docela nedávno a jsem rád, že jsem našel čas na psaní druhého článku s tak malou maržovou. Zatím, pro mě je to malá mezera, protože Často často psát žádnou příležitost, ale snažím se. 😎 A teď se zabývají tomu, co bude diskutováno v tomto článku.
Možná, že mnoho z vás viděl na stránkách umístění prvků (obrázky, články, různé bloky) cihlový efekt. Říkáte - je možné udělat prostřednictvím CSS? Možná je to možné, ale pouze taková flexibilita nebude. Skript sám umístí položky na stránce pomocí vertikálního prostoru. Také při polohování bloků, skript přidává animaci. Je možné jej vinit v adaptivním designu, snižování okna prohlížeče. Takže je to všechno dosaženo s malým JavaScript knihovna - zdivo. Tento skript je velmi široce používán v moderních návrhů trendů. Nevím, jak v ruském pohanství, ale v nadhodnocení internetu zdivo dostal velkou popularitu.
Autorově zedník je David Desandro z USA. Chtěl bych mu říct, že vám hodně děkuji za tak dobrý scénář. Tato knihovna je distribuována zcela zdarma, takže ji můžete bezpečně používat na svých webových stránkách.
Myslím, že mnoho líbilo. Ve skutečnosti všechno vypadá velmi pěkně. Pojďme se zabývat tím, jak pracovat s zdivem, jak přivést naše bloky na našich stránkách s cihlovým efektem?
Struktura článku
Za prvé, musíme jít do stránky skriptu - http://maasonry.desandro.com a stáhnout nejnovější verzi. V době psaní tohoto článku je tato verze 4.0. Také na těchto stránkách naleznete podrobnou dokumentaci v angličtině. Odkazuji na scénář hlavních bodů z dokumentace - jak se připojit, které možnosti jsou k dispozici atd. Nebudu mít vliv na všechno, protože Já sám jsem to nevzkraj v některých bodech. Chcete-li představit své stránky, musíte provést minimum akce. Nyní jste na to zvyklí.
Na webových stránkách stahování existují dvě verze scénáře - komprimované (minimalizované) a nekomprimované. Je lepší použít přesně - zdivo.pkgd.min.js. Knihovna může být také načtena z CDN:
nekomprimovaný
komprimované (minimalizováno)
Doporučuji vám připojit minimalizovanou verzi zdiva z CDN. Takže snižujeme počet zbytečných požadavků HTTP. Obecně platí, že bez ohledu na skript, který připojujete, pokud můžete připojit minalizovanou verzi pomocí CDN, pak jej připojte.
Chcete-li pracovat zdivo, musíme vytvořit rodičovský blok a dát prvky v něm.
Pro přehlednost jsem vytvořil demo stránku s obrázky různých velikostí. Vzal jsem obrázek jako příklad prvků, protože Mají různé výšky, ale místo obrázků může být libovolný blok: text, video, atd. Pokuste se snížit okno prohlížeče a zobrazí se snímky plynule změnit svou pozici.
Podívejme se, jak bude HTML kód vypadat:
...
#Container (hranice: 1px Solid #ccc; marže: 0 Auto; polstrování: 50px 0; max-šířka: 1170px;) / * mesh element * / 0, 0,35); okraj-dno: 15px; polstrování: 1PX; šířka: 280px) / * / mesh element * / h1 (text-zarovnání: centrum; marže: 0 50px)
Jak vidíte, CSS se zde používá minimálně.
Inicializovat zásuvný modul zdiva
Můžete to udělat několika způsoby.
Inicializace zednického inicializace přes JavaScript
Můžete použít zdivo jako JQuery-Plugin:
$ ("Volič"). Zdivo ();
Ale mějte na paměti, že pro tuto metodu musíte být připojeni k knihovně jQuery:
Na demo stránce I inicializoval zdivo jako JQuery-Plugin, tj. Mám následující inicializační kód:
JQuery (dokument) .Ready ($) ($ ("Elements-Gride"). Zednické (// Options Volectionselector: ".element-Položka", sloupcová skupina: 300));));));
Pokud jste vypracovali metodu "zdivo ()", jsme prošli dvěma možnostmi: účes a sloupec. Ty jsou vyžadovány dvě možnosti. Podle vývojáře jsou nezbytné pro normální provoz skriptu. Budeme však hovořit o možnosti níže. Všechno, po těchto akcích by mělo fungovat všechno.
Inicializace s vanilkovým JavaScriptem
Můžete použít zdivo také s vanilkou JS:
Nový zdivo (Elem, Možnosti)
Konstruktor zednického () trvá dva argumenty: dětský prvek kontejneru a možnost objektu. Inicializační kód bude následující.
Var elem \u003d dokument.QuerySelektor (". Prvky-gride"); VAR MSNRY \u003d Nový zdivo (Elem (// Volby Položek: ".element-položka", sloupcová vláda: 200); Argument prvku může být volicí řetězec // pro individuální prvek var msnry \u003d nové zdivo (". Prvky-gridy", (// možnosti));
Upřímně jsem nefungoval s vanilkou JS, proto nemůžu říct konkrétně, co je to dobré než jQuery. Vím, že existuje taková metoda.
Inicializace přes html.
Můžete inicializovat zdivo přes HTML, aniž byste napsali jeden řádek JavaScript kód. Chcete-li to provést, budete muset přidat atribut- "Data-zdivo" kontejner na všechny podřízené prvky. Možnosti mohou být přeneseny jako hodnota.
Přenesené parametry musí odpovídat formátu JSON. Chci upozornit na použití citací v kódu. Citáty pro atribut datový zdivo jsou jednoduché a pro přenosové možnosti - dvojité. Ty. To je způsob, jak je uvedeno na příkladu.
Tato volba může být použita, pokud nechcete používat přebytečný JavaScript na webu. Například bych okamžitě nedělal jQuery, kdyby nebyl používán kdekoli na místě.
Zde je taková knihovna. Není nic složitého. Co bude dál?
Velikosti prvků
Rozměry dceřiných prvků mohou být oba pevné i gumy. S pevnou velikostí (šířkou a výškou) šířky bloků bloků a konstrukce je nastavena v souboru Styling CSS. Výška Chci říct, pokud používáte prázdné bloky, výška bloku bude ošetřena prohlížečem na základě jejího obsahu. V mém případě se neptá o výšku, protože Obrázky mají vlastní výšku.
...
Gumová síť
S gumovou mřížkou je šířka prvků nastavena jako procento. Gumová mřížka se používá hlavně v adaptivním provedení. Budeme hovořit více o níže uvedených možnostech.
...
Imagesloaded.
Někdy, když je stránka načtena, může se stát, že se prvky navzájem překrývají. Zároveň jdou do jednoho hrudku a vypadají hrozně. Takže můžete tento problém vyřešit s malou knihovnou - imagesloaded.. Nejlepší se mnou projevila s adaptivním designem. Bylo to, když jsem otevřel místo z mobilního telefonu mřížky obrázků, které jsem šel na jednu hromadu.
Připojení obrázky CDN:
Použití imagelaaded položky je umístěna na stránce pouze po jeho plném zatížení.
// init zdivo var $ mřížky \u003d $ (". mřížka"). zdivo ((// možnosti ...)); // rozložení zdiva po každém snímku zatížení $ grid.imageseded (). Pokrok (funkce () ($ grid.maasonry ("rozložení");));
Nebo inicializační zdivo dochází pouze po plném zatížení všech snímků.
VAR $ Grid \u003d $ (". Mřížka"). Imagesloaded (funkce () () (// inite zdivo po všech snímcích načtené $ grid.Masonry ((// možnosti ...));));));
Možnosti (možnosti)
Teď se podívejme, co můžeme předat metodu možností zdivo ().
Všechny možnosti jsou seskupeny. No, to se děje, aby bylo snadnější navigovat je.
Podívejme se, jaké možnosti jsou zahrnuty v konkrétní skupině.
zbožíelector
Tato volba označuje, jaké prvky bude použit vliv zdiva. Je užitečné specifikovat tuto možnost, protože můžeme snížit položky, které nejsou součástí uspořádání. Tento parametr je již obeznámen, když demontujeme inicializaci zdiva.
Polyelector: ".element-položka"
šířka sloupce.
Určuje šířku prvků rozvržení. Pokud tento parametr vynecháte zdivo, bude mít vnější šířku prvního prvku. Vývojář vždy doporučuje specifikovat šířku reproduktorů, ať už je to pevné nebo pryžové prvky.
ColumnWidth: 80.
Velikosti prvků (velikost prvku)
Pokud chceme, aby naše uspořádání s gumovými prvky, například s adaptivním designem, pak pro tyto účely existuje parametr, který dělá naši gumovou mřížku.
procentozice
Rozebrali jsme kodex gumové mřížky výše, ale možnosti nešel detaily.
...
Jak vidíme, aktivovat gumovou mřížku jsme přidali parametr procentposition do inicializačního kódu s booleovskou hodnotou " skutečný.". A jako šířka označila třídu prvku, ke kterému je šířka v procentech přiřazena v CSS.
Žlab.
Mezi prvky můžete nastavit odrážka horizontální pomocí volby. Žlab.A předávání čísla. Číslo bude odpovídat ústupům v pixelech.
Gutter: 15.
Svislé odsazení mezi prvky jsou nastaveny v CSS.
Položka prvku (okraj-dno: 15px;)
Odsazení lze nastavit jako procento, tj. Budou se lišit v závislosti na velikosti okna prohlížeče.
...
Před seznam položek jsme vytvořili prázdný divoký blok.
CSS pro tento blok ukázal šířku v procentech. A v možnost inicializačního kódu Žlab. Ukázali jsme třídu tohoto prázdného prvku. Samotný skript vytvoří odsazení v procentech, založený na šířce tohoto bloku.
razítko.
Tato volba může být přiřazena položky, které budou vyraženy ve zdivné mřížce. Zbývající prvky budou níže a budou obsahovat razítko. Někdy to může být užitečné. Možnosti razítko. Procházíme třídě razeného prvku.
Razítko: ".Stamp"
Můžete podívat podrobnější informace o Codepen, jakož i v případě potřeby upravit.
fitwidth.
Podstata této možnosti je, že když ji aktivujeme nadřazeným prvkem prvku, přidá se pevná šířka v pixelech. Šířka rodičovského bloku se navíc rovná množství šířky všech dětských prvků. Tak, určující pravidlo CSS rodičovského bloku " margin: 0 Auto»Můžeme umístit blok s zděnými prvky v centru.
Prvky-gride (marže: 0 Auto;) ISFITEWIDTH: TRUE
Pozornost! Tato volba nefunguje s prvky, jejichž šířka je označena v procentech. Hodnota volby "Columanwidth" musí být uvedena například v pixelech, například "ColumnWidth: 120". Jinak mohou být převzaty prvky.
originál.
Ve výchozím nastavení jsou všechny prvky sítě zarovnány vlevo. S možností originál. Horizontální tok předmětů můžete změnit a nastavit zarovnání vlevo. Stačí projít booleovskou hodnotu " nepravdivé. "
Originál: False
originop.
Také, stejně jako horizontálně jsou výchozí prvky mřížky zarovnány na horním okraji. S možností originop. Proud položek vertikálně můžete změnit a nastavit zarovnání zdola nahoru, přibližně jako v Tetris 🙂.
Originop: False.
Nastavení (nastavení)
Přejděte do možností nastavení.
kontejnerytyle
Tato volba zruší styly prvků rodičovského kontejneru. Ve výchozím nastavení je rodič nastaven na pravidlo "Pozice: Relativní". Toto pravidlo lze zrušit.
Kontejnerytyle: null.
Samozřejmě bylo možné přepsat přes soubor CSS pomocí "! Důležité", ale nemám rád. Obecně, myslím, že se jedná o špatný tón pravidlo v rozvržení. Je lepší vyčistit styly, tím více nám developer dává tuto příležitost.
přechodová výjištění.
Trvání přechodu, když položky mění jejich umístění. Výchozí čas je nastaven - 0,4 sekundy. Formát času je nastaven jako časový formát CSS.
Přechodná výjištění: "0,4s"
Zde jsou některé příklady nastavení času.
// Rychlé animace přechodová: "0.2s" // Pomalu animace přechodová: "0.8s" // Žádná animační přechodová výjimka: 0
změnit velikost
Pomocí této volby můžete zrušit změnu velikosti nadřazeného bloku. Ty. Ve výchozím nastavení, pokud nezadáte pevnou velikost rodiči s redukcí obrazovky prohlížeče, naše prvky dětské mřížky změní jejich umístění, budou pohybovat dolů, zabírat volný prostor. Takže s možností "Změna velikosti" můžete zrušit přechody.
Změna velikosti: false.
Upřímně řečeno, stejný efekt lze dosáhnout, pokud požádáte rodiče jen pevnou velikost. Zde nerozumím vývojářovi - buď jsem nepochopil něco, nebo tato možnost probíhá v určitých případech. Více informací naleznete v příkladu v kódech. Zkuste změnit velikost obrazovky prohlížeče. Pak se změní "Změna velikosti: false" na "Změna velikosti: true" A pochopíte, o čem mluvíme.
initlayout.
Tato volba aktivuje naši cihlovou mřížku při inicializaci skriptu. Ve výchozím nastavení je zapnuta - "Initlayout: true". Ale můžete zrušit.
Initlayout: false.
Před aktivací mřížky můžete použít metody a události. Můžete například udělat, že vaše mřížka bude aktivována kliknutím na konkrétní tlačítko. No, pak něco takového.
V tomto článku nebudu rozebrat události a metody, protože Článek, takže se ukázalo objemový. Můžete samostatně prozkoumat je na webových stránkách vývojáře. Také naleznete příklady implementace. Všechno je docela srozumitelné. Ne vždy autory skriptů jsou napsány takové pokyny. Pro pokyny zdivného developera bych byl tvrdě - 5 . 🙂
Zdivo na čisté css
K dispozici je také možnost implementovat zdivo na čistých CSS. Nebudu tady dát celý kód. Můžete se podívat na Codepen, není nic složitého. V tomto případě je vhodné, že nemusíte připojit další knihovny JS a porozumět možnosti plug-in.
V zásadě, vše, co jsem uvedl výše, stačí použít cihlový efekt na vašich webových stránkách.
A na to vše. Děkuji vám za vaši pozornost. Určete dotazy v komentáři, vždy budu rád, že můžu pomoci. Uvidíme se v následujících článcích. Dokud!
Řekl jsem, jak upravit nový design blogu, naivně věřit, že byla již učiněna veškerá důležitá práce. Ale jak se ukázalo, tam bylo ještě spoustu práce. Kromě toho jsem to vytvořil vlastní část. Ale první věci. V tomto příspěvku se dotkne následujících otázek:
- jak představit nové wordpress čipy v předmětu registračních formátů záznamů;
- jak opravit problémy s blokováním polohování v scénáři zdiva;
- jak implementovat zdivo na libovolné místo.
A co zednáři a JavaScript? Ukazuje se, že existuje společný kontakt! Doufám, že každý ví, kdo jsou takové zedníci. Pokud ne, zde je stručná definice:
Zednářstvínebo frank-Masons - V doslovném překladu "Zdarma zedníky", pohyb, který se objevil v Xviii století ve formě uzavřené organizace. Freemasonry vezme svůj původ z nejmenších zdrojů na konci XVI - začátek XVII století, údajně provozní workshopy Masona. Všechny aktivity zednáků jsou velmi symbolické, hodně je spojeno s architektonickou symbolikou a jedním ze základních znaků je zkrácená pyramida.
Velmi se zajímám o zednáky a vše, co je s nimi spojeno. Je to velmi zajímavé. Chtěl bych mluvit se skutečným masonem (ale ne s takovým, kdo je jen kvůli Ponte, zavolej si zdarma zedník, konkrétně s reálným mistrem). Ale to není případ. A ve skutečnosti, že v tématu Design Pinbin používá skript, který způsobuje bloky s oznámením záznamů, které se mají zařadit jako cihly. Je to nyní velmi populární styl, různé způsoby se používají k implementaci takového účinku, ale jeden z nejlepších je nepochybně JavaScript Zdivo..
Oficiální stránky tohoto JavaScriptu je Medonry.Desandro.com, demonstruje, jak to funguje a ukazuje, jak jej připojit k webu. Kromě toho může být libovolné místo, ne nutně WordPress, A a DLE nebo obecně statický HTML. Ale stojí za to říct, že v aplikaci WordPress z posledních verzí (od 3.8, pokud nejsem mylný) Skript zdivo je již zahrnut do základního balíčku. Ale jak již bylo zmíněno - vše v pořádku.
Jak implementovat v tématu Záznamy o podpoře podpory WordPress?
Takže v procesu zdokonalení jsem se rozhodl zahrnout do mém tématu registrace Funkce chybějící funkce v něm tak, že na hlavním by mohla publikovat stav, galerie, obraz nebo video, s různým designem těchto bloků. Rummaged v archivech designu a našel velmi malý počet takových témat, které tuto funkci podporují.
Pokud však aktualizujete aplikaci WordPress, formáty záznamů mohou být implementovány v předmětu a to je snadné. První ze všech otevřete soubor funkce.php.vaše téma registrace a přidejte k ní následující kód:
Add_action ("compress_setup_theme", "slug_post_formats"); Funkce slug_post_formats () (post-formáty, pole ("stranou", "obrázek", "video", "audio", "citace", "odkaz", "galerie", "chat", "stav",)); )
Tento kód lze vložit do libovolného umístění souboru. funkce.php.Hlavní věc není porušit jakékoli funkce. Pokud se vše provádí správně, pak při vytváření nového záznamu byste měli mít nový blok formátu, pokud ne, pak otevřete menu "Nastavení obrazovky" nahoře a označit kloubový blok.
Ale tato funkce nebude fungovat, dokud se neobjeví speciální soubory ve složce s tématem, s názvy typu obsah-něco.php. - V názvu "Něco" souboru je to indikace šablony, ve které formát bude tento soubor.
Oni mohou být:
Formáty nejsou nutné použít vše, ale můžete zadat v kódu výše pouze ty, které potřebujete například, pokud potřebujete pouze video, jeden obrázek a galerii, pak vložte do funkce.php.takový kód:
Add_action ("compress_setup_theme", "slug_post_formats"); Funkce slug_post_formats () (post-formáty, pole ("obrázek", "video", "galerie",)););)
No, potřebujete pouze soubory uvedené v řádku: obsah-image.php, obsah-video.phpa content-gallery.php. plus content.php. Pro běžné záznamy. Odkud tyto soubory pocházejí? Můžete je exhaon z tématu twentyfurteen (nebo jakékoli jiné podpůrné formáty, například bedny) a pak zdokonalte. Stačí stáhnout toto téma do počítače, vezměte si soubory, které potřebujete a vyplňte server do složky s designem. Poté se objeví v konzole v sekci Vzhled -\u003e Editor. Kromě toho tyto soubory musí být uvedeny do požadovaného formátu, musíte také vytvořit styly v souboru style.css..
Jedná se o dějinou práci, ale bude splácet stokrát. Ukážu příklady těchto souborů (přibližně používám na tomto blogu):
Soubor obsahu obsahu-status.php:
Soubory obsahu-video.php a content-gallery.php je úplně stejná:
Soubor content.php:
">
Malý kopání, můžete zjistit, co si vytvořit vlastní šablony pro formáty záznamů. Zároveň byste neměli zapomenout na styly CSS. Ale tady nemohu dát žádná doporučení, protože je to velmi specifická otázka a závisí na konkrétním tématu registrace.
Pokud vznikají potíže, nebo něco nepochopitelného - můžete pomoci v komentářích, než můžu.
Formáty záznamů jsou dobře zakotveny a perfektně fungují. Ale ne tam byl něco ... Pracují dobře, ale s zděným skriptem nechtěli být přáteli. Například při vložení galerie pomocí příslušného formátu záznamu, pod galerií byl obrovský prostor, o stejné povaze, což je z předchozího příspěvku, kde jsem mluvil o podivných mezerách mezi oznámeními při používání webových písem z Google Písma. Zde jsou tyto problémy se naučíte rozhodnout níže.
Jak opravit problémy s polohováním v zděném skriptu
Dovolte mi, abych vám připomněl o podstatu problému: Při použití písma Google Fonts v práci zděného skriptu se objevily problémy ve formě různých výškových přestávek mezi oznámením článků. Stejný účinek, pouze mnohem patrný a používání formátů zaznamenaných, zejména při vložení galerie kachlové galerie z jetpack pagin.
Jak jsem řekl, používám balíček Jetpack na mém blogu, ve kterém je nádherný plugin z módních dlaždicových galerií, ale při vkládání takové galerie za velkého období se objevila:
Skript zdiva je na vině, je to zdivo Script: Při použití webových písem funguje dříve než písma, jsou načteny, a proto na konci celého zatížení stránky jsou bloky mírně vyrovnané. Může existovat další volba - když se bloky zpočátku stanou hladkou a poté troubit na sebe.
Galerie je přibližně stejná: Když budova krásná dlážděná galerie dlážděná galerie z Jetpack, skript, který vypočítá velikost obrázků, tráví spoustu času na toto (a to dělá v několika fázích), a zdivo funguje mnohem rychleji a Umístění bloků používá první příchozí (mezilehlé) data, která vrátí skript dlaždic galerie. Proto se objeví tato mezera.
Chcete-li bojovat na oficiální webové stránce zdiva (viz výše) Existují vysvětlení: sekce imagesloaded a webová fonty. Na určených odkazech se můžete seznámit s oficiálními metodami. Ale zjednodušit práci na opravu těchto chyb, dám své doporučení.
Pro správu parametrů skriptu zdiva používám soubor funkce.js. Ve kterém jsem předepisoval nezbytné pokyny a připojte jej v šabloně. Nejprve zadám parametry animace a vložte kód opravy chybu. Dám obsah tohoto souboru zcela s komentáři, můžete jej použít s prakticky žádnou změnou:
/ * Definice hlavních parametrů zdiva * / jQuery (dokument) .Ready ($ ("# post-area"). Zdivo (/ * označují ID bloku, ke kterému používáme zdivo * / isanimated: true, / * Chcete-li zakázat bloku animace, umístěte nepravdivé * / AnimationOptions: (Trvání: 500, / * rychlost animace v milisekundách * / uvolnění: "lineární", fronta: false));));)); / * Oprava problémů s galerií * / / * Povolit zdivo * / / / * zpoždění provedení, dokud nejsou všechny snímky načteny * / / * Start * / (funkce (funkce # post-area "); / * Poznámka: Zde si také potřebujete Chcete-li zadat ID bloku * / $ container.imagesloaded (Functorter () ($ Container.Masonry ();));));)) (jQuery); / * END * / / * Upevnění Problémy s webovými písma * / / * Start * / Function TRIGERMAASONRY () (pokud (! $ Kontejner) (návrat;) $ Containert.Masonry (());) $ (funkce () () () () () () $ kontejner \u003d $ ("# post-area"); triggermaasonry ();)); Typekit.load (aktivní: triggermasonry, neaktivní: triggermasonry); /* konec */
Vyberte, co potřebujete, a komentáře a zbytečná část scénáře lze smazat, například pokud máte pouze problém s webovými písma, zpoždění při načítání snímků lze vymazat.
Připojte tento soubor v šabloně. V souboru předmětu header.php.před uzavřenou značkou Vložit:
Mimochodem, tento kód může být připojen přímo na stránce, stejně před zavírací značkou Vložit:
Účinek bude přibližně stejný, i když je JavaScript správně správně připojen k souboru.
Mimochodem, pokud máte WordPress, pak připojte samotný skript zdivo a soubor nastavení je možné prostřednictvím souboru. funkce.php.ve vašem tématu, jen přidat kód do něj:
Funkce mason_script () (wp_register_script ("zdivo", "/ vstup j. / File / maasonry.pkgd.min.js"); wp_enqueue_script ("zdivo." Wp_enceue_script ("zdivo");) add_action ("wp_enqueue_scripts", "mason_script");
Samozřejmě, že to vše není přesné pokyny a průvodce opatření, ale pouze obecná doporučení, protože každý případ je jedinečný a vytváření univerzálního průvodce je téměř nemožný. Máte-li dotazy - zeptejte se v komentářích.
Jak implementovat zdivo na libovolném místě
Představte si situaci, že naše stránky nejsou na CMS WordPress. Poslední verze, ale řekněme DLE (motor DATALIFE) A také chceme takovou krásnou polohu bloků pomocí zdiva.
Všechny docela jednoduché. Za prvé, stahujete z oficiální webové zdivo zdivo.pkgd.min.js. . Nalijte jej na server a připojte jej v šabloně. Pro dle v souboru tématu main.tpl. na závěrečnou značku Vložit:
Nyní definujeme strukturu bloku, ve které bude zdivo fungovat. Například:
V CSS musíte určit něco jako:
Mason-box (šířka: 25%;) .Mason-box široký (šířka: 50%;)
Nyní stránka musí inicializovat operaci skriptu:
Teď se ukáže na skutečně běžícím příkladu:
1. Připojte soubor zdivo.pkgd.min.js. Jak je uvedeno výše.
2. Na stránce přes HTML inicializujte skript:
3. V CSS je zaznamenána následující:
Halfnews-obsah (polstrování: 0 5px 5px 10px; okraj-dno: 15px; hranice: 1px solid # e9e9e9; -webkit-box-stín: 0 0 1px #bbb; -Moz-box-stín: 0 0 1px #bbbb; Box-Shadow: 0 0 1px #bbb; šířka: 345px; / * Velmi důležitá položka - je zde šířka bloku * / / * Pokud je to více, než potřebujete, pak blokuje nebo nemůže * / / * zarovnat vodorovně nebo uzavřené Na příteli * / Margin-Left: 10px; / * Je nastaven na vzdálenost vodorovně mezi bloky * /)
Zde je takový jednoduchý design na hlavní stránce webové stránky Technotron (kde se obsah nachází ve dvou sloupcích).
A je to. Kdybych byl někde špatně, nebylo to záměrně, jen rychlý příspěvek a chtěl jsem hodně, takže chyby nejsou vyloučeny - pokud něco nechodí ven, nebo někde jasnou chybu: prosím, pochopíme, najdeme chybu a opravit. Omlouváme se za obec popsaných metod.
Zatím. Doufám, že to bylo užitečné.
Místo epilogy:
Tajemství úspěšného podnikání:
1. Head ho zná.
2. Sam nějak vyšel
Tagy :,
Pisano 08/01/2014. 
