WP-PageNavi - bir WordPress blogu için sayfa navigasyonu - sayfalandırmanın görünümünü kurun, yapılandırın ve değiştirin. WP-PageNavi ile WordPress Sayfalandırma

  • 20.04.2019

Merhaba blog sitemin okuyucuları bugün sizlerle blogda eklentisiz sayfalandırma ayarlarını paylaşacağım. Sitede neden sayfalandırmaya ihtiyacınız var ve bu ne işe yarar? Bu, site ziyaretçilerinin kendileri için yararlı bilgileri kolayca bulabilecekleri bir kullanılabilirlik blogudur.

Bu nedenle, navigasyon ayarlarına geçmeden önce yapılandırmanız gerekir. uygun mod blog sayfasında görüntülenecek yazılarınızı okumak. Bunu yapmak için Yönetim Paneli - Ayarlar - Okuma'ya gidin:

ve her sayfada görüntülenecek görüntüleme gönderilerinin sayısını ayarlayın:

İÇİNDE bu durum 5 kayıt ayarlandı. Tipik olarak, bir blog sayfa başına 5 ila 7 giriş görüntüler. Bu ayarlarla ilgilendiğimize göre, sayfanın alt kısmında şuna benzeyen standart WordPress sayfalandırmasını görüyoruz:

Blogunuzda 10-15 gönderi olduğunda ve bunlar 2-3 sayfadan fazla olmadığında, bu tür bir gezinme oldukça uygundur, ancak önemli blog düzenli olarak içerikle doldurulduğunda ve makale sayısı 100 veya 200'e yakın olduğunda ve tüm bu gönderiler her sayfaya 5 tane yerleştirilmiştir. O zaman blogda kaç sayfa yayınlanacağını hesaplamanın zor olmayacağını düşünüyorum. Aynı zamanda, blogunuzun ziyaretçisinin herhangi bir gönderiyi bulmak için WordPress'teki blogun tüm sayfalarını kaydırması gerekmemesi için sayfalandırma daha uygun olmalı ve fonksiyonel görünüm kullanıcı için:

Bu tür gezinme, okuyucunun blogunuzda kalmasına yardımcı olur, böylece onunla alakalı gönderileri aramak için sitenizde gezinmesi daha uygun olur. Böylece, blogumuzu tanıtmamıza yardımcı olan tekrar gelişiyoruz.

Benzer gezinti çubuğu WP-PageNavi eklentisi kullanılarak oluşturulabilir. Aynı zamanda siteyi görüntülerken ek yükler oluşturmamak için blogun en az sayıda eklenti ile çalışması gerektiğine inanıyorum. Bu nedenle, basit bir ayar ele alacağız WordPress ekranı eklenti olmadan sayfalama.

Teknik Ayarlar

Paneli Açma Yönetim- Ayarlar-Editör -functions.php dosyasını açın ve başlangıçta aşağıya yapıştırın belirtilen kod:

// Gezinti çubuğu
function wp_corenavi() (
global $wp_query, $wp_rewrite;
$sayfa = ";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a["base"] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a["toplam"] = $maks;
$a["geçerli"] = $geçerli;

$toplam = 0; //1 - "Page N of N" metnini görüntüle, 0 - görüntüleme
$a["mid_size"] = 1; //geçerli olanın solunda ve sağında kaç tane bağlantı gösterilecek
$a["end_size"] = 1; //başta ve sonunda kaç tane bağlantı gösterilecek
$a["prev_text"] = '"'; //Sol atlama alıntısı"
$a["next_text"] = '"'; //Sağa atlama alıntısı"

if ($max > 1) echo ‘

’;
if ($toplam == 1 && $maks > 1) $sayfalar = ‘ Sayfa ' . $ akım. ' itibaren ' . $maks. ''."\r\n";
yankı $sayfa . paginate_links($a);
if ($max > 1) echo ‘
’;
}

veya bunun gibi:

ve vurgulanan kodu aşağıdaki ile değiştirin:

Bundan sonra sitenizdeki ayarları kontrol ediyoruz, navigasyon ayarlarının standart gösterimi görüntülenmelidir:

Gezinti çubuğu

