WP-PageNavi WordPress Eklentisini Şekillendirme Kılavuzu

Eğer aşina değilseniz WP PageNavi WordPress eklentisi, normal önceki / sonraki navigasyonu daha gelişmiş, numaralı bir sayfalama navigasyonu ile değiştirmenizi sağlar. Bu, geliştirdiğim bir dizi temaya eklediğim bir özellik, RS16, Blogwave, RS17, ve Parlak nokta.


RS16 SayfasıNavi

Bu öğreticide, nasıl yapılacağını ele alacağım:

  • WP-PageNavi’yi yükleyin ve temanıza düzgün bir şekilde entegre edin.
  • Varsayılan eklenti stillerini devre dışı bırakmak ve / veya geçersiz kılmak için iki yöntem.
  • WP-PageNavi’nin HTML biçimlendirme çıktısına genel bakış
  • Son olarak, sayfa gezintinizin görünümünü CSS aracılığıyla nasıl değiştirirsiniz?

Eklentiyi Yükleyin

WP-PageNavi eklentisini yüklemek söz konusu olduğunda iki seçeneğiniz vardır.

  • Buradan indirin WordPress.org, / wp-content / plugins / dizininize yükleyin ve etkinleştirin (aka, eski moda yolu).
  • Ana makinenize bağlı olarak, eklentileri WordPress yönetici panelinizdeki Eklentiler altındaki “Yeni Ekle” sayfasında arayarak otomatik olarak yükleyebilirsiniz. Sadece “pagenavi” yi arayın ve bulmalısınız.

Tamam, bu çok kolay olmalıydı. Şimdi entegrasyon kısmı için ellerinizi kodda biraz kirli hale getirme zamanı.

Tema Entegrasyonu

Tema entegrasyonumuzda, WP-PageNavi etkin değilse hiçbir zaman hata görüntülenmesini istemiyoruz. Bunun yerine, eski önceki / sonraki stil navigasyonuna geri döndüğünden emin olacağız. Bunu yapmak için bir function_ex koşullu kontrol var.

Bunun normal önceki / sonraki WordPress gezinme kodunuz olduğunu varsayalım:

<?php next_posts_link (‘«Eski Girişler’) ?>
<?php previous_posts_link (‘Yeni Kayıtlar »’) ?>

Bunu aşağıdaki şekilde değiştireceğiz:

<?php if (function_exists (‘wp-pagenavi’)) {wp_pagenavi (); } Başka { ?>
<?php next_posts_link (‘«Eski Girişler’) ?>
<?php previous_posts_link (‘Yeni Kayıtlar »’) ?>
<?php} ?>

Bu, temel olarak WP-PageNavi’nin etkin olup olmadığını kontrol eder ve açıksa yeni sayfa gezinme kodunu görüntüler. Değilse, zarif bir şekilde önceki / sonraki normal navigasyona geri döner.

Lütfen aklınızda bulundurun: CSS kodunuzun nasıl kodlandığına bağlı olarak, wp_pagenavi (); “navigasyon” (veya eşdeğeri) div içindeki bölüm. Unutmayın WP-PageNavi, ayrı olarak stil vermek için kullanabileceğimiz “wp-pagenavi” adlı yeni bir sınıf çıkarıyor.

Eklenti Stillerini Geçersiz Kıl

Varsayılan olarak, WP-PageNavi eklenti dizininden sitenizin başlığına pagenavi-css.css adlı bir CSS dosyasını otomatik olarak ekler. Bu varsayılan stillerin kendi özel yapım stillerimize müdahale etmesini istemiyoruz, bu yüzden onlardan tamamen kurtulacağız ve bunu yapmanın iki basit yolu var.

  • Tema dizininize bir CSS dosyası ekleyin – Bu muhtemelen varsayılan WP-PageNavi stillerini geçersiz kılmanın en kolay yoludur. Tema dizininizde pagenavi-css.css adlı bir dosyanız varsa, WP-PageNavi eklenti dizinindeki varsayılan dosya yerine bunu kullanır.
  • Function.php dosyanıza bir snippet ekleyin – Aldığım aşağıdaki kod pasajı WP Tarifler yukarıdaki davranışı tamamen devre dışı bırakır ve eklentiden herhangi bir stil sayfasını içermez (varsayılan olarak veya tema dizininizde geçersiz kılma).

add_action (‘wp_print_styles’, ‘my_deregister_styles’, 100);

işlev my_deregister_styles () {
wp_deregister_style (‘wp-pagenavi’);
}

Bu kodu temanızın function.php dosyasına yerleştirin ve CSS stillerini normal temanızın stil sayfasına ekleyin (genellikle style.css).

Not: Kodun aşağıdaki gibi köşeli parantezlerle çevrili olduğundan emin olun <?php … ?> işlev dosyanız şu anda boşsa.

WP-PageNavi HTML İşaretleme ve CSS Seçicileri

WP-PageNavi işaretlemesi şöyle görünür. Aşağıdaki örnekte, şu anda ikinci sayfada olan dört sayfa var.

Önceki1
2
3
Sonraki

Son “

Yukarıdaki HTML işaretlemesini hedeflemek için aşağıdaki CSS seçicilerini kullanabiliriz:

  • .wp-pagenavi – CSS temizlemeleri, dolgu / kenar boşluğu, yazı tipi boyutları ve stilleri (kalın, italik vb.) için yararlı olan tüm div için geçerlidir
  • .wp-pagenavi a – Sayfa numaraları ve önceki / sonraki dahil olmak üzere sayfa gezintisindeki tüm bağlantıları hedefler.
  • .wp-pagenavi a.page – Sayfa numaralarını özel olarak hedefler
  • .wp-pagenavi a.first – “İlk” bağlantıyı özel olarak hedefler (yukarıda listelenmemiştir)
  • .wp-pagenavi a.last – “Son” bağlantıyı özel olarak hedefler
  • .wp-pagenavi span – Geçerli sayfa numarasını genişletme kısmı ile birlikte hedefler (üç noktalı şey)
  • .wp-pagenavi span.current – Geçerli sayfa numarasını özellikle hedefler
  • .wp-pagenavi span.extend – Özellikle genişletmeyi hedefler (üç nokta şeyi)
  • .wp-pagenavi span.pages – Sayfa numarası görüntüsünü özellikle hedefler (ör. Sayfa 1/4)

Not: Varsayılan olarak önceki ve sonraki bağlantıların üzerinde CSS sınıfı yoktur. Sayfa numaralarından ve ilk / son bağlantılardan tamamen farklı olmalarını istiyorsanız, bunların .wp-pagenavi a seçicisine eklenen stilleri sıfırlamaları gerekir. Bu bir anlam ifade etmiyorsa, aşağıdaki (gerçekten basitleştirilmiş) örneğe bir göz atın.

Örneğin: Önceki ve sonraki bağlantıların kalın olmasını istediğinizi, ancak diğer her bağlantının normal bir ağırlığa sahip olmasını istediğinizi varsayalım. Aşağıdakileri yapmanız gerekir:

.wp-pagenavi a {font-weight: kalın; } / * Yalnızca önceki ve sonraki bağlantılar * /
.wp-pagenavi a.page,
.wp-pagenavi a.ilk,
.wp-pagenavi a.last {font-weight: normal; } / * Diğer bağlantılar * /

Sayfa numarası bağlantılarını, ilk bağlantıyı ve son bağlantıyı bir amaç için bir kural olarak birleştirdim. Tabii ki, bunları ayırabilir ve her birine daha spesifik stiller ekleyebilirsiniz.

Varsayılan olarak önceki / sonraki bağlantılara bir sınıf eklenmişse, ancak daha kolay olurdu. Onları sıfırlayabileceğiniz için çok büyük bir anlaşma değil.

Önemli Güncelleme: Tarafından yapılan güncelleme sayesinde scribu yorumlarda, WP-PageNavi’nin en son sürümü üzerinde önceki / sonraki sınıflara sahip olduğu ortaya çıkıyor (kısmen teşekkürler Yoast).

Önceki ve sonraki bağlantıları seçmek için sırasıyla .wp-pagenavi a.previouspostslink ve .wp-pagenavi a.nextpostslink kullanabilirsiniz..

