WordPress Blok Düzenleyicide Sayfalandırmayı Özelleştirme

Sayfalandırma, özellikle bloglar veya ürün listeleri gibi uzun biçimli içeriğe sahip web siteleri için, web tasarımında kritik bir bileşendir. Etkili sayfalandırma, hem kullanıcı memnuniyetini hem de arama motoru optimizasyonunu (SEO) artırarak kusursuz bir tarama deneyimi sağlar.

Yaygın olarak Gutenberg olarak bilinen WordPress Blok düzenleyicisindeki sayfalandırma özelliği, bağımsız bir blok değil, Sorgu Döngüsü bloğunun bir parçasıdır. Sorgu Döngüsü bloğu, bir blok temasında gönderileri görüntülemenize veya özel şablonlar oluşturmanıza olanak tanır.

Gutenberg'in Sorgu Döngüsü'ndeki sayfalandırma bloğu, kullanıma hazır özelleştirme söz konusu olduğunda oldukça sınırlıdır. Varsayılan tasarımı her zaman sitenizin estetik ihtiyaçlarına uygun olmayabilir ancak özel CSS kullanarak görünümünü ve işlevselliğini artırabilirsiniz.

Bu makale, sitenizin gezinmesini ve genel kullanıcı deneyimini geliştirmenize olanak tanıyarak, özel CSS ekleyerek Gutenberg düzenleyicisindeki sayfalandırmayı değiştirme ve optimize etme adımlarında size rehberlik edecektir.

WordPress Blok Düzenleyicide Sayfalandırmayı Özelleştirme Adımları

1. Adım: Sayfa veya Şablon Oluşturun veya Düzenleyin

Yeni bir gönderi türü oluşturun (sayfa/yazı) veya mevcut olanı seçin. Blok teması kullanıyorsanız Site Düzenleyici'yi kullanarak yeni bir şablon ekleyebilir veya mevcut şablonu düzenleyebilirsiniz.

Bu örnekte gönderiler sayfası (blog sayfası) olarak kullanacağımız yeni bir sayfa oluşturacağız.

Sorgu Döngüsü Bloğunu Ekle

WordPress kontrol panelinizde Sayfalar -> Yeni Sayfa Ekle seçeneğine gidin. Gutenberg'e bir Sorgu Döngüsü bloğu ekleyin. Bu blok gönderileri, sayfaları veya özel gönderi türlerini görüntülemenize olanak tanır.

Sorgu döngüsü için bir model seçebilir veya boş başlayabilirsiniz. Bu örnek için siyah başlat seçeneğini seçiyoruz ve ardından sorgu döngüsünün varyasyonu için Resim, Tarih ve Başlık'ı seçiyoruz.

Daha sonra, Blok ayarlarını kullanarak Sorgu Döngüsü bloğundaki tüm öğelerin görünümünü düzenleyebilir ve stillendirebilirsiniz.

Adım 2: Sayfalandırma Öğesi CSS Sınıfını Tanımlayın

Sayfalandırma öğesini özelleştirmeden önce belirli CSS sınıfını belirlemeniz gerekir. Genellikle sınıf adı WordPress temasına ve kullandığınız herhangi bir etkin eklentiye bağlıdır. Peki sayfanızdaki her sayfalandırma öğesinin CSS sınıfı adını nasıl alırsınız?

Yeni sekmede önizle düğmesini tıklayarak sayfanızı önizleyin.

Web tarayıcınızın yerleşik Geliştirici Araçlarını kullanabilirsiniz (neredeyse tüm web tarayıcılarında bu özellik bulunur). Google Chrome kullanıyorsanız menü simgesini (üç nokta simgesi) tıklayıp Diğer Araçlar -> Geliştirici Araçları öğesini seçebilirsiniz.

Geliştirici Araçları penceresine girdikten sonra, sayfanızdaki bir öğeyi incelemek için ok simgesini tıklayın (aşağıdaki resme bakın).

Daha sonra, sınıflarını belirlemek için imleci sayfalandırma öğelerinin (ana sayfalandırma kabı, tek tek sayfa numaraları, geçerli sayfa numarası, önceki ve sonraki düğmeler) üzerine getirin.

Yukarıdaki görselden de görebileceğiniz gibi, sayfalandırma elemanlarımızın CSS sınıflarını aşağıda belirledik:

3. Adım: Sayfalandırma için Özel CSS Ekleme

Daha sonra, Sorgu Döngüsü bloğundaki sayfalandırma öğesini özelleştirmek için CSS pasajını WordPress tema özelleştiricisine ekleyeceğiz. WordPress kontrol panelinizde Görünüm -> Özelleştirici -> Ek CSS seçeneğine gidin. Daha sonra aşağıdaki CSS pasajını kopyalayıp mevcut alana yapıştırın.

Not : Blok teması kullanıyorsanız WordPress'inizde tema özelleştiriciyi nasıl etkinleştireceğinizi öğrenmek için burayı tıklayın.

 .wp-block-query-sayfalandırma {
  ekran: esnek;
  yasla-içerik: merkez;
  kenar boşluğu: 20 piksel 0;
}

.wp-block-query-pagination .page-numbers {
  dolgu: 5 piksel 8 piksel;
  arka plan rengi: #f0f0f0;
  kenar boşluğu: 0 3 piksel;
  renk: #000000;
}

.wp-block-query-pagination .page-numbers.current {
  arka plan rengi: #601599;
  renk: beyaz;
}