*/
.wp-pagenavi (
yükseklik: 50 piksel;
ikisini de temizle;

renk:#BB7B00;
}
.wp-pagenavi span.pages(
renk: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi yayılma alanı (
metin-dekorasyon: yok;
dolgu: 6px 9px;
kenar boşluğu: 2 piksel
arka plan:#ffffff;
yazı tipi: kalın 14 piksel Verdana, sans-serif;
renk: #85B6C5;
sınır yarıçapı:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current (
kenarlık rengi: #BB7B00;
arka plan:#85B6C5;
renk:#ffffff;
}
.wp-pagenavi span.current(
renk: #f5f5f5;
arka plan:#85B6C5;
dolgu: 8px 9px;
}

Artık görüntülenecek stilleri dahil ettik WordPress Panoları eklentiyi kullanmadan navigasyon, benzer bir görünüm görebiliriz:

Beğenmeyen sayfaların ek kopyalarından kurtulmak için arama motorları indekslemeden kapatmamız gerekiyor sayfa sayfası. Bunu yapmak için, function.php dosyasının başına eklememiz gerekiyor aşağıdaki kod:

/*** SAYFALAR İÇİN meta robotlar noindex,nofollow EKLE ***/
işlev my_meta_noindex()(

Eğer (
is_paged() // Tüm Sayfalar ve Gezinme Sayfaları
) (Eko "".' '."\n";)
}

add_action('wp_head', 'my_meta_noindex', 3); // head'e noindex,nofollow ekle

Ayarlarımızı kaydedip kontrol ediyoruz. Bunu yapmak için 2, 3-10 vb. sayfalardan herhangi birini açın, Ctrl + U tuşlarına basın ve sayfa kodlamasında aşağıdaki kod görüntülenmelidir:

Aynı zamanda önemli robots.txt dosyasında Disallow: /page kapanmamalıdır indekslemeden. Bu, ayarları tamamlar, umarım tüm bu kodlamaları anlamışsınızdır. Herhangi bir sorunuz varsa, yorumlara yazın, kesinlikle cevaplayacağım. Yakında görüşürüz!

Her site aslında bir bütündür navigasyon ve bağlantı sistemi, robotların ve ziyaretçilerin hareket ettiği. Bu sistem değişen derecelerde karmaşıklığa sahip olabilir. Kural olarak, tüm ana bölümlere ve statik sayfalara bağlantılar içeren ana menüyü içerir, ek menüler, (tüm sayfalara ve bölümlere bağlantıların sıralı ve yapılandırılmış bir listesi). Ek olarak, bir İnternet kaynağının navigasyon sistemi şunları içerebilir: sayfa gezinme.

Bu, içlerinde gömülü köprüler bulunan ve her biri aşağıdakilere yol açan bir dizi düğmedir. belirli sayfa. nerede Konuşuyoruz statik sayfalar ve gönderileri olan sayfalar hakkında değil, gönderi duyurularını yayınlayan sayfalar (blog formatı) hakkında.

Ayarlara gelince, çok fazla yok. Başlamak için, ilk ve son sayfaların yanı sıra sonraki ve önceki sayfaların adlarını belirtmelisiniz. Bu düğmeler, hangi sayfada olursanız olun gösterilecektir. şu an. WP Page Navi'den gelen düğmelerin blogda görünmesi için, daha önce yazdığım gibi şablondaki standart gezinme kodunu kaldırmanız gerekir, büyük olasılıkla arşiv.php veya content.php şablonunda olacaktır. . Ve kod yerine şunu yapıştırın:

Genellikle bu satırla başlar -

. Bu eklenti pagenavi-css.css'nin CSS dosyası aracılığıyla düğmelerin görünümünü (ön plan ve arka plan renkleri, çerçeveler, yazı tipleri vb.) düzenleyebilirsiniz, destekleri paragrafta etkinleştirilebilir “ Sayfa Listesi Ayarları". Ancak, bu çok uygun değil. Bu nedenle, WP Page Navi için sözde bir eklenti eklentisi oluşturuldu. WP Sayfa Navi Stili. Kurduktan sonra, menüde düzenleme için gerekli tüm seçenekler görünecektir. görünüm düğmeler.


Birisi bu veya bu noktada net değilse, tüm sorular yorumlarda sorulabilir. Her zaman tüm soruları cevaplayacağız.

flektor 5

Güncellenmiş:

için en ünlü ve popüler eklentilerden biridir. WordPress. Sitede sayfalandırmayı kolayca ve basit bir şekilde görüntülemenizi sağlar. Sayfalandırmaya duyulan ihtiyaç şüphesizdir - ilk olarak, kullanıcılar için anlaşılmaz "Erken" ve "Sonra" bağlantılarından çok daha uygundur ve ikincisi, sayfalandırma SEO açısından yardımcı olur - arama motorları, bağlantılar varsa sayfaları çok daha iyi indeksler. üzerinde ana sayfa alan. Birkaç benzer eklenti var, ancak bunların en iyisi olarak kabul ediliyor. Aslında, sayfalandırma WordPress ve eklenti Sayfa Navigasyonu bunlar neredeyse ayrılmaz kavramlardır.

1 Arşivi paketinden çıkarın.

2 Klasörü şuraya kopyalayın: /wp-içeriği/eklentiler/.

3 sekmesindeki blog yönetici paneline gidin " Eklentiler ve eklentiyi etkinleştirin.

Eklenti tamamen Rusça'ya çevrilmiştir. Dahası, tercüman eklentinin adını bile çevirerek fazla abarttı (bu sağduyuya aykırı - özel isimleri kim tercüme ediyor?). Bu nedenle, eklentiyi etkinleştirirken, indirilen eklentiler arasında değil, ancak Sayfa Listesi. Ayarlarla aynı hikaye - bunları bulacaksınız " Ayarlar\Sayfa Listesi".

Eklenti ayarlarının ilk kısmı panelin kendisi ve değerleri ile ilgilidir:

Bunlar varsayılan değerlerdir. Panelin şu görünümüne benzer bir şey veriyorlar:

Herhangi bir alanı doldurmazsanız, panelde görüntülenmeyecektir. Bu nedenle paneli aşağıdaki gibi daha kompakt bir versiyona indirgeyebilirsiniz:

Ayarların ikinci kısmı eklentinin kendisiyle ilgilidir:

Burada birkaç açıklama yapmam gerekiyor. Seçenek " pagenavi-css.css stilini kullan" eklentiyi panel için dosyadan css stillerini uygulamaya zorlar pagenavi-css.css, eklenti klasöründe bulunur. Eklenti için stiller şablonunuzda zaten yazılıysa (ve bu çok popüler olduğu için sık sık olur), o zaman bu seçeneğin işaretini kaldırmanız gerekir. Sonuçta, kural olarak, temada belirtilen stiller daha iyi stiller varsayılan olarak eklenti.

Her yerde "0" değerini ayarlayarak aralıkları devre dışı bırakmanızı (varsayılan olarak etkindirler) öneririm. Çünkü ben şahsen bu navigasyonu sevmiyorum:

Ama elbette, karar vermek size kalmış.

Ayarlar tamamlandı - şablonda eklenti paneli nasıl görüntülenir? Şablon dosyalarında aşağıdakine benzer bir kod bulmanız gerekir:

Ve kodla değiştirin:

Bu aşamada birçok kullanıcının sorunları var. Çünkü her şablonda bu kod farklı olabilir. Şablondan şablona bu kodu aramanız gereken dosyalar bile çok farklı. Bu nedenle, Notepad ++ düzenleyicisini indirmenizi tavsiye ederim (dosyaların kesinlikle kodlamada kaydedilmesi gerektiğinden, yine de ihtiyacınız var). Malzeme Listesi olmadan UTF8) ve işlev dosyalarında arayın ve .

Bu şekilde, yazarının gezinme bağlantılarını görüntüleme işlevlerini şablonunuzda tam olarak nerede sakladığını bulacaksınız ve bunları eklenti panelini çağırma koduyla değiştirebilirsiniz. Kendiniz bulamadıysanız - yorumları yazın, yardımcı olacağım.

Şimdi panel stilleri hakkında konuşalım. Varsayılan panel görünümünü beğenmediniz mi? Bu makalenin başındaki ekran görüntüsündeki gibi bir panel ister misiniz? Ardından bu dosyayı açın ve içeriğini dosyaya kopyalayın. pagenavi-css.css, eklenti klasörünüzde bulunur.

Panelinizi şekillendirmenin daha da kolay bir yolu var. Bunu yapmak için, aşağıdaki gibi satır içi stilleri seçebileceğiniz bir eklenti yüklemeniz gerekir:

Ek bir eklenti yüklemek istemiyor musunuz? Bu durumda, stil koleksiyonlarımı aşağıdakiler için kullanabilirsiniz:

Herkese selam!

WordPress motorunda site navigasyonu üzerine makaleler yazmaya devam ediyorum.

Ve bu materyal Eklentiler olmadan ve iyi bilinen WP-PageNavi'yi kullanarak sayfalandırmanın nasıl yapıldığını göstereceğim. gibi, size en uygun olanı seçebilmeniz için uygulamayı birkaç şekilde göstereceğim. Evet ve bazı yöntemlerin birisi için çalışmadığı zamanlar vardır. Bu nedenle, bir miktar sigorta olacaktır.

Materyal çok hacimli ve belki de ağdaki en kapsamlı çıktı.

Sayfa gezintisi (sayfalandırma), bilgilerin sayfalara bölünmesidir. Wordpres'te çok sayıda site alırsanız, bu fenomen, duyurularla birlikte her sayfanın altındaki sayfa numaraları listesinin videosunda açıkça ifade edilir. blogumda verilen fonksiyon aşağıdaki forma sahiptir.

Tasarım değişebilir. Ancak özü aynıdır - bilgilerin sayfalara bölünmesi. Bildiğiniz gibi, varsayılan olarak, sitenin ana sayfası, girişlerin duyurularını görüntüler. belli bir miktar("Yazma" öğesindeki ayarlara bağlıdır).

Numaralarını kırmazsak, bir sayfada görüntülenecektir. Ve bu iyi değil, çünkü siteyi kullanmak elverişsiz olacak ve ana sayfanın yüklenmesi uzun zaman alacak çünkü zamanla çok sayıda duyuru olacak.

Kural olarak, şimdi modern şablonlar Wodpress sayfalandırma zaten yerleşiktir. Ama olmadığında bir seçenek var. O zaman uygulamak zorundasın. Bunun yerine, önceki ve sonraki girişlere bağlantılar şeklinde duyuruların sayfalandırılması olabilir. Bu, standart şablonlarda açıkça ifade edilmiştir.

Bu seçenek de sakıncalıdır çünkü 3 sayfa geriye gittiğimizde tek adımda orijinal sayfaya dönemeyeceğiz. Önceki girişlere veya sonraki girişlere 3 kez tıklamanız gerekecek. Sayfalandırma ise anı daha esnek bir şekilde yönetmenize olanak tanır.

Genel olarak, uygulamasına geçelim ve ilk adım onu ​​eklentisiz bir şablona gömmek. Bu method Bir video eğitiminde anladım. Önce izlemenizi, sonra incelemenizi tavsiye ederim. metin versiyonu Talimatlar.

Eklentisiz yapmak

Şimdi size tam olarak benimkiyle aynı WordPress sayfalandırmasına nasıl sahip olacağınızı göstereceğim. Her şey çok basit bir şekilde yapılır. Şablon dosyalarına yerleştirilmesi gereken 2 adet kod alacak ve ardından görünümü ayarlamak için stiller yazacaktır. Başlayalım!

İşte kodun ilk kısmı. Tasarım şablonunun functions.php dosyasına yerleştirilmelidir.

function wp_corenavi() ( global $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base "] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["toplam"] = $maks; $a["geçerli"] = $geçerli; $toplam = 0; //1 - "Sayfa N of N", 0 - gösterme $a["mid_size"] = 1; //geçerli olanın solunda ve sağında kaç tane bağlantı gösterilecek $a["end_size"] = 1; //başlangıçta ve sonda kaç tane bağlantı gösterilecek $a["prev_text"] = ""; //link text " Önceki sayfa" $a["next_text"] = ""; //metni bağla " Sonraki Sayfa" if ($max > 1) yankı "

"; }

function wp_corenavi()(

global $wp_query , $wp_rewrite ;

$sayfa = "" ;

$max = $wp_query -> max_num_pages;

if (! $current = get_query_var ("sayfalanmış")) $current = 1;

$a ["base"] = str_replace (999999999, "%#%", get_pagenum_link (999999999));

$a["toplam"] = $maks ;

$a [ "geçerli" ] = $geçerli ;

$toplam = 0 ; //1 - "Page N of N" metnini görüntüle, 0 - görüntüleme

$a [ "orta boy" ] = 1 ; //geçerli olanın solunda ve sağında kaç tane bağlantı gösterilecek

$a[ "end_size" ] = 1 ; //başta ve sonunda kaç tane bağlantı gösterilecek

$a["prev_text"] = "" ; // "Önceki sayfa" metnini bağla

$a [ "sonraki_metin" ] = "" ; // "Sonraki sayfa" metnini bağla

if ($max > 1 ) yankı "

" ;

Kodu, açılış etiketinden sonra dosyanın en başına yerleştirdim


Bu kodda bazı parametreleri ayarlayabiliriz:

  • Satır 10 - 0 değerini 1 olarak değiştirirseniz, sayfa numaralarının yanında formun bir yazısı görüntülenir, örneğin "Sayfa 3 / 45". Bu seçeneği yapabilirsiniz, ancak sayfa numaraları sitede kaç sayfa olduğunu zaten anladığından bu durumda buna gerek olmadığını düşünüyorum. Ve aktif sayfa farklı bir renkle vurgulanır;
  • Satır 11 ve 12 - belirli sayıda önceki veya sonraki numara, sırasıyla aktif sayfa numarasının solunda ve sağında görüntülenmelidir. Burada onların numarasını gösteriyoruz. Bu kodda değer 1'dir. 2 veya 3 koyabilirsiniz. Burada biraz deneme yapmanız gerekecek, çünkü sayı sayısı ne kadar büyükse, gezinme o kadar geniş olacaktır. Her şey şablonun genişliğine bağlıdır.

wp_corenavi();

Duyuru listesinin gösterildiği her yerde sayfalama gösterilmesi gerektiğinden, verilen kod gerçekleştiği tüm dosyalara yerleştirin:

  • Ana sayfa - index.php;
  • Kategori ve arşiv sayfaları - kategori.php ve arşiv.php;
  • Arama sayfası - search.php.

Bu arada, bazı şablonlarda kategori ve arşiv sayfalarının çıktısı tek bir dosyada gerçekleştirilebilir. Bundan arşivim.php dosyam sorumludur.

Şablonunuzda duyuruları sayfalara bölmek için herhangi bir navigasyon yoksa, içerik görüntülendikten sonra ikinci kodu yerleştiririz. Daha büyük olasılıkla önceki ve sonraki bağlantılarınız varsa, bunları yukarıda verilen kodla değiştirmeniz gerektiğinden, bu seçeneğin uygulanması daha kolaydır.

Kural olarak, standart navigasyon önceki ve sonraki şeklindedir. bağlantılar benzer bir kod kullanılarak görüntülenir.

< div class = "nav-previous" > ← Eski gönderiler", "yirmi on" ) ) ; ?>< / div >

< div class = "nav-next" > "En yeni paylaşımlar " , "yirmi on" ) ) ; ?>< / div >

Verilen her kod farklı olabilir, ancak ana dolgusu aynı olacaktır. next_posts_link ve önceki_posts_link adlı kodu içerecek kodu bulmanız gerekecek.

Bulduğunuzda, bu içeriği dosyadan silip yerine kopyalamaktan çekinmeyin. istenen kod Sayfalandırmayı gösteren A.


Bu nedenle, duyuru çıktılarının olduğu tüm dosyalarda standart navigasyonu sayfalandırma ile değiştirmeniz gerekir. Yukarıda dosyaların isimlerini verdim.

Bu arada, bu işlemle ilgili sorunlarınız varsa, yorumlarda yardım için benimle iletişime geçebilirsiniz. yardım etmeye çalışacağım.

/* NAVİGASYON */.navigasyon ( kayan nokta: sol; genişlik: otomatik; sol kenar boşluğu: 216 piksel; kenar boşluğu: -2 piksel; yazı tipi boyutu: 16 piksel; ) .navigasyon > a ( kayan nokta: sol; genişlik: 32 piksel; yazı tipi -ağırlık: 700; metin hizalama: merkez; renk: #637b93; metin dekorasyonu: yok; sol kenar boşluğu: 1 piksel; üst dolgu: 7 piksel; ) .navigasyon > .current ( kayan nokta: sol; yazı tipi ağırlığı: 700 ; genişlik: 29 piksel; metin hizalama: merkez; renk: #c4c8cc; sol kenar boşluğu: 5 piksel; dolgu üst: 7 piksel; ) .navigasyon > .prev ( kayan nokta: sol; genişlik: 32 piksel; yükseklik: 34 piksel; arka plan: url ("images/bow_left.png") tekrarsız; kenar-sol: 0; ) .navigation > .next ( kayan nokta: sol; genişlik: 34 piksel; yükseklik: 34 piksel; arka plan: url("images/bow_right.png") tekrar yok; kenar boşluğu: 14 piksel; ) .navigasyon > .noktalar ( kayan nokta: sol; yazı tipi boyutu: 14 piksel; yazı tipi ağırlığı: 700; genişlik: 32 piksel; metin hizalama: merkez; renk: #c4c8cc; dolgu- üst: 7 piksel; )

/* NAVİGASYON */

navigasyon (

yüzer : sol ;

genişlik : otomatik

sol kenar boşluğu : 216 piksel ;

üst kenar boşluğu : -2 piksel ;

yazı tipi boyutu : 16 piksel ;

Navigasyon > a (

yüzer : sol ;

genişlik : 32 piksel

yazı tipi ağırlığı : 700 ;

metin hizalama : merkez ;

renk : #637b93 ;

metin-dekorasyon: yok

sol kenar boşluğu : 1 piksel ;

üst dolgu : 7px ;

Navigasyon > .current(

yüzer : sol ;

yazı tipi ağırlığı : 700 ;

genişlik: 29 piksel

metin hizalama : merkez ;

renk : #c4c8cc ;

sol kenar boşluğu : 5 piksel ;

üst dolgu : 7px ;

Gezinme > .prev(

yüzer : sol ;

genişlik : 32 piksel

yükseklik : 34 piksel ;

arka plan : url ("images/bow_left.png") tekrarsız;

sol kenar boşluğu : 0

Gezinme > .sonraki(

yüzer : sol ;

genişlik: 34 piksel

yükseklik : 34 piksel ;

arkaplan : url ("images/bow_right.png") tekrarsız;

sol kenar boşluğu : 14 piksel ;

Gezinme > .noktalar (

yüzer : sol ;

yazı tipi boyutu : 14 piksel ;

yazı tipi ağırlığı : 700 ;

genişlik : 32 piksel

metin hizalama : merkez ;

renk : #c4c8cc ;

üst dolgu : 7px ;

Ayrıca, tasarım şablonunun resimler klasöründeki barındırmaya ileri ve geri okların resimlerini yüklemeniz gerekir. . İndirmek için standardı kullanabilirsiniz. dosya yöneticisi barındırma sağlayıcısı. Yaparım.

Kodları function.php dosyalarına, duyuruların olduğu sayfaları gösteren ve stilleri yazan tüm dosyalara yerleştirdiğimizde, navigasyonun işlevselliğini kontrol edebiliriz. Her şey benim için çalışıyor ve standart şablon aşağıdaki forma sahiptir.

Eklenti olmadan yöntemi analiz ettik. %100 eminim, her şey yukarıda anlatıldığı gibi yapılırsa, o zaman her şey sizin için bir patlama ile çalışacaktır. Eklentisiz ikinci bir seçenek de vardı, ancak inceledikten sonra, bunun aslında aynı seçenek olduğunu, sadece biraz değiştirilmiş olduğunu fark ettim. Bu nedenle, bir eklenti kullanarak sayfalandırmayı uygulamanın bir yoluna geçiyorum.

WP-PageNavi Eklentisi

Başlamak için eklentiyi şuradan indirin: resmi sayfa ve sitenize yükleyin.

Eklentiyi kurduktan sonra, navigasyonu gösterecek kodu da sayfanın en altına yerleştirmeniz gerekecek.

Artık eklenti görevini yerine getirecek ve sayfa numaraları aşağıdaki tasarıma sahip olacaktır.

Bir yandan tasarım çok sıcak değil, diğer yandan gözleri incitmediği için hiçbir şey bile değil. Kullanıcılar sadeliği sever! Bu nedenle, her şeyi olduğu gibi bırakabilirsiniz. Daha renkli bir şey istiyorsanız, şimdi bazı seçenekleri ele alacağız. Bu arada wp pagenavi kurulumu gibi bir şeyden bahsedeceğiz. Ayarlar var ve onlar hakkında konuşmaya değer.

"Sayfa listesi şablonları" ayarlarının ilk öğesiyle ilgili olarak, içinde hiçbir şeyin değiştirilmesi gerekmez. biz memnunuz. "Sayfa Listesi Ayarları"na geçiyoruz.

Bulmak için bu paragraftaki tüm parametrelerle denemeniz gerektiğini unutmayın. optimal değer kendim için. Her parametrenin neden sorumlu olduğunu kısaca açıklayacağım.

  • Stil kullan - "Hayır" olarak ayarlanırsa eklenti stilleri kaldırılır ve sayfa numaraları biçimlendirilmez;

  • Sayfa Listesi Stili - Hariç normal liste sayfa numaralarından bir açılır liste seçeneği seçebiliriz;

  • Listeyi her zaman göster sayfalar - ayar dahil etmeyin. Listenin yalnızca gerekli olduğu yerde görüntülenmesi gerekir;
  • Gösterilecek sayfa sayısı - listenin başında görüntülenen sayfa numaralarının sayısından sorumludur. Varsayılan olarak değer 5'tir ve yukarıdaki ekran görüntülerinde tam olarak 5 sayfanın görüntülendiğini görebilirsiniz;
  • Gösterilecek sayfa aralığı - sitenizde çok sayıda sayfa varsa, bu özellik son derece yararlı olacaktır. Ana listeden sonra 10, 20, 30, 40 vb. değerlerle sayfa numaralarını çıkaracaktır. Bu değerler arasındaki aralık aşağıdaki parametre ile belirlenir;
  • Sayfa aralıkları katsayısı - değeri 5 olarak ayarlarsanız, sayfa aralığı - 10, 15, 20, 25, vb. gibi görünecektir. 10 ise, 10, 20, 30, 40 vb. 10 değeri yeterlidir.

Bunlar, ihtiyaçlarınıza göre ayarlamanız gereken tüm ayarlardır. Burada herkes kendine göre ayarlayacaktır.

En kolay seçenek, önceden hazırlanmış stiller içeren ve ayrıca her parametreyi ayrı ayrı yapılandırmanıza izin veren ek bir eklenti yüklemektir. Eklenti denir.

içine kurduktan sonra WordPress yönetici panelleri yeni bir öğe görünür.

Geçiş yaptıktan sonra, mevcut tasarım boşluklarını hemen seçebiliriz.


Stilleri ayrı ayrı özelleştirmek istiyorsak, "Stil Sayfası Seç" ayarlarının ilk öğesinde "Özel" seçeneğini seçin ve tüm öğelerin parametrelerini (kenarlıklar ve renkleri, yazı tipi renkleri ve boyutları, üzerine gelindiğinde bağlantı renkleri) yapılandırın fare üzerinde vb.).


Tüm parametreleri sizin için çevireceğim.

  • Başlık Rengi - metin rengi "Sayfa 3 / 45";
  • arka plan rengi- arka plan rengi;
  • Etkin/Geçerli Arka Plan rengi - etkin sayfa numarasının arka plan rengi;
  • Yazı Tipi Boyutu - yazı tipi boyutu;
  • Bağlantı Rengi - bağlantı rengi;
  • Link Mouse Hover/ Active Hover - fareyi numaranın üzerine getirdiğinizde ve numara aktif olduğunda bağlantının rengi;
  • Bağlantı sınır rengi- sınır rengi;
  • Bağlantı Kenarlığı Fare Vurgusu/Etkin Renk - farenin üzerine gelindiğinde ve sayı etkin olduğunda kenarlığın rengi;
  • Navigasyonu Hizala - navigasyon konumu (sol, sağ, orta).

Renk anlamlarını İnternette veya Photoshop seçtiğinizde istenilen renk doldurmak için.


Eklenti seçeneği fena değil ama her zaman gereksiz eklentilerden kurtulmanız gerektiğini söylüyorum ve bu durumda öyle oluyor.

İkinci seçenek, hosting - pagenavi-css.css'de Wp-pagenavi eklentisinin bulunduğu klasörde bulunan stil dosyasını düzenleyerek gerçekleştirilir.

Bu dosya, eklenti ayarlarında "pagenavi-css.css stilini kullan" ayarı etkin olduğunda dahil edilir. Bu nedenle, onu düzenlersek, eklentiyi güncelledikten sonra tüm stiller standart olanlarla değiştirilecektir. Her seferinde değiştirmek için verilen dosya ve yeniden stil vermemek için aşağıdaki şeyi yapmanızı öneririm:

  1. Sayfalandırmaya istediğiniz tasarımı vererek bu dosyadaki stilleri kendinize göre düzenleyin;
  2. "pagenavi-css.css stilini kullan" ayarını devre dışı bırakın;
  3. Bu stilleri, stil.css tasarım şablonunun ana stil sayfasına yerleştirin.

Bu şekilde, bu stiller eklentiden bağımsız olarak çalışacaktır. Ve güncelleme yaptığınızda, yoldan çıkmayacaklar. Bu belki de en en iyi yol bu eklentide navigasyon tasarımı, ben de yapardım. Ama neyse ki eklentisiz seçeneği kullanıyorum, bu da size tavsiyem.

Bu yüzden arkadaşlar. Malzeme benim için çok iyi olacak. Bunun hakkında ne düşünüyorsun? Umarım hepiniz yapmışsınızdır. Bir şey işe yaramazsa, yorumlarda yardımcı olmaya çalışacağım. Yaz, korkma! Ben de bir zamanlar çok acı çektim ve bunu çözmeyi başardım.

Bu notta, çok fazla güç aldığı için bu yazıyı mümkün olan en kısa sürede bitirmek istiyorum. Yapacağım şey bu. Veda edip dinlenmeye gideceğim ve ardından kendimi yeni içerikler yazmaya gömeceğim.

Saygılarımla, Konstantin Khmelev!

İyi günler, sevgili arkadaşlar! Bugün sizlerle nasıl böyle güzel ve kullanışlı şey nasıl sayfa gezinme WP-PageNavi eklentisini kullanarak veya basit kod. Sizi bilmem ama ben şahsen WordPress motorundaki yerleşik navigasyonu hiç sevmiyorum.

Bu nasıl bir navigasyon? Tamam, eğer blog hala genç olsaydı ve üzerinde çok fazla makale olmazdı, ama ya zaten 200-300'den fazla varsa? Bu durumda, bunun gibi gezinme, okuyucularınızın çoğunu kolayca korkutabilir, çünkü hiç kimse nabzını kaybedene kadar "önceki gönderi" düğmesine tıklamak istemez. doğru malzeme. Ek olarak, bu yazıt o kadar belirsiz görünüyor ki, basitçe görülmeyebilir, bu da sonuçta ziyaretçi başına sayfa görüntülemelerinde ve sitede harcanan sürede bir azalmaya yol açacaktır ve bu artık herhangi bir sitenin tanıtımında çok fazla yer almaktadır. Yoksayılamaz. Dolayısıyla yine de sayfalandırma yapacaksanız aşağıda sunulan yöntemlerden herhangi birini kullanabilirsiniz.

WP-PageNavi eklentisini kullanarak WordPress için sayfa gezinme.

Yöntem 1. WP-PageNavi eklentisini buradan indirin ve bloga yükleyin, etkinleştirin, blog yöneticisinde "ayarlar" "sayfa listesi"ne gidin. Burada yalnızca bir parametreyi yapılandırmamız gerekiyor - "gösterilecek sayfa sayısı". Navigasyonun ziyaretçilere çok görünür olmasını sağlamak için kişisel olarak 10'u ayarladım. Bu arada, sayfalandırmanız birdenbire temanızın şablonuna uymuyorsa, yani şuna benziyorsa:

o zaman bu sayıyı basitçe azaltabilir veya daha da iyisi, eklenti ayarlarından “sayfa” yazısını kaldırabilir ve bunları oklarla değiştirebilirsiniz. Tamam, bundan sonra kaydet'e tıklıyoruz ve blogda nasıl basit bir sayfalandırma yaptığımızı gözlemliyoruz. Bu olmazsa, “görünüm” “düzenleyicisine” gidin, ana şablon dosyasını (index.php) açın ve şu koda benzer bir şey arayın: veya bunun gibi bir şey ve bunu şu şekilde değiştirin: , kaydı kaydedin.

Bu gezintinin sadece ana sayfada değil ayrı başlıklarda ve arama yaparken de olmasını istiyorsanız aynı işlemiarcharchive.php ve search.php dosyaları ile yapıyoruz. Güzel, bu eklentinin herkes için çalışmadığı konusunda sizi her itfaiyeci için uyarmak istiyorum, bu yüzden sizin için hiçbir şey işe yaramadıysa, kendinize benzer bir eklenti yükleyebilirsiniz WP-Page Numbers. Eğer yüklerseniz, ayrıca eklemeniz gerekecektir. özel kod aynı dosyalarda.

Sayfa gezinme eklentisi WP-PageNavi ve WP-Page Numbers için güzel stil.

Muhtemelen sayfalandırmamın sizinkinden çok daha iyi ve çekici göründüğünü fark etmişsinizdir. Bunun nedeni, ek bir WP-Page Numbers stili eklentisine sahip olmam. , hem WP-PageNavi hem de WP-Page Numbers için çalışır. Birdenbire benim gibi kodlar içindeyseniz, tabiri caizse, bir profesyonel değil, eklenti dosyalarındaki tasarımı kendiniz yazmak için, o zaman bu eklentiyi kendiniz yükleyebilirsiniz. Yükledikten sonra yöneticinizde göreceksiniz yeni sekme Sayfa Navi Stili. İçinde sayfalandırma tasarımınız için herhangi bir stil seçebilirsiniz.

Toplamda, eklenti, mevcut tüm renklere sahip 20 tür stile sahiptir. Ayrıca, listeden aniden hiçbir şeyi beğenmezseniz, Stil Sayfası Seç sekmesinde ayarları “Mevcut Stiller” den “Özel” olarak değiştirebilirsiniz, önünüzde ayarları belirtebileceğiniz bir düzenleyici görünecektir. İhtiyacınız olan renkler, vb. Eğer öyleyse, işte onların çevirisi:

Başlık Rengi - başlık rengi.

Arka Plan Rengi - arka plan rengi.

Etkin/Geçerli Arka Plan Rengi- fare imleci ile üzerine gelindiğinde düğmenin rengi.

Yazı Tipi Boyutu - yazı tipi boyutu.

Bağlantı Fare Vurgusu / Etkin Renk- fare imleci ile üzerine gelindiğinde bağlantının rengi.

Bağlantı Kenarlığı Rengi - sayfa numarası düğme kenarlığının rengi.

Bağlantı Kenarlığı Fare Üzerine Gelme/Aktif Renk- fare imlecini gezdirirken kenarlığın rengi.

Gezinmeyi Hizala - sayfada hizalama: orta, sol veya sağ.

WP-PageNavi eklentisi olmadan sayfa gezintisi nasıl yapılır?

ve işlevselliğini geliştirmek için bir sonrakini koymaktan hoşlananlardan biri değilseniz, o zaman bir geçici çözüm alabilirsiniz - sadece çıkacak kodu yükleyin bu navigasyon ama ondan önce, her ihtimale karşı.

Yöntem 2.“Görünüm” “düzenleyicisine” gidin ve tema işlev dosyasını (functions.php) açın ve etiketin en sonunda?>

function wp_corenavi()(

$sayfa = "";
$max = $wp_query->max_num_pages;


$a["toplam"] = $maks;
$a["geçerli"] = $geçerli;
$toplam = 1; //1 - "Page N of N" metnini görüntüle, 0 - görüntüleme
$a["mid_size"] = 3; //geçerli olanın solunda ve sağında kaç tane bağlantı gösterilecek
$a["end_size"] = 1; //başta ve sonunda kaç tane bağlantı gösterilecek
$a["prev_text"] = """; // "Önceki sayfa" metnini bağla
$a["next_text"] = """; // "Sonraki sayfa" metnini bağla
if ($max > 1) yankı "

";
if ($toplam == 1 && $maks > 1) $sayfalar = ""."\r\n";

if ($max > 1) yankı "
";
}

Bu arada, kodda Rusça bazı açıklamalar var, böylece ihtiyacınız olursa sayılarla biraz oynayabilirsiniz. Şimdi, WP-PageNavi eklentisinde olduğu gibi, dosyalara giriyoruz: function.php, index.php ve arşiv.php orada satırı buluyoruz ve ondan sonra veya birkaç satır daha, kodu ekleyin

Yöntem 3. Bu yöntem ikincisine benzer, ancak kod biraz farklıdır. Tema fonksiyon dosyasında (functions.php) en sonunda ?> etiketinden önce, aşağıdaki kodu girin ve girişi kaydedin.

işlev navigasyonu()(
global $wp_query, $wp_rewrite;
$sayfa = "";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var ("sayfalanmış")) $current = 1;
$a["base"] = str_replace(999999999, "%#%", get_pagenum_link(999999999));
$a["toplam"] = $maks;
$a["geçerli"] = $geçerli;
$toplam = 0; //1 - "Page N of N" metnini görüntüle, 0 - görüntüleme
$a["mid_size"] = 2; //geçerli olanın solunda ve sağında kaç tane bağlantı gösterilecek
$a["end_size"] = 5; //başta ve sonunda kaç tane bağlantı gösterilecek
$a["prev_text"] = "" Önceki "; // "Önceki sayfa" metnini bağla
$a["next_text"] = "Sonraki »"; // "Sonraki sayfa" metnini bağla
if ($max > 1) yankı "

";
if ($toplam = 1 && $maks > 1) $sayfalar = " Sayfanın " . $geçerli . " sayfası " . $max . ""."\r\n";
yankı $sayfa . paginate_links($a);
if ($max > 1) yankı "
";
}

. Şimdi stil sayfası dosyasına (style.css) gidiyoruz ve bu stil kodunu, dosya kodlarının bir nokta ile başladığı bir yere yapıştırıyoruz ve kaydı kaydediyoruz.

.navigator(marj:10px 7px;
arka plan:#fff;
kenarlık:1px düz #aaa;
dolgu:15 piksel;
taşma:gizli;
yazı tipi boyutu:13 piksel;
renk:#000;)

.navigator a(arka plan: #fff;
kenarlık: 1 piksel katı #DDDDDD;
renk: #000000;
yazı tipi boyutu: 13 piksel;
dolgu: 10 piksel
metin-dekorasyon: yok;)


arka plan:#f1f8f9;
kenarlık: 1 piksel düz #C6D2D4;)

.navigator a:hover(arka plan: #fff;
kenarlık: 1 piksel düz #111;
renk: #0000cc;
yazı tipi boyutu: 13 piksel;
dolgu: 10 piksel
metin-dekorasyon: yok;)

.navigator span.pages (dolgu: 3px 5px;
arka plan:#f1f8f9;
kenarlık: 1 piksel düz #C6D2D4;)

.navigator span.current(arka plan: #fff;
kenarlık: 1 piksel düz #111;
renk: #0000cc;
yazı tipi boyutu: 15 piksel;
dolgu: 10 piksel
metin-dekorasyon: yok;)

.navigator span.extend(dolgu: 3px 5px;
arka plan:#f1f8f9;
kenarlık: 1 piksel düz #C6D2D4;)

.str(arka plan: #fff;
kenarlık: 1 piksel katı #DDDDDD;
renk: #000000;
yazı tipi boyutu: 13 piksel;
dolgu: 10 piksel
metin-dekorasyon: yok;)

Yöntem 4. Tema fonksiyon dosyasında (functions.php) en sonunda ?> etiketinden önce, aşağıdaki kodu girin ve girişi kaydedin.

my_pagenavi işlevi ($sayfalar = "", $aralık = 2)
{
$showitems = ($aralık * 2)+1;

küresel $sayfalanmış;
if (boş ($ disk belleği)) $ disk belleği = 1;

if ($sayfalar == "")
{
küresel $wp_query;
$pages = $wp_query->max_num_pages;
if (!$sayfalar)
{
$sayfa = 1;
}
}

if (1 != $sayfa)
{
Eko "

»;
}
}

Dosyalarda: function.php, index.php ve arşiv.php oradaki satırı buluyoruz ve ondan sonra veya birkaç satır daha kodu ekleyin . Şimdi stil sayfası dosyasına (style.css) gidin ve önceki örnekte olduğu gibi bu kodu yapıştırın ve girişi kaydedin.

.sayfalandırma(
ikisini de temizle;
yazı tipi boyutu: 12 piksel;
üst kenar boşluğu: 10 piksel;
metin hizalama: merkez;
}

.pagination yayılma alanı, .pagination a (
metin-dekorasyon: yok;
kenarlık: 1 piksel katı #BFBFBF;
dolgu: 3px 5px;
kenar boşluğu: 2 piksel
}

.pagination a:hover(
kenarlık rengi: #000;
}
.pagination .current(
yazı tipi ağırlığı: kalın;
}

Yöntem 5. Bu dosyayı indirin, içindeki kodu alın ve en sondaki ?> etiketinin önüne (functions.php) yapıştırın ve kaydı kaydedin. Herhangi bir şey olursa, kod gönderilemeyecek kadar büyük olduğu için rahatsızlıktan dolayı şimdiden özür dilerim. Şimdi dosyalarda: function.php, index.php ve arşiv.php oradaki satırı buluyoruz ve ondan sonra veya birkaç satır daha kodu ekleyin

Herhangi bir şey olursa, tüm kodlar çalışabilirlik açısından test edilmiştir, bu nedenle örneklerden biri yine de sizin için çalışmalıdır. Hepsi bu, iyi şanslar.