Sadece CSS ile WordPress Sitenize Duvar ve Izgara Düzenleri Ekleyin

Hiç gönderilerinizin WordPress ana sayfanızda ve arşivlerinizde nasıl görüntülendiğini canlandırmak istediniz mi?

Gönderilerinizi duvarcılık (Pinterest) yaklaşımını veya belki bir ızgara düzenini kullanarak yalnızca bir CSS parçacığı ekleyerek görüntüleyebilseydiniz ne olurdu?

Eklenti, kısa kod, şablon değişikliği, sayfaları ana sayfa olarak atama yok. Sadece saf CSS.

Okumaya devam edin veya şu bağlantıları kullanarak devam edin:

• Sitenize Duvar ve Izgara Düzenleri Ekleme Hazırlıkları
• Gönderilerinize Pinterest Duvar Görünümü Verme
• Yazıları Izgaraya Yerleştirme
• Sitenize Özel CSS Ekleme

WordPress Sitenize Duvar ve Izgara Düzenleri Ekleme Hazırlıkları

Bu çözümler tamamen CSS'ye dayalıdır ve bu nedenle, şaşırtıcı olmayan bir şekilde, değişiklik yapmadan çalışmak için sitenizdeki HTML işaretlemesine büyük ölçüde güvenirler.

Kullanılan CSS, varsayılan temalarla tasarlanmış (ve test edilmiştir). Bu, CSS'nin birkaç beklentisi olduğu anlamına gelir:

1. Gövde öğesinde, sayfanın türünü tanımlayan sınıflar bulunur (örn. ana sayfa, blog, arşiv, arama)
2. Gönderi listeleri, içerik kimliğine sahip bir div içine sarılmış başlıkla tamamlanan makale öğelerinin koleksiyonlarıdır.

Varsayılan bir tema kullanıyorsanız, CSS'yi değişiklik yapmadan kullanabileceksiniz. Bunu yapmasanız bile, temanızın CSS'yi olduğu gibi kullanabileceğiniz kadar benzer işaretleme kullandığını görebilirsiniz. Örneğin, Seksenler teması, varsayılan temalarla neredeyse aynı işaretlemeyi kullanır.

Temanız aynı işaretlemeyi kullanmıyorsa - bunu anlamanın en kolay yolu, CSS'de atıfta bulunulan sınıflar ve kimlikler için sayfa kaynağını kontrol etmektir - o zaman yine de CSS'yi kullanabilirsiniz, sadece sınıfları değiştirmeniz ve işaretlemenizle eşleşecek kimlikler.

Stilin Nereye Uygulanacağını Seçme

Yalnızca seçtiğiniz stili belirli sayfalara uygulamak istediğinize karar verebilirsiniz.

WordPress, blog, ev, arşiv ve arama gibi gövde öğelerine sayfaya özel sınıflar uyguladığı için bunu gerçekten kolaylaştırır, bu nedenle ilgili sınıfların her biri için CSS'nizi kodlamanız yeterlidir.

Örneğin, stili yalnızca ana sayfaya uygulamak istiyorsanız, CSS'niz şöyle görünecektir:

body.blog article { styles go here... }

Stili ana sayfaya ve arşiv (kategori) sayfalarına uygulamak için:

body.blog article, body.archive article { styles go here... }

Stili yalnızca arama sonuçlarına uygulamak için:

body.blog search { styles go here... }

Yine, bu, WordPress'in tema önerilerini izleyen temanıza bağlıdır.

Tarayıcı Uyumluluğu

CSS3 olarak, bu teknikler tüm platformlarda ve tarayıcılarda çalışmayacaktır.

Chrome ve Safari'nin en son sürümlerinde (hem OS X'te) hem de iOS'ta (5+) çalıştıklarını test ettim ve onayladım. Çeşitli CSS web siteleri ayrıca IE10'un da sorun yaşamayacağını öne sürüyor.

Bu tarayıcıların dışında (IE9 dahil), kilometreniz değişecektir, ancak geri dönüşün mevcut stiliniz olduğunu hatırlamakta fayda var, bu nedenle eski tarayıcıları kullanan ziyaretçiler herhangi bir fark görmeyecektir.

Stillerin bahsedilmeyen bir platformda (özellikle Windows) başarılı bir şekilde çalıştığını görürseniz, yorumlarda bize bildirin.

Yeterince feragatname, o zaman, gönderi listelerinizi nasıl çekeceğinize bakalım.

Gönderilerinize Pinterest Duvar Görünümü Verme