.wp-block-query-pagination-önceki {
  dolgu: 8 piksel 12 piksel;
  arka plan: #233b27;
  kenar boşluğu: 0 4 piksel;
  renk: #ffffff;
  kenarlık yarıçapı: 4px;

}

.wp-block-query-pagination-sonraki {
  dolgu: 8 piksel 12 piksel;
  arka plan: #233b27;
  kenar boşluğu: 0 4 piksel;
  renk: #ffffff;
  kenarlık yarıçapı: 4px;
}

.wp-block-query-pagination .page-numbers:hover {
  arka plan rengi: #be76f5;
  renk: beyaz;
}

.wp-block-query-pagination-önceki:hover {
  arka plan: #ffb300;
  renk: #000000;
}

.wp-block-query-pagination-sonraki:hover {
  arka plan: #ffb300;
  renk: #000000;
}

Yaptığınız değişiklikleri uygulamak için Yayınla butonuna tıklamayı unutmayın.

İşte bu. Sonucu görmek için lütfen sayfanıza dönün ve ardından önizleyin. Sayfalandırma öğelerinizin özelleştirildiğini göreceksiniz. Genel tasarımınızla eşleşen görünümü elde etmek için CSS özellik değerlerini değiştirmekten çekinmeyin.

İsterseniz sayfanızı kaydetmeyi veya yayınlamayı unutmayın.

CSS kodu ne yaptı?

• Ana sayfalandırma kapsayıcısı: .wp-block-query-pagination
  • Sayfalandırma öğelerini ortalamak için Flexbox'ı kullanır ve dikey boşluk (20 piksel) ekler.
• Bireysel sayfa numaraları: .wp-block-query-pagination .page-numbers
  • padding: 5px 8px; : Her sayfa numarası içinde boşluk oluşturur. Tıklanabilir alanı artırarak 5 piksel dikey dolgu (üst ve alt) ve 8 piksel yatay dolgu (sol ve sağ) ekler.
  • background-color: #f0f0f0; : Sayfa numaralarının arka plan rengini açık griye (#f0f0f0) ayarlar.
  • margin: 0 3px; : Sayfa numarası öğeleri arasına yatay boşluk (solda ve sağda 3 piksel) ekler. Dikey kenar boşluğu olmadığından aralık yalnızca yatay hizalamayı etkiler.
  • color: #000000; : Sayfa numaralarının metin rengini siyaha değiştirerek açık renkli arka planla iyi bir kontrast oluşturmasını sağlar.
• Geçerli sayfa numarası: .wp-block-query-pagination .page-numbers.current
  • background-color: #601599; : Geçerli (etkin) sayfa numarasının arka plan rengini zengin mor (#601599) olarak değiştirir. Bu görsel olarak o anda hangi sayfanın seçildiğini gösterir.
  • color: white; : Metin rengini beyaza ayarlayarak mor arka plana karşı yüksek kontrast sunarak etkin sayfa numarasını görünür hale getirir.
• Önceki ve Sonraki Düğmeler: .wp-block-query-pagination-previous ve . wp-block-query-pagination-next
  • Koyu yeşil arka plan, beyaz metin, dolgu ve hafif yuvarlatılmış köşelerle tasarlanmıştır.
• Vurgulu Efektler:
  • .wp-block-query-pagination .page-numbers:hover
    • Kullanıcı herhangi bir sayfa numarasının üzerine geldiğinde, arka plan rengi hafif bir etkileşim etkisi için açık mor (#be76f5) olarak değişir.
    • Metin rengi beyaza dönerek kontrastı artırır ve fareyle üzerine gelindiğinde okunabilirliği artırır.Hover Efektleri:
  • .wp-block-query-pagination-previous:hover ve . wp-block-query-pagination-next:hover
    • Kullanıcı "Önceki" veya "Sonraki" düğmelerinin üzerine geldiğinde arka plan canlı sarı-turuncuya (#ffb300) dönüşerek ön plana çıkıyor.
    • Metin rengi siyaha dönüşerek parlak arka planda net okunabilirlik sağlar.

Sonuç olarak

Bu makale, herhangi bir eklentinin yardımı olmadan WordPress Blok Düzenleyicide sayfalandırmayı ne kadar kolay özelleştirebileceğinizi gösterir. WordPress Blok Düzenleyicisi'ndeki sayfalandırmayı özel CSS ile özelleştirmek, sitenizdeki gezinmenin görünümü ve işlevselliği üzerinde daha fazla kontrol sahibi olmanızı sağlar.

CSS'den yararlanarak sayfalandırmayı markanızın stiline uyacak şekilde özelleştirebilir, kullanıcı deneyimini geliştirebilir ve WordPress sitenizin genel tasarımını geliştirebilirsiniz. İster renkleri, boyutları veya sayfalandırma öğelerinin düzenini ayarlamayı seçin, özel CSS'nin esnekliği web sitenizde kusursuz ve görsel olarak çekici bir kullanıcı yolculuğu oluşturmanıza olanak tanır.

Bununla birlikte, özel CSS'ye ihtiyaç duymadan zengin tasarım seçenekleri istiyorsanız Divi veya Elementor gibi bir WordPress eklentisi kullanmanızı önemle tavsiye ederiz; çünkü her ikisi de kapsamlı özelleştirme özelliklerine sahip sezgisel görsel oluşturucular sunar ve çarpıcı, tamamen duyarlı düzenler oluşturmanıza olanak tanır. doğrudan sayfa oluşturucu arayüzünde gelişmiş sayfalandırma, dinamik içerik ve stil seçenekleri.