Herkese merhaba! Bugün eklentiler ve komut dosyaları olmadan nasıl yapılacak şey hakkında bilgi vermek istiyorum. tuğla duvar blokları(duvarcılık. İngilizceden - tuğla duvarcılık), yani farklı yüksekliklerin blokları, büyük boş girintiler olmadan birbirlerine güzel bir şekilde aralıklı olacaktır. Evet! Bütün bunlar CSS ile çok kolay yapılabilir.
CSS, çok renkli metin veya bloklar oluşturabileceğiniz bir mülke sahiptir. Onları kullanırlar.
Mülk denir sütunlar. Bu, sütunların genişliğini ve sayısını hemen ayarlamanıza izin veren bir evrensel özelliktir. Hakkında daha fazla bilgi edinin İyi css. dizin.
Yani, her şey aslında çok basit. Örneğin, farklı yüksekliklerde 6 elemanımız var, aynı genişlikte. Parlak bir örnek, sitelerdeki bir kenar çubuğu (lateral sütun). Aynı genişlikte, fakat farklı yüksekliklerden oluşan tüm bloklar vardır. Genellikle B. mobil versiyon Sitebar sitesi, ana içeriğin ardından, sitenin alt kısmında ve içeriğin kendisi ekranın tüm genişliğini yapar. Doğal olarak, site aynı zamanda bir sütunda da irrasyoneldir, çünkü yanlarda çok fazla boş alan olacak, özellikle de tabletten bakarsanız.
Ancak bloklar mülkü belirlerse ekran: satır içi blok, sonra otomatik olarak, kabın genişliğinden yeterliyse, çeşitli sütunlarda bulunacaktır. Ancak, her şey çok güzel görünmeyebilir:
Katılıyorum, bloklar arasındaki bu girintiler hiç bakmaz. Bu nedenle, acilen düzeltilmesi gerekiyor! Bunun için konteyner bloğuna,hangi blokların bulunduğu, gerekli stilleri eklemeniz gerekir:
MOZ sütunları: 300px otomatik; -WebKit-sütunlar: 300px otomatik; Sütunlar: 300PX AUTO;
Çapraz tarayıcı için, Firefox ve WebKit tarayıcıları için özellikleri kullanın (Chrome, Safari, Android). Örneğin, bloklarla konuştuk. İşaretli liste Sonra resimdeki bir örnek için stiller şöyle görünecektir:
UL (genişlik: 1050px; -moz sütunlar: 300px otomatik; -Webkit-sütunlar: 300px Otomatik; Sütunlar: 300px Otomatik;) Li (Ekran: Inline-blok; Kutu-Gölge: 0 8PX # 555; Liste Stili: Yok ; Dolgu: 10px; Genişlik: 300px; Marj-alt: 30px; dikey hizala: üst;)
Bu durumda, bloklar çeşitli sütunlarda bulunur. en az 300 piksel genişlik ve sütun sayısı tarayıcı tarafından otomatik olarak belirlenir. Uyarlanabilirlik oluşturmak uygundur. İÇİNDE bu durum 3 sütun olacak ve böyle görünecek bu kadar:
Dikey bloklar arasındaki mesafenin yatay olarak çakıştığı mesafeyi istiyorsanız, kabın genişliği (1050px) almak zorunda kalacaktır. Aksi takdirde, hoparlörler arasındaki genişlik, tarayıcı tarafından otomatik olarak yüklenecektir. Mülk sahibi olmak sütun boşluğu.Bu, hoparlörler arasındaki mesafeyi ayarlar. Ancak bu durumda istediğiniz kadar çalışmaz.
Başka bir seçenek var: Bloklar için Genişlik özelliğini ayarlamanız gerekir:% 100. Ayrıca, dolgu özelliği takılıysa, durumumdaki gibi, kutu boyutlandırıcı özelliğini ayarlamanız gerekir: sınır kutusu. Artık sütunlar arasındaki mesafeyi ayarlamak için Sütun Gap özelliğini konteynere güvenli bir şekilde ekleyebilirsiniz. Bu yüzden gerektiği gibi çalışacak.
Katılıyorum, çok daha iyi görünüyor! Ayrıca "div" bloklarını DIV konteynerinin içine yerleştirebilirsiniz. Metni birkaç sütuna dağıtmanız gerekirse, örneğin, "P" etiketinde, örneğin, metin sınıfı istediğiniz metni ekler ve bu sınıf için bir özellik reçete sütunlar..
Bu kadar! Bu yüzden gereksiz komut dosyaları olmadan, blokları tuğla veya metin biçiminde birkaç sütun halinde yerleştirebilirsiniz. Ancak bu durumda, yalnızca bloklar aynı genişlikte ise güzel görüneceğini unutmayın. Başka bir durumda, sadece iyi bir duvar komut dosyası kullanmak için kalır. Komut dosyası her bloğu otomatik olarak konumlandırır. Ama bu başka bir konu ...
Bu kadar! Bazı sorular veya yorumlar ortaya çıktıysa, yorumlarda bırakın. İyi şanslar!
Blog bölümünde. Bu fotoğraf wordpress teması Örneğimiz olacak, ancak muhtemelen jquery duvarcılık ve diğer WordPress sitelerinin kullanımını gördünüz.
JQuery Mansory nedir
Duvarcılık, elemanları yatay olarak konumlandırabileceğiniz, monitörün genişliğine bağlı olarak dikey bir konuma dönüşebileceğiniz CSS'ye bir ek olarak kabul edilebilir. Sonuç olarak, farklı yüksekliklerin elemanları arasındaki dikey boşluklar en aza indirilir. Eğer yapmak istiyorsan cSS yardımı, İnan bana çok fazla baş ağrısı olacak.
Bu örnekte, jquery duvar iş prensibini kullanmadan önce ve sonra görebilirsiniz:
CSS float kullanıyorsanız yüzündeki sonucu nasıl görüyorsunuz: Sol, sonra boş aralıklar var, oldukça problemli olan CSS konumunu kullanmanız gerekir, bu da yapabilirsiniz, ancak neden bu konuda duvarcılık yardımcı olacaktır.
WordPress sitelerinde JQuery Mansory kullanıyoruz
Duvarcılık iki durumda kullanılabilir. Birincisi, bilgiyle tüm bloklarınızın aynı genişlikte olduğunda, bu durumda bu komut dosyasını kullanmanız gerekir:
|
Farklı genişlik bloklarınız varsa, aşağıdaki kodu kullanmanız gerekir:
|
Nerede solumnwidth. Bu, ızgaranın genişliğidir (piksel cinsinden). Duvarcılık bu iki kuralı takip edecektir:
- Elementlerin genel genişliği (bu formüle göre hesaplanır) \u003d CSS genişliği + dolgu-sağ + dolgu-sol + kenarlık sağ genişlik + kenarlık-sol genişlik + kenar boşluğu + kenar boşluğu-sol
- Sütun genişliğini kullanırken, tüm elemanlar kolon genişliğinin genişliğinde yatay olarak düzenlenmesi gerekir (örneğin, kolonguider: 200, öğeler 0 veya 200 veya 400 piksel ve benzeri olarak başlayacaktır). Tamamen belli olmayabilir, ancak bu konuda zor bir şey yok, resme bakıyoruz.
Toplam 190px ve kenar boşluğu sağındaki ilk unsuru: 0. ve ikinci eleman kenar boşluğuna sahiptir: 0, teoride, bu iki eleman birbirine dokunmalıdır. Ancak, sütun genişliği 200 piksel değeri olduğundan, ikinci eleman 200px'lik bir mesafeyi göstermeye başlar.
Bu işlem, komut dosyasında sütun genişliği değerine sahip değilsek ve tüm elemanlar birbirleriyle başlarsak olmaz, bu nedenle bunları marj ile ayırmak gerekir.
Öyleyse jquery duvarcılık ve wordpress 3 harikalar ..
Şimdi biraz kodladım. Başlamak için, header.php dosyasındaki gerekli jquery ve duvar kütüphanelerini bağlayın. Header.php içindeki bu kodu atlayın (Sizi bir siteden indirebilirsiniz):
// jquery bağlamak// duvarları bağlamak.
WP_ENQUEUE_Script'in WP_EHEAG'tan önce durduğundan emin olun. Duvar komut dosyası konunuzun JS klasöründe bulunur, farklı bir adınız olabilir.
< 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" duvarcılık komut dosyasını arayacak ve DIV sınıfı \u003d "masonry_box", yazılarımızı komut dosyasını kullanarak görüntüler. Şimdi CSS, örneğin% 100 genişlikte Content_maasonry yapabilirsiniz, o zaman tedavi edilmeniz gerekmez, ancak sabit bir Content_Masonry genişliğini yaparsanız, gerekli hesaplamaları yapmanız gerekir. Örneğin, her birinin genişliği + dolgulu 190px ve kenar boşluğu sağındaki 4 sütun oluşturursunuz: 10px, daha sonra Content_maasonry kabının içerik boyutu 200 x 4 \u003d 800px olacaktır:
#Content_masonry (genişlik: 800px;) #content_masonry .masonry_box (genişlik: 170px; dolgu: 10px; kenar boşluğu sağ: 10px; marj-alt: 10px;)
#Content_Masonry ( genişlik: 800px; #Content_masonry .masonry_box ( genişlik: 170px; dolgu: 10px; marj-sağ: 10px; marj-alt: 10px; |
Şimdi HTML oluşturacak olan PHP eklenmesi durumunda, bu durumda WP_Query'i, örneğin sayfa ekranında (page.php), duvarcılık kategorisinden 20 gönderiyi görüntülemek için kullanacağım.
< div id = "content_masonry" > $ Linksposts \u003d yeni wp_query (); $ LinksPosts -\u003e Sorgu ("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 = " Kimlik, "URL", DOĞRU)) ECHO GET_POST_META ($ Post -\u003e ID, URL, DOĞRU); Başka the_permalink (); ?\u003e "> < / a > < / h2 > |
Herkese iyi günler! Bu bu yıl ikinci makalem. İlk önce simge yazı tipini son zamanlarda yayınladım ve bu kadar küçük bir marjla ikinci bir makale yazmak için zaman bulduğuma memnun oldum. Şimdiye kadar, benim için küçük bir boşluk, çünkü Daha sık fırsat yazmaz, ama denerim. 😎 ve şimdi bu makalede tartışılacak olanlarla ilgilenelim.
Belki birçoğunuz sitelerde elementlerin konumunu (resimler, makaleler, çeşitli bloklar) tuğla etkisi gördünüz. Söylediniz - CSS üzerinden yapmak mümkün mü? Belki de mümkün, ancak sadece bu tür bir esneklik olmayacak. Komut dosyasının kendisi, dikey boşluğu kullanarak sayfadaki öğeleri yerleştirir. Ayrıca, blokları konumlandırırken, komut dosyası animasyon ekler. Tarayıcı penceresini azaltarak uyarlamalı tasarımda suçlamak mümkündür. Öyleyse, hepsi küçük bir Javascript kütüphanesi ile elde edildi - duvarcılık. Bu komut dosyası, modern trend tasarımlarında çok yaygın olarak kullanılır. Rus-Pagan'da nasıl olduğunu bilmiyorum, ancak abartılı internet duvarında büyük bir popülerliğe sahip.
Yazar Duvarcılık, ABD'den David Desandro'dur. Ona böyle iyi bir senaryo için çok teşekkür ederim. Bu kütüphane tamamen ücretsiz olarak dağıtılır, böylece web sitenizde güvenle kullanabilirsiniz.
Bence çok beğendim. Aslında, her şey çok hoş görünüyor. Duvarcılıkla nasıl çalışılacağı, sitemizdeki bloklarımızı bir tuğla etkisi ile nasıl getireceğiz?
Makalenin yapısı
İlk olarak, komut dosyasına gitmemiz gerekiyor - http://maasonry.desandro.com ve en son sürümü indirin. Bu makaleyi yazdığınızda, bu sürüm 4.0'dır. Ayrıca bu sitede İngilizce olarak ayrıntılı belgeler bulacaksınız. Belgelerden gelen ana noktaların senaryosuna atıfta bulunuyorum - nasıl bağlanacağını, hangi seçenekler kullanılacağına, vb. Her şeyi etkilemeyeceğim, çünkü Ben kendim bazı noktalarda çözmedim. Sitenize tanıtmak için minimum işlem yapmanız gerekir. Şimdi buna alıştısın.
İndirme web sitesinde, komut dosyasının iki versiyonu vardır - sıkıştırılmış (en aza indirilmiş) ve sıkıştırılmamış. Tam olarak kullanmak daha iyidir - masonry.pkgd.min.js. Ayrıca, kütüphane CDN'den yüklenebilir:
sıkıştırılmamış
sıkıştırılmış (en aza indirilmiş)
Minimum duvarcılık sürümünü CDN'den bağlamanızı tavsiye ederim. Bu yüzden gereksiz HTTP isteklerinin sayısını azaltıyoruz. Genel olarak, bağlandığınız komut dosyası ne olursa olsun, minize edilmiş versiyonu CDN ile bağlayabilirseniz, ardından bağlayın.
Duvarcılık yapmak için, bir üst blok oluşturmamız ve öğeleri içine koymamız gerekir.
Netlik için, farklı boyutlarda resimlerle bir demo sayfası oluşturdum. Resmi öğelerin bir örneği olarak aldım, çünkü Farklı yükseklikleri var, ancak resimler yerine herhangi bir blok olabilir: metin, video vb. Tarayıcı penceresini azaltmaya çalışın ve resimlerin konumunuzu sorunsuz bir şekilde değiştirdiğini göreceksiniz.
HTML kodunun neye benzeyeceğini görelim:
...
#Container (sınır: 1px katı #ccc; marjı: 0 Otomatik; dolgu: 50px 0; maksimum genişlik: 1170px;) / * mesh elemanı * / .Element-item (sınır: 2px katı RGBA (0, 0, 0, 0, 0.35); Marj-alt: 15px; Dolgu: 1px; Genişlik: 280px) / * / Mesh elemanı * / H1 (Metin Hizası: Merkez; Marj: 0 50px)
Gördüğünüz gibi, CSS burada asgari olarak kullanılır.
Masonry eklentisini başlat
Bunu birkaç şekilde yapabilirsiniz.
Javascript üzerinden duvarcılık başlatma
JQuery-Plugin olarak duvarcılık kullanabilirsiniz:
$ ("Seçici"). Duvarcılık ();
Ancak bu yöntemin jquery kütüphanesine bağlı olması gerektiğini unutmayın:
Demo sayfasında jquery-eklentisi olarak duvarcılık yaptım, yani. Aşağıdaki başlatma koduna sahibim:
JQuery (belge) .Ready ($) ($) ($ ("unsurlar-gri"). Duvar (// Opsiyonlar İtemsiLector: ".Element-item", Sütun Genişliği: 300));));
"Duvar ()" yöntemini çizdiyseniz, iki seçenek geçtik: İtemsiLector ve Sütunwidth. Bunlar iki seçenek gereklidir. Geliştiriciye göre, komut dosyasının normal çalışması için gereklidirler. Ancak, aşağıdaki seçenekler hakkında konuşacağız. Her şey, bu eylemlerden sonra, her şeyin çalışması gerekir.
Vanilya Javascript ile başlatma
Duvarry de vanilya JS ile birlikte kullanabilirsiniz:
Yeni duvarcılık (Elem, Seçenekler)
Duvar () yapıcısı iki argüman alır: kabın bir çocuk elemanı ve bir nesne seçeneği. Başlatma kodu aşağıdakiler olacaktır.
Var Elem \u003d Document.Queryselector (". Elements-gri"); var msnry \u003d yeni duvarcılık (Elem (// opsiyon maddeleri): ".Element-item", Sütun Genişliği: 200)); // öğe argümanı bir bireysel bir öğe için bir seçici dizesi olabilir // yeni duvar (". Elements-gri", (// seçenekleri));
Dürüst olmak gerekirse, Vanilla JS ile çalışmadım, bu nedenle, özellikle jquery'den daha iyi olduğunu söyleyemem. Sadece böyle bir yöntem olduğunu biliyorum.
HTML ile başlatma.
Tek bir satır javascript kodu yazmadan duvarları HTML üzerinden başlatabilirsiniz. Bunu yapmak için, "Veri-Duvarcılık" konteynerini tüm çocuk elemanlarına eklemeniz gerekir. Seçenekler bir değer olarak aktarılabilir.
İletilen parametreler JSON formatıyla eşleşmelidir. Dikkatinizi koddaki alıntıların kullanımına çıkarmak istiyorum. Veri-duvarcılık niteliği için alıntılar bekar ve iletilen seçenekler için - çift. Şunlar. Örnekte böyle gösterildiği budur.
Bu seçenek sitede fazla javascript kullanmak istemiyorsanız kullanılabilir. Örneğin, sitenin herhangi bir yerinde kullanılmazsa, jquery'i hemen göndermezdim.
İşte böyle bir kütüphane. Karmaşık bir şey yok. Sıradaki ne?
Elementlerin Boyutları
Kız elemanlarının boyutları hem sabit hem de kauçuk olabilir. Blokların blok genişliğinin sabit boyutu (genişlik ve yükseklik) ve tasarım CSS styling dosyasında ayarlanır. Yükseklik Demek istediğim, boş blokları kullanmıyorsanız, blok yüksekliği içeriğine göre bir tarayıcı ile tedavi edilecektir. Benim durumumda, boyuna sormuyorum çünkü Resimler, kendi boyunuz var.
...
Kauçuk ızgarası
Kauçuk bir ızgara ile, elemanların genişliği yüzde olarak ayarlanır. Kauçuk ızgara esas olarak adaptif tasarımda kullanılır. Aşağıdaki seçenekler hakkında daha fazla konuşacağız.
...
ImagesLoaded.
Bazen, sayfa yüklendiğinde, elemanların birbirinin üst üste geleceği olabilir. Aynı zamanda, hepsine bir yumruta gidiyorlar ve korkunç görünüyorlar. Böylece bu sorunu küçük bir kütüphane ile çözebilirsiniz - imagesLoaded.. En iyi şey, adaptif tasarımla benimle tezahürdü. Siteyi bir cep telefonundan açtığımda, bir yığına gidiyordum.
Görüntüleri CDN ile bağlayın:
ImageLaADed öğeyi kullanmak, sayfaya yalnızca tam yüklendikten sonra konumlandırılmıştır.
// init masonry var $ ızgara \u003d $ (". ızgara"). Duvar ((// opsiyonlar ...); // her görüntünün ardından düzlem duvarları $ GRID.ImagesLoaded (). İlerleme (fonksiyon () () ($ ızgara ("düzen");));
Ya da başlatma duvarcılık sadece tüm görüntülerin tam yüklendikten sonra oluşur.
Var $ ızgara \u003d $ (". Grid"). ImagesLoaded (tüm görüntüler $ GRID.Masonry ((// options ...));));));
Seçenekler (Seçenekler)
Şimdi seçenek yöntemini geçebileceğimizi merak edelim duvarcılık ().
Tüm seçenekler gruplandırılmıştır. Peki, onları gezinmesi daha kolay olacak şekilde yapılır.
Şimdi belirli bir gruba hangi seçenekler dahil olduğunu görelim.
İmalatçı
Bu seçenek, duvarcılık etkisinin hangi unsurların uygulanacağını gösterir. Bu seçeneği belirtmek faydalıdır, çünkü düzenin bir parçası olmayan öğeleri kesebiliriz. Duvarcılık başlatma işlemini sökerken bu parametre bize zaten aşinadır.
İtemsiLector: ".Element-item"
sütun genişliği.
Düzen öğelerinin genişliğini belirtir. Bu parametre omit duvarcılık ilk elemanın dış genişliğini alırsa. Geliştirici, sabit veya kauçuk elemanları olup olmadığını, hoparlörlerin genişliğini belirlemesini tavsiye eder.
Sütun genişliği: 80.
Öğe Boyutları (Eleman Boyutlandırma)
Örneğin, lastik elemanlarla düzenimizi kauçuk elemanlarla yapmak istiyorsak, o zaman bu amaçlar için lastik ızgarayı yapan bir parametre var.
yüzleşme
Yukarıdaki kauçuk kılavuz kodunu söküyoruz, ancak seçenekler ayrıntılara girmedi.
...
Gördüğümüz gibi, kauçuk ızgarayı etkinleştirmek için, Boolean değeri ile başlatma koduna yüzdesi parametresini ekledik " doğru.". Ve genişlik bir genişlik olarak, yüzde genişliğinin CSS'de atandığı bir elemanın sınıfını belirtti.
oluk.
Elementler arasında, seçeneği kullanarak bir girinti yatay olarak ayarlayabilirsiniz. oluk., Sayıyı geçen. Numara, piksel cinsinden geri çekilişe karşılık gelir.
Oluk: 15.
Elementler arasındaki dikey girintiler CSS'de ayarlanmıştır.
Öğe-Ürün (Marj-alt: 15px;)
Girintiler yüzde olarak ayarlanabilir, yani Tarayıcı penceresinin boyutuna bağlı olarak değişecektir.
...
Öğelerin listesinden önce boş bir div bloğu oluşturduk.
Bu blok için CSS, yüzde genişliğini belirtti. Ve başlatma kodu seçeneğinde oluk. Bu boş elemanın sınıfını belirttik. Komut dosyasının kendisi, bu bloğun genişliğine dayanarak yüzde olarak girinti yaratacaktır.
pul.
Bu seçenek, duvar ızgarasına damgalanacak öğeleri atanabilir. Kalan elemanlar aşağıda olacak ve damgalanmayı mücadele edecektir. Bazen faydalı olabilir. Seçenekleri pul. Damgalı elemanın sınıfını geçiyoruz.
Pul: ".Stamp"
CODEPEN'de daha ayrıntılı görünebilir ve gerekirse düzenleme yapabilirsiniz.
fitwidth.
Bu seçeneğin özü, onu ana eleman bloğu tarafından etkinleştirdiğimizde, piksellerde sabit bir genişlik eklenmesidir. Ayrıca, ebeveyn bloğunun genişliği, tüm çocuk elemanlarının genişliğine eşittir. Böylece, CSS ana bloğu kuralında belirtilmesi " marjı: 0 Otomatik»Merkezdeki duvar elemanları ile bir bloğu yerleştirebiliriz.
Elements-GRIDE (Marj: 0 Otomatik;) ISFITWIDTH: Doğru
Dikkat! Bu seçenek, genişliği yüzde olarak gösterilen elemanlarla çalışmaz. "SütunWidth" seçeneğinin değeri, örneğin "SütunWidth: 120" için piksellerde belirtilmelidir. Aksi takdirde, elemanlar birbirine alınabilir.
orinak.
Varsayılan olarak, tüm örgü elemanları sola hizalanır. Seçenek ile orinak. Öğelerin yatay akışını değiştirebilir ve hizalamayı sağ sola ayarlayabilirsiniz. Boolean değerini geçmek yeterlidir " yanlış. "
OriginLeft: Yanlış
orijintop.
Ayrıca, yatay olarak, varsayılan ızgara elemanları üst kenarda hizalanır. Seçenek ile orijintop. Eşyaların akışını dikey olarak değiştirebilir ve hizalamayı aşağıdan aşağıya kadar, yaklaşık olarak Tetris 🙂 olarak ayarlayabilirsiniz.
Origintop: yanlış.
Kurulum (Kurulum)
Ayarlar seçeneklerine gidin.
konteynerstyle
Bu seçenek, üst konteyner öğelerinin stillerini iptal eder. Varsayılan olarak, ebeveyn "Konum: Göreceli" kural olarak ayarlanır. Bu kural iptal edilebilir.
Konteynerstil: NULL
Tabii ki, "! ÖNEMLİ" kullanarak CSS dosyasını geçersiz kılmak mümkündü, ama yapmayı sevmiyorum. Genel olarak, bu, düzende kötü bir ton kuralı olduğunu düşünüyorum. Stilleri temizlemek daha iyidir, geliştirici bize bu fırsatı veriyor.
gEÇİŞ SÜRESİ.
Öğeler konumlarını değiştirdiğinde geçişin süresi. Varsayılan süre ayarlanır - 0.4 saniye. Zaman biçimi CSS zaman formatı olarak ayarlanır.
Transitionduration: "0.4S"
İşte zaman ayarının bazı örnekleri.
// Hızlı Animasyon Geçiş Süresi: "0.2S" // Yavaş Animasyon Geçiş Süresi: "0.8s" // Animasyon Geçiş Sürme: 0
yeniden boyutlandırmak
Bu seçenekle, ebeveyn bloğunun boyutundaki değişikliği iptal edebilirsiniz. Şunlar. Varsayılan olarak, ebeveyne tarayıcı ekranında bir azalma ile sabit bir boyut belirtmezseniz, çocuk ızgaraları elemanlarımız konumlarını değiştirecek, aşağı hareket edecek, boş alan işgal edecektir. Bu yüzden "yeniden boyutlandırma" seçeneği ile geçişleri iptal edebilirsiniz.
Yeniden boyutlandırma: yanlış
Dürüst olmak gerekirse, ebeveynden sadece sabit bir boyuta sorarsanız, aynı etki sağlanabilir. Burada geliştiriciyi anlamıyorum - ya bir şeyi yanlış anladım ya da bu seçenek bazı durumlarda gerçekleşir. CODEPEN'deki örnekte daha fazla ayrıntı görebilirsiniz. Tarayıcının ekran boyutunu değiştirmeyi deneyin. Sonra değiştir "Yeniden Boyutlandır: Yanlış" üzerinde "Yeniden Boyutlandır: Doğru" Ve ne hakkında konuştuğumuzu anlayacaksın.
initlayout
Bu seçenek, komut dosyasını başlatırken tuğla ızgaramızı etkinleştirir. Varsayılan olarak, açılır - "Initlayout: true". Ama iptal edebilirsin.
İnitlayout: yanlış
Izgarayı etkinleştirmeden önce yöntemleri ve olayları kullanabilirsiniz. Örneğin, belirli bir düğmeye tıklayarak ızgaranızın etkinleştirileceği için yapabilirsiniz. Öyleyse böyle bir şey.
Bu yazıda, olayları ve yöntemleri sökmeyeceğim, çünkü Makale böylece hacimsel çıktı. Onları geliştiricinin web sitesinde bağımsız olarak keşfedebilirsiniz. Ayrıca uygulama örneklerini de bulacaksınız. Her şey oldukça anlaşılabilir. Her zaman komut dosyalarının yazarlarıyla değil, bu tür talimatlar yazılır. Duvarcılık geliştiricisinin talimatları için zorlardım - 5 . 🙂
Saf css üzerinde duvarcılık
Ayrıca, tuğla işini saf CSS'de uygulama seçeneği de vardır. Buradaki tüm kodları vermeyeceğim. Kodepen'e bakabilirsin, karmaşık bir şey yok. Bu durumda, ekstra JS kütüphanelerini bağlamanız ve eklenti seçeneklerini anlamanıza gerek yoktur.
Prensip olarak, yukarıda belirttiğim her şey, web sitenizdeki tuğla etkisini kullanmak için yeterlidir.
Ve hepsinde. Hepinize dikkatiniz için teşekkür ederiz. Yorumlarda soruları belirtin, her zaman yardım etmekten mutlu olurum. Aşağıdaki makalelerde görüşürüz. A kadar!
Yeni bir blog tasarımını nasıl değiştireceğimi söyledim, naif olarak tüm önemli çalışmaların zaten yapıldığına inanıyor. Ancak, ortaya çıktığı gibi, hala çok fazla iş vardı. Dahası, kendi bölümümü yarattım. Ama önce ilk şeyler. Bu yazıda, aşağıdaki sorulara dokunacağım:
- kayıt konusundaki yeni WordPress cipsleri nasıl tanıtılır - kayıt formatları;
- duvarcılık komut dosyasında blok konumlandırma sorunları nasıl düzeltilir;
- herhangi bir siteye duvarcılık nasıl uygulanır.
Peki ya masonlar ve javascript? Ortak bir temas noktası olduğu ortaya çıktı! Umarım herkes bu tür masonlar kim olduğunu biliyor. Değilse, işte kısa bir tanım:
Masonlukveya frank-Masons - "Özgür Bricklayers" un değişmez çevirisinde, XVIII yüzyılda ortaya çıkan hareket, kapalı bir organizasyon şeklindedir. Freemasonry, kökenini XVI'nin sonundaki az bilinen kaynaklardan alıyor - XVII yüzyılın başlangıcı, MASON'un operasyonel atölyelerinin iddia ettiği iddia edildi. Masonların tüm faaliyetleri çok semboliktir, çok şey mimari sembolizm ile ilişkilidir ve temel karakterlerden biri kesilmiş bir piramittir.
Masonlarla çok ilgileniyorum ve bunlarla bağlantılı olan her şey. Çok ilginç. Gerçek bir masonla konuşmak istiyorum (ama böyle değil, sadece Ponte iyiliği için kim, kendisini bir gerçek usta ile özgür bir Bricklayer'ı arayın). Ama bu durum böyle değil. Ve pinbin tasarımı konusundaki, tuğlalar olarak dizayn etmek için kayıtların duyuruları olan bloklara neden olan komut dosyasını kullanır. Şimdi çok popüler bir tarz, çeşitli yollar böyle bir etkiyi uygulamak için kullanılır, ancak en iyilerinden biri şüphesiz javascript Duvarcılık..
Bu JavaScript'in resmi web sitesi Masonry.Desandro.com, nasıl çalıştığını gösterir ve siteye nasıl bağlanacağını gösterir. Ayrıca, mutlaka Wordpress, A ve Dle veya genel olarak statik HTML değil, herhangi bir site olabilir. Ancak, Wordpress'de son sürümlerden (eğer yanılmadıysam 3,8'den), duvarcılık komut dosyası zaten temel pakete dahil olduğunu söylemeye değer. Ama daha önce belirtildiği gibi - her şey sırayla.
Konuyla ilgili Nasıl Uygulanacağı WordPress Destek Destek Formatları Kayıtları?
Bu nedenle, iyileştirme sürecinde, kayıtlarımın eksik işlevlerini eklemeye karar verdim, böylece bunun içindeki işlevler bu blokların farklı tasarımı ile durum, galeri, bir resim veya video yayınlayabilir. Tasarımın arşivlerinde durdum ve bu işlevi destekleyen çok az sayıda bu tür konuları buldum.
Ancak, WordPress'inizi güncellerseniz, kayıt formatları konuda uygulanabilir ve bu kolaydır. Yani, her şeyden önce dosyayı açın fonksiyonlar.php.kayıt temanız ve aşağıdaki kodu ekleyin:
Add_action ("after_setup_theme", "slug_post_formats"); Fonksiyon SLUG_POST_FORMATS () () Formatlar, Dizi ("Kenar", "Görüntü", "Video", "Ses", "Alıntı", "Bağlantı", "Galeri", "Sohbet", "Durum",)); )
Bu kod dosyanın herhangi bir yere yerleştirilebilir. fonksiyonlar.php., ana şey herhangi bir işlevi kırmamaktır. Her şey doğru yapılırsa, yeni bir kayıt oluştururken, eğer değilse, yeni bir format bloğunuz olmalı, sonra üstteki "Ekran Ayarları" menüsünü açın ve eklemli bloğu işaretleyin.
Ancak bu özellik, türün isimleri ile temaya olan klasörde özel dosyalar görünene kadar çalışmaz. İçerik-something.php. - "bir şey" dosyası adına, bu, bu dosyanın hangi formatının olacağının şablonunun bir göstergesidir.
Onlar yapabilir:
Formatlar her şeyi kullanmak için gerekli değildir, ancak yalnızca yalnızca bir videoya, bir resim ve galerie ihtiyacınız varsa, yalnızca ihtiyacınız olanları belirtebilirsiniz. fonksiyonlar.php.böyle bir kod:
Add_action ("after_setup_theme", "slug_post_formats"); İşlev SLUG_POST_FORMATS () () ("Formatlar, Dizisi", "Video", "Galeri",);)
Peki, yalnızca satırda listelenen dosyalara ihtiyacınız var: İçerik-image.php, içerik-video.phpve İçerik-Galerisi.php. bir artı content.php. Sıradan kayıtlar için. Bu dosyalar nereden geliyor? Bunları yirmifurteen (veya örneğin, kasalar) ve daha sonra rafine edebilirsiniz. Bu konuyu bu konuyu bilgisayarınıza indirin, ihtiyacınız olan dosyaları alın ve sunucuyu tasarımınızla klasöre doldurun. Bundan sonra, bölümdeki konsolda görüneceklerdir. Görünüm -\u003e Editör. Ek olarak, bu dosyaların istenen formata getirilmesi gerekir, ayrıca dosyada stiller oluşturmanız gerekir. style.csss..
Bu, özenli bir iştir, ancak yüz katından ödeyecek. Bu tür dosyaların örneklerini göstereceğim (bu blogda yaklaşık olarak kullanıyorum):
Content-status.php dosyası:
İçerik-video.php dosyaları ve İçerik-gallery.php tamamen aynı:
Content.php dosyası:
">
Biraz kazma, kayıt formatları için kendi şablonlarınızı ne yapacağınızı çözebilirsiniz. Aynı zamanda, CSS stillerini unutmamalısınız. Ancak burada bu çok özel bir soru olduğu için herhangi bir öneri veremiyorum ve belirli kayıt konusuna bağlıdır.
Eğer zorluklar ortaya çıkarsa veya anlaşılmaz bir şey varsa - yorumlarda yapabileceğimden yardım edebilirsiniz.
Peki, kayıt formatları gömülü ve mükemmel çalışıyor. Ama bir şey yoktu ... iyi çalışıyorlar, ancak duvarcılık komut dosyası ile arkadaş olmak istemediler. Örneğin, uygun kayıt formatını kullanarak bir galeri eklerken, galeri kapsamında, önceki yazıdan gelen aynı nitelikteki büyük bir alan vardı, burada web fontlarını Google'dan kullanırken duyurular arasındaki garanti boşluklarından bahsettim. Yazı tipleri. İşte bu sorunlar aşağıda karar vermeyi öğreneceğiz.
Duvarcılık komut dosyasında blok konumlandırma sorunları nasıl düzeltilir
Size sorunun özünü hatırlatayım: Google Fonts fontunu Duvar Komut Dosyası'nın çalışmalarında kullanırken, makalelerin duyuruları arasındaki farklı kopmaların farklı yüksekliği biçiminde sorunlar ortaya çıktı. Aynı etki, özellikle çok daha belirgin ve rekor formatların kullanımı, özellikle de Tileed Gallery galerisini Jetpack Pagin'den eklerken.
Dediğim gibi, jetpack paketini blogumda kullanıyorum, burada muhteşem fayans galerilerinin harika bir eklentisi var, ancak bu tür bir galeri eklenirken büyük bir süre zarfında ortaya çıktı:
Duvar komut dosyası suçlamaktır, duvarcılık komut dosyasıdır: Web yazı tiplerini kullanırken, yazı tiplerinin yüklendiğinden daha erken çalışır ve bu nedenle, tam sayfa yükünün sonunda, bloklar hafifçe düzleştirilir. Başka bir seçenek olabilir - bloklar başlangıçta pürüzsüz hale geldiğinde ve sonra birbirlerine sarsılır.
Galeri aynı hakkında: Güzel bir döşenmiş galeri kurarken, Jetpack'ten galeriyi kirletirken, görüntülerin boyutunu hesaplayan bir komut dosyası, bu konuda çok fazla zaman geçirir (ve birkaç aşamada) ve duvarcılık çok daha hızlı çalışır ve Blokların konumlandırılması, döşenmiş Galeri komut dosyasını döndüren ilk gelen (ara) verileri kullanır. Bu nedenle, bu boşluk belirir.
Resmi Duvarcılık Web Sitesinde bununla mücadele etmek için (yukarıya bakın) Açıklamalar vardır: Bölümler Görüntüler Yüklendi ve Web Yazı Tipleri. Belirtilen bağlantılarda resmi yöntemlerle tanışabilirsiniz. Ancak bu hataları düzeltmek için işi basitleştirmek için önerilerimi vereceğim.
Duvarcılık komut dosyası parametrelerini yönetmek için dosyayı kullanıyorum fonksiyonlar.js. İçinde gerekli talimatları reçete ediyorum ve şablona bağlıyorum. İlk önce, animasyon parametrelerini belirtirim ve ardından hatayı düzelten kodu yerleştiririm. Bu dosyanın içeriğini tamamen yorumlarla vereceğim, neredeyse hiçbir değişiklik ile kullanabilirsiniz:
/ * Duvarcılık ana parametrelerinin tanımı * / jQuery (belge) .Ready ($ ("# sonrası). Blok animasyonunu devre dışı bırakmak için, YANLIŞ * / AnimationOptions yerleştirin: (Süre: 500, / * Milisaniyede Animasyon Hızı * / Kolaylık: "Doğrusal", Kuyruk: YANLIŞ)));)); / * Galeri ile ilgili sorunların düzeltilmesi * / / * Duvarcılık * / / / * Uygulama Gecikmesi Tüm görüntüler yükleninceye kadar * / / * Başlat * / (İşlev (# Sonraki Alan "); / * Not: Burada ayrıca ihtiyacınız var Block ID * / $ konteyner.Imaged (fonksiyonel () ()) ()))))))))))))))))))) (jquery); / * End * / / * Web Yazı Tipleri ile Sorunları Sabitleme * / / * Başlat * / İşlev TriggermaSonry () (eğer (! $ Konteyner) (iade;) $ konteyner. (()) $ (İşlev () ( $ konteyner \u003d $ ("# sonrası"); triggermaasonry ();)); Typekit.load ((aktif: tetikleyici, aktif değil: tetikleyici)); /* son */
İhtiyacınız olanı seçin ve yorumlarınızı ve komut dosyasının gereksiz bir kısmı silinebilir, örneğin, web yazı tipleriyle ilgili yalnızca bir sorunun varsa, görüntüleri yüklerken gecikme silinebilir.
Bu dosyayı şablona bağlayın. Konu dosyasında header.php.kapanış etiketinden önce Ekle:
Bu arada, bu kod doğrudan sayfaya, kapanış etiketinden önce bağlanabilir. Ekle:
Bu, JavaScript dosyaya daha doğru şekilde bağlanmış olmasına rağmen, etki yaklaşık olarak aynı olacaktır.
Bu arada, Wordpress'iniz varsa, duvar komut dosyasının kendisini bağlayın ve ayar dosyası dosyadan mümkündür. fonksiyonlar.php.konunuzda, sadece içine kod ekleyerek:
Fonksiyon mason_script () (wp_register_script ("duvarcılık", "/ giriş j. / Dosya / maasonry.pkgd.min.js"); wp_enqueue_script ("masonry.functions", "yol / to / dosya / fonksiyonlar.js"); Wp_enceue_script ("duvarcılık");) add_action ("wp_enqueue_scripts", "mason_script");
Tabii ki, hepsi doğru talimatlar ve harekete geçme kılavuzu değil, ancak yalnızca genel öneriler, çünkü her durum benzersiz ve evrensel bir rehber oluştururken neredeyse imkansızdır. Sorularınız varsa - yorumlarda sorun.
Herhangi bir siteye duvarcılık nasıl uygulanır
Şimdi sitemizin açık olmadığı durumu hayal edin CMS WordPress Son sürüm, ama söyleyelim DLE (DataLife Motor) Ve biz de duvar kullanan blokların güzel bir yerini de istiyoruz.
Hepsi oldukça basit. İlk olarak, resmi web sitesinden duvarcılık dosyasından indirdiğiniz adres masonry.pkgd.min.js. . Sunucunuza dökün ve şablona bağlayın. Konu dosyasında DLE için main.tpl kapanış etiketine Ekle:
Şimdi, duvarcılıkın çalışacağı için bloğun yapısını tanımlarız. Örneğin, şöyle:
CSS'de şöyle bir şey belirtmeniz gerekir:
Mason kutusu (genişlik:% 25;) .Mason-Box Geniş (Genişlik:% 50;)
Şimdi sayfanın komut dosyası işlemini başlatması gerekir:
Şimdi gerçekten çalışan bir örnekte göstereceğim:
1. Dosyayı bağlayın masonry.pkgd.min.js. Yukarıda gösterildiği gibi.
2. HTML üzerinden sayfada, komut dosyasını başlatın:
3. Aşağıdakiler CSS'de kaydedilir:
HalfNews-Content (Dolgu: 0 5px 5px 10px; Marj-alt: 15px; Sınır: 1px Katı # E9E9E9; -WebKit-Box-Shadow: 0 0 1px # BBB; -Moz-Box-Gölge: 0 0 1PX #BBB; Kutu gölge: 0 0 1px #bbb; Genişlik: 345px; / * Çok önemli bir öğe - İhtiyacınızdan daha fazlası ise, daha sonra bloklar veya olamazsa * / / * yatay veya kapalı hizalanırsa Bir arkadaşın üzerinde * / marj-sol: 10px; / * Bloklar arasında yatay mesafeye ayarlanır * /)
İşte Technotron web sitesinin ana sayfasında (içeriğin iki sütunda bulunduğu durumlarda) böyle basit bir tasarım.
Bu kadar. Bir yerde yanlış olsaydım, bilerek değildi, sadece hızlı bir posta ve ben çok istedim, bu yüzden hatalar dışlanmadı - eğer bir şey dışarı çıkmazsa ya da bir yerde açık bir hata yapmazsa: lütfen anlayın, bir kusur bulacağız ve doğru. Açıklanan yöntemlerin belediyesi için özür dilerim.
Şimdiye kadar. Umarım faydalı oldu.
Epiloga yerine:
Başarılı işin sırları:
1. HER, onu tanıyor.
2. Sam bir şekilde çıktı
Etiketler:,
Pisano 08/01/2014 