Pinterest tarzı duvar biçiminde gönderileri görüntüleyen çok sayıda WordPress teması ve bir avuç eklenti var. Ancak CSS3 ile WordPress sitenize bazı ek stiller ekleyebilir ve aynı etkiyi elde edebilirsiniz.

Rahul Arora'nın W3Bits'teki gönderisinden esinlenilen bu çözüm, CSS3'ün column özelliği için desteğine dayanmaktadır. Bu özellik, içeriği tanımlanan sayıda sütuna bölecek ve yaratılışı muhtemelen daha çok gazete stili sütunlar arasında metin akışı fikrinden esinlenmiş olsa da, bir duvar düzeni için de aynı derecede kullanışlıdır.

/* Masonry Custom CSS  */

/* Masonry container */
body.blog div#content, body.archive div#content {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
}

/* Masonry bricks or child elements */

body.blog article, body.archive article {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
padding: 1em;
width: 100%;
}

body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation {
background-color: #ffffff;
-webkit-column-span: all;
column-span: all;
}

Varsayılan düzenlerde, gönderiler, içerik kimliğine sahip bir div içine sarılmış makale öğeleri olarak çıkar.

CSS:

1. Sütun sayısı özelliğini kullanarak #content sarmalayıcıdaki sütun sayısını ayarlar – bu durumda 4. Ayrıca sütun boşluğunu da ayarlar. Firefox ve Safari için -moz- ve -webkit- kullanıldığını fark edeceksiniz.

2. Satır içi blok kullanarak ve genişliği %100'e ayarlayarak ürün öğelerini tuğlalara dönüştürür.

3. Bu öğelerin tüm sütunları kapsadığını belirterek sayfa başlığının ve gezinmenin kendi "satırında" oturmasını sağlar

Sadece işleri düzenli tutmak için aşağıdakileri de eklemeyi düşünebilirsiniz:

/* Some ad hoc CSS useful for many themes */
body.archive .site-content,
body.blog .site-content {
margin: 1em;
}

h1, h2, h3, h4, h5, h6, a {
-ms-word-wrap: break-word;
word-wrap: break-word;
}

Bu sadece içeriğin etrafına bir kenar boşluğu koyar ve başlıklardaki uzun kelimelerin biçimlendirmeyi bozmamasını sağlar (yalnızca burada değil, herhangi bir tema için yararlıdır).

Duyarlı Hale Getirmek

Sütun yaklaşımının bir dezavantajı, ekran boyutu küçüldükçe hızla azalmasıdır.

Yapmak istediğimiz şey, tuğlaların bütünlüğünü ve görsel çekiciliğini korumak için makale öğelerinin makul miktarda ekran gayrimenkulü elde etmesi için sütun sayısını değiştirmek. Öyleyse, ekran boyutuna göre sütun sayısını değiştirmek için bazı medya sorguları ekleyelim:

@media only screen and (max-width : 1024px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 768px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

@media only screen and (max-width : 480px) {

body.blog div#content, body.archive div#content { /* Masonry container */
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

Gördüğünüz gibi, her sorgu için yalnızca column-count özelliğini (ve türevlerini) değiştirmemiz gerekiyor.

Bu 4 kesme noktası, 3'ü tüm platformlarda çalışacak (etkilenmelerini görmek için tarayıcı pencerenizi yeniden boyutlandırmanız yeterlidir) ve özellikle portre modundaki bir tablet için olan 1'i.

İşte bir iPad ve iPhone'daki duvar stili:

Görsel çekiciliği geliştirmek için elbette daha ileri gidebilir ve tuğlalara daha fazla stil ekleyebilirsiniz (ve yapmalısınız), ancak gönderi listelerinizi bir duvar duvarına dönüştürmek için sadece 3 CSS ifadesi oldukça etkileyici!

Yazıları Izgaraya Yerleştirme

Duvarcılığın sağladığından daha fazla tekdüzelik ve düzenden hoşlanıyorsanız, gönderilerinizi bir ızgaraya yerleştirmekle ilgilenebilirsiniz.

Izgaraların uygulanması çok, çok kolaydır, ancak öne çıkan görüntülerin tümü aynı boyutta olduğunda kesinlikle en iyi şekilde çalışır, aksi takdirde kısa "hücreleri" dolduran çok sayıda boşlukla karşılaşabilirsiniz.

Bu sefer CSS daha da kısa, sadece makale öğelerini şekillendirmeye dayanıyor:

/* Grid Layout Custom CSS */
body.blog article, body.archive article {
width: 32.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

Kesinlikle gerekli olan tek şey bu. Yine satır içi blok kullanıyoruz ve makale içeriğinin (başlık, öne çıkan resim, alıntı) dikey olarak hizalanmasını sağlıyoruz.

Önemli özellik genişliktir , çünkü bu "sütun" sayısını belirler. 3 sütun sağlayacak olan ilk değer olarak %32,5 kullandım (%33 kullanmak erken sarmaya neden olabilir). Açıkçası, 4 sütun istiyorsanız, %24,5, 5 sütun %19,5 vb. kullanırsınız.

Duyarlılık Ekleme

Tıpkı duvar stilimiz gibi, ızgaraların da etkinliklerini sürdürebilmeleri için duyarlı olmaları gerekecek.

Sütun sayısını belirleyen genişlik özelliği olduğundan, çeşitli medya sorgularında değiştirilecek olan özellik budur.

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 768px) {

body.blog article, body.archive article {
width: 49%;
}
}

@media only screen and (max-width : 480px) {

body.blog article, body.archive article {
width: 100%;
}
}

Bu sefer sadece 3 sütunla başladığım için sadece 3 sorgu. Daha fazla sütunla başlamaya karar verirseniz, genişliği %32,5 (3 sütun) olarak ayarlamak için maksimum genişlik: 1024 piksellik bir kesme noktası eklemek isteyebilirsiniz.

Bu, aşağıdakilerle sonuçlanacaktır:

1. Dikey modda bir tablette 2 sütun
2. Ekran boyutu maksimum 768 piksel genişlik olduğunda 2 sütun
3. Ekran boyutu maksimum 480 piksel genişlik olduğunda 1 sütun

Bu kesme noktaları hem tabletleri hem de akıllı telefonları ve tarayıcı penceresinin yeniden boyutlandırılmasını kapsayacaktır.

İşte bir iPad ve iPhone'daki ızgara düzeni:

Izgaralar, duvarcılıktan biraz daha düzenlidir, ancak en etkili olmaları için öne çıkan görüntü boyutu söz konusu olduğunda gerçekten tutarlılık ve titizlik gerektirir.

Sitenize Özel CSS Ekleme

Seçtiğiniz özel CSS'yi WordPress sitenize enjekte etmek söz konusu olduğunda birkaç seçenek vardır. Temanız özel CSS ekleme özelliğini içermiyorsa, seçenekleriniz şunlardır:

• Alt Tema – bir alt tema oluşturun ve CSS'yi stil sayfasına ekleyin
• Eklenti – seçtiğiniz stili yeni bir CSS dosyasına ekleyin ve yeni dosyayı kuyruğa almak için, belki de oluşturulan sayfaya bağlı olarak koşullu olarak wp-enqueue-style işlevini kullanan bir eklenti oluşturun.
• Mevcut temanın stil sayfasını düzenleyin – gerçekten yapmayın, sadece yapmayın
• Özel bir CSS eklentisi kullanın – WordPress yönetici arayüzü aracılığıyla sitenize özel CSS eklemenize izin verecek bir dizi eklenti vardır (uygun bir şekilde adlandırılmış Basit Özel CSS eklentisi böyle bir eklentidir)

Özel CSS eklentisini kullanmayı seviyorum. Kurulumu hızlı ve kolaydır, test etmeyi çok kolaylaştırır ve CSS'yi WordPress sitenizden kaldırmak da aynı derecede hızlı ve kolaydır (düzenleyiciyi temizleyin veya eklentiyi kaldırın).

CSS, WordPress Zen'e Giden Yol

Harika CSS Zen Bahçesi, bir sitenin görünümünün ve hissinin, biçimlendirmede tek bir değişiklik olmadan, ancak CSS'yi değiştirerek büyük ölçüde değiştirilebileceğini uzun yıllardır kanıtlamaktadır.

Aynı seviyeye yakın olmasa da, bu iki teknik, WordPress sitenizin görünümünü ve verdiği hissi değiştirmenin, şablonları değiştirmeye, kısa kodlar kullanmaya veya alt temalar geliştirmeye gerek kalmadan da tamamen mümkün olduğunu kanıtlıyor.

Sadece biraz CSS.

Editörün Notu: Bu gönderi, doğruluk ve alaka düzeyi açısından güncellendi. [İlk Yayınlanma Tarihi: Temmuz 2014 / Gözden Geçirme: Şubat 2022]

• CSS
• ızgaralar