Sıralanmamış seçim listesi artık geçerli olmayana kadar yukarıdaki her şey artık geçerli değil, ancak diğer bazı durumlarda CSS’yi geçersiz kılmak için yararlı bir ders olabileceğinden bunu devam ettireceğim. Bu seçicileri yine de kullanmadığım için aşağıdaki CSS örneği yine de geçerli olacak.

Bir CSS Örneği

İşte benim oluşturduğum bir PageNavi stiline örnek Blogwave tema.

Blogwave Güncelleme SayfasıNavi

İşte bu görünümü elde etmek için kullandığım kod, çok satırlı CSS İsteğe bağlı:

.wp-pagenavi a, .wp-pagenavi yayılma alanı {
dolgu: 5 piksel; kenar boşluğu: 10 piksel;
yazı tipi boyutu: 15 piksel; renk: # 03719c; metin dekorasyonu: yok;
kenarlık: 3 piksel katı #ccc; -moz-sınır-yarıçapı: 5 piksel; -webkit-sınır-yarıçapı: 5 piksel; sınır yarıçapı: 5 piksel;
}
.wp-pagenavi a: vurgulu, .wp-pagenavi span.current {
arka plan: # 03719c;
renk: #fff;
kenarlık: 3 piksel katı #AFAFAF;
}
.wp-pagenavi span.current {font-weight: kalın; }

Ve işte bunun anlamı:

İlk Kural
.Wp-pagenavi a, .wp-pagenavi yayılma alanı .wp-pagenavi div içindeki tüm bağlantı ve yayılma öğelerini (hemen hemen her şey) seçer.

  • Kuralın ilk satırı, 5px’lik bir dolgu oluşturur, böylece açık gri kenarlığa (aşağıda tanımlanır) sıkıştırılmaz. Ayrıca, her öğenin sağına 10 piksel tutarlı bir kenar boşluğu belirler, böylece her biri arasında eşit boşluk vardır.
  • İkinci satır yazı tipi boyutunu 15 piksel olarak ayarlar, metin rengini mavi yapar ve bağlantıların alt çizgisi olmadığından emin olur.
  • Üçüncü satır, her şeye 3 piksel gri bir kenarlık koyuyor. Sınır yarıçapı kodu köşeleri yuvarlatır.

İkinci Kural
.Wp-pagenavi a: hover, .wp-pagenavi span.current, sırasıyla bağlantı vurgusu efektini ve geçerli sayfa numarasını seçer.

  • İlk satır koyu mavi arka plan rengini belirler.
  • İkinci satır metni beyaz yapar.
  • Üçüncü satır biraz daha koyu bir kenarlık verir.

Üçüncü Kural
Bu, bağlantı vurgusu efektini de etkilemeden geçerli sayfa numarasını (tekrar) seçer (ikinci kural gibi). Bu, geçerli sayfa numarasını kalın yazı tipi ağırlığı yapar.

Bağlantı vurgulu efektine eklemememin nedeni, normalden kalın yazı tipi ağırlığına kadar düzensiz bir etkiye sahip olmasıdır..

Not: CSS’nizin kodlanma şekline bağlı olarak, daha spesifik seçiciler kullanmanız gerekebilir. Örneğin, #content a için stiller varsa ve WP-PageNavi’niz içerik divının içindeyse, PageNavi CSS’nizi #content .wp-pagenavi a olarak yeniden yazmanız ve daha az spesifik olan diğer stilleri geçersiz kılmanız gerekebilir..

Sonuç

Bunun nispeten basit bir örnek olduğunu biliyorum, çeşitli bağlantıları ve diğer öğeleri daha da farklılaştırmak için çok daha gelişmiş CSS kurallarına sahip olabilirsiniz. Umarım yol boyunca birkaç CSS ipucu da seçmişsinizdir..

İsteğe bağlı WP-PageNavi entegrasyonu, tema geliştiricilerin temalarına entegre edebilecekleri harika bir özelliktir. Yukarıda özetlediğim entegrasyon yöntemi ile kullanıcılar kolayca kullanıp kullanamayacaklarını kolayca seçebilir ve birçok blog için iyi bir seçenek olabilir.

Umarım öğreticiyi beğenmişsinizdir ve gelecekteki WordPress öğreticileri veya CSS ipuçları için herhangi bir isteğiniz varsa, yorumlarda bana bildirin.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map