WordPress Temanıza Sayısal Sayfalama Ekleme

Okuyucularımızdan biri yakın zamanda bize WPBeginner blog sayfasına nasıl sayısal sayfalama ekleyeceğimizi sordu. Varsayılan WordPress temaları ve diğer birçok tema, WordPress arşiv sayfalarınızın altına Daha Eski yayınlar ve Daha Yeni Yayınlar bağlantıları ekleyerek sayfalandırma bağlantılarını görüntüler. Ancak, WPBeginner gibi sayısal sayfalama kullanan birçok WordPress sitesi vardır. Deneyimlerimize göre, sayısal sayfalandırma daha kullanıcı dostu, çekici ve SEO dostu. Genesis gibi en gelişmiş WordPress tema çerçeveleri, sayısal sayfalama eklemek için yerleşik bir işleve sahiptir. Bu makalede, WordPress temanıza nasıl sayısal sayfalama ekleyeceğinizi göstereceğiz. Amaç, arşiv sayfalarının altındaki varsayılan Eski ve Daha Yeni sayfalama bağlantılarını, gezinmesi kolay sayfa numaralarıyla değiştirmektir.


Varsayılan WordPress gezinme ve Sayısal Sayfalama arasındaki fark

WordPress temanıza sayısal sayfalandırma eklemenin iki yöntemi vardır. İlk yöntem, bir üçüncü taraf eklentisine bağlı kalmadan elle sayısal sayfalama eklemektir. Bu makale tema kategorisinde olduğundan ve yeni tema tasarımcıları için tasarlandığından, önce manuel yöntemi göstereceğiz. İkinci yöntem, sayısal sayfalama eklemek için mevcut bir üçüncü taraf eklentisini kullanmaktır. Bu yöntemi tüm DIY kullanıcılarımız için öneriyoruz.

WordPress Temalarınıza Manuel Olarak Sayısal Sayfalama Ekleme

İlk önce WordPress temalarınıza manuel olarak nasıl sayısal sayfalama ekleyeceğinizi göstereceğiz. Bu, gelişmiş kullanıcılarımıza ve tema geliştirmeyi öğrenen veya bunu üçüncü taraf bir eklentiye dayanmadan yapmak isteyen kullanıcılara fayda sağlayacaktır. Temanızın function.php dosyasına aşağıdaki kodu ekleyerek başlayalım.

Not: Bu kod, sitemizde kullandığımız Genesis Framework’ten türetilmiştir. Genesis kullanıyorsanız, bu koda veya eklentiye ihtiyacınız yoktur.

işlev wpbeginner_numeric_posts_nav () {

if (is_singular ())
dönüş;

global $ wp_query;

/ ** Yalnızca 1 sayfa varsa yürütmeyi durdur * /
eğer ($ wp_query->MAX_NUM_PAGES <= 1)
dönüş;

$ paged = get_query_var (‘paged’)? absint (get_query_var (‘sayfalanmış’)): 1;
$ max = aralık ($ wp_query->max_num_pages);

/ ** Geçerli sayfayı diziye ekle * /
eğer ($ disk belleği >= 1)
$ links [] = $ disk belleği;

/ ** Geçerli sayfanın çevresindeki sayfaları diziye ekle * /
eğer ($ disk belleği >= 3) {
$ links [] = $ disk belleği – 1;
$ links [] = $ disk belleği – 2;
}

eğer (($ disk belleği + 2) <= maks. $) {
$ links [] = $ disk belleği + 2;
$ links [] = $ disk belleği + 1;
}

Eko ‘

    ‘ . "\ n";

    / ** Önceki Yazı Bağlantısı * /
    eğer (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_previous_posts_link ());

    / ** İlk sayfaya bağlantı, ayrıca gerekirse üç nokta * /
    if (! in_array (1, $ bağlantılar)) {
    $ class = 1 == $ disk belleği? ‘class ="aktif"’:’ ‘;

    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ bağlantı))
    Eko ‘

  • ‘;
    }

    / ** Geçerli sayfaya bağlantı, gerekirse her iki yönde 2 sayfa * /
    sıralama ($ links);
    foreach ((dizi) $ linkleri $ link olarak) {
    $ class = $ paged == $ bağlantı? ‘class ="aktif"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Son sayfaya bağlantı, ayrıca gerekirse üç nokta * /
    if (! in_array (maks. $, $ bağlantılar)) {
    if (! in_array (maks. $ – 1, $ bağlantı))
    Eko ‘

  • ‘ . "\ n";

    $ class = $ paged == $ maks? ‘class ="aktif"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link (maks. $)), maks. $);
    }

    / ** Sonraki Yazı Bağlantısı * /
    eğer (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_next_posts_link ());

    Eko ‘

‘ . "\ n";

}

WPBeginner’da aynı kodu arşiv sayfalarımızdaki sayısal sayfalandırma için kullanırız (örneğin blogumuz veya WordPress eğiticileri kategori sayfası). Bu kodun yaptığı, sayfa sayısını alması ve madde işaretli numaralandırılmış bağlantıların bir listesini hazırlamasıdır. Bunu şablonlarınıza eklemek için temanızın index.php, archive.php, category.php ve diğer tüm arşiv sayfası şablonlarına aşağıdaki şablon etiketini eklemeniz gerekir.

<?php wpbeginner_numeric_posts_nav (); ?>

Artık numaralı sayfalar listemize sahip olduğumuza göre, bu listeyi biçimlendirmemiz gerekiyor. Listenin, etkin sayfanın farklı bir arka plan rengiyle vurgulandığı satır içi blokta görünmesini istiyoruz. Bunu yapmak için, temanızın style.css dosyasına şunları ekleyelim:

.navigasyon,
.gezinti simgeleri,
.navigasyon li.aktif a,
.navigasyon li.disabled {
renk: #fff;
text-decoration: none;
}

.navigasyon li {
ekran: satır içi;
}

.navigasyon,
.gezinti simgeleri,
.navigasyon li.aktif a,
.navigasyon li.disabled {
arka plan rengi: # 6FB7E9;
sınır yarıçapı: 3 piksel;
imleç: işaretçi;
dolgu: 12 piksel;
dolgu: 0.75rem;
}

.gezinti simgeleri,
.navigasyon li.active a {
arka plan rengi: # 3C8DC5;
}

İşte aldın. Temamızda harika görünen sayısal sayfaların bir listesi var.

Eklenti olmadan WordPress temalarına el ile sayısal sayfalama ekleme

WP-PageNavi Kullanarak WordPress’e Sayısal Sayfalama Ekleme

Şimdi WP-PageNavi adlı mevcut bir eklentiyi kullanarak WordPress temanıza nasıl sayısal sayfalama ekleyelim. Yapmanız gereken ilk şey, WP-PageNavi eklentisini yüklemek ve etkinleştirmektir. Eklentiyi etkinleştirdikten sonra şu adrese gidin: Ayarlar »PageNavi eklenti ayarlarını yapılandırmak için.

WP-PageNavi ayarlarını yapılandırma

Eklenti ayarları sayfasında, varsayılan metin ve sayısal sayfalama ayarlarını isterseniz kendi ayarlarınızla değiştirebilirsiniz. Ancak, varsayılan ayarlar çoğu web sitesinde çalışmalıdır.

Bir sonraki adımda, WordPress Temanıza bir şablon etiketi eklemeniz gerekir. Tema klasörünüze gidin ve arşiv sayfası şablonlarınızda daha eski ve daha yeni sayfalara ilişkin satırları bulun: index.php, archive.php ve diğer arşiv şablonu dosyaları. Eski previous_posts_link ve next_posts_link etiketlerini değiştirmek için aşağıdaki şablon etiketini ekleyin.

<?php wp_pagenavi (); ?>

Wp_pagenavi snippet’ini ekledikten sonra, sayısal sayfalama şöyle görünür:

Wp-pagenavi'nin sayısal sayfalamasının varsayılan görünümü

Wp-pagenavi’deki sayısal sayfalamanın renklerini ve stilini değiştirmek istiyorsanız, o zaman Ayarlar »PageNavi. Pagenavi-css.css Kullan ve değişiklikleri kaydet seçeneğinin işaretini kaldırın. Şimdi git Eklentiler »Editör. Düzenlemek için eklenti seçin açılır menüsünden WP-PageNavi’yi seçin ve Seç düğmesine tıklayın. Editör eklenti dosyalarını sağ kenar çubuğuna yükleyecektir. Düzenleyicide açmak için pagenavi-css.css dosyasına tıklayın ve ardından dosyanın içeriğini kopyalayın.

Pagenavi-css dosyasının içeriğini kopyalama

Sonra, gitmelisin Görünüm »Editör ve pagenavi-css.css içeriğini temanızın style.css dosyasına yapıştırın. Şimdi renk şemasını ve stilini buradan değiştirebilirsiniz. Eklentinin css içeriğini temanın stil sayfasına kopyalamamızın nedeni, eklentiyi güncellemeniz durumunda stil değişikliklerinin kaybolmasını önlemektir. İşte sayısal sayfalamanın biraz değiştirilmiş bir sürümü, temanızda kullanmaktan çekinmeyin ve değiştirin.

.wp-pagenavi {
ikisini de temizle;
}

.wp-pagenavi a, .wp-pagenavi yayılma alanı {
renk: #FFF;
metin dekorasyonu: yok;
background-color: # 6FB7E9;
sınır: 1 piksel katı # B2D1E5;
dolgu: 5px 5px;
kenar boşluğu: 2 piksel;
}

.wp-pagenavi a: vurgulu, .wp-pagenavi span.current {
kenarlık rengi: # E9F2F9;
background-color: # 6FB7E9;
}

.wp-pagenavi span.current {
yazı tipi ağırlığı: kalın;
background-color: # 3C8DC5;
}

İşte böyle görünecektir:

Özelleştirilmiş PageNavi CSS

Her zaman olduğu gibi CSS ile deney yapmalısınız. Amaç, sayısal sayfalandırmayı web sitenizin renklerinin görünümü ve hissi ile eşleştirmek olmalıdır, böylece güzel bir şekilde karışır ve garip bir şekilde yerleştirilmiş bir öğeye benzemez.

Bu makalenin, WordPress temanıza sayısal sayfalandırma eklemenize ve görüntülemenize yardımcı olduğunu umuyoruz. Hangi yöntemi kullanmayı tercih ediyorsunuz? Sayısal sayfalamayı seviyor musunuz veya yerleşik önceki / sonraki gezinmeyi mi tercih ediyorsunuz? Aşağıdaki yorumlarda bize 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