WordPress mövzusunda nömrə paginasiyasını necə əlavə etmək olar

Bu yaxınlarda oxucularımızdan biri WPBeginner blog səhifəsində ədədi paginasiyanı necə əlavə etdiyimizi soruşdu. WordPress standart temaları və bir çox digər mövzular, WordPress arxiv səhifələrinin altındakı köhnə yazıları və daha yeni yazıları əlavə etməklə paginasiya əlaqələrini göstərir. Bununla birlikdə, WPBeginner kimi, nömrə paginasiyasından istifadə edən bir çox WordPress saytı var. Təcrübəmizdə nömrə etiketi istifadə etmək asandır, cəlbedici və SEO. Yaradılış kimi daha inkişaf etmiş WordPress tema çərçivələri, nömrə səhifələşdirmə əlavə etmək üçün daxili funksionallıqla gəlir. Bu yazıda WordPress mövzusunda nömrə paginasyonunu necə əlavə edəcəyinizi sizə göstərəcəyik. Məqsəd, arxiv səhifələrinin altındakı standart köhnə və daha yeni səhifələmə bağlantılarını asanlıqla naviqasiya olunan səhifə nömrələri ilə əvəz etməkdir.

WordPress standart naviqasiya və nömrə paginasiyası arasındakı fərq

WordPress mövzusuna nömrə etiketini əlavə etməyin iki üsulu var. Birinci üsul, üçüncü tərəf plagininə güvənmədən nömrəli əl etiketini əl ilə əlavə etməkdir. Bu məqalə mövzu kateqoriyasındadır və yeni mövzu dizaynerləri üçün nəzərdə tutulduğundan, əvvəlcə əl metodunu göstərəcəyik. İkinci üsul, nömrə paginasyonu əlavə etmək üçün mövcud üçüncü tərəf plaginindən istifadə etməkdir. Bu metodu DIY istifadəçilərimizin hamısına tövsiyə edirik.

Əllə WordPress mövzularınıza nömrə etiketi əlavə edin

Birincisi, WordPress mövzularınıza nömrə etiketini əl ilə necə əlavə edəcəyinizi sizə göstərəcəyik. Mövzunun inkişafını öyrənən və ya üçüncü tərəf plagininə güvənmədən bunu etmək istəyən güc istifadəçilərimizə və istifadəçilərimizə fayda verəcəkdir. Temanın funksiyaları.php faylına aşağıdakı kodu əlavə etməklə başlayaq.

Qeyd: Bu kod saytımızda istifadə etdiyimiz Yaradılış Çərçivəsindən əldə edilmişdir. Yaradılışdan istifadə edirsinizsə, bu koda və ya plaginə ehtiyacınız yoxdur.

function wpbeginner_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) 
    ‘. “n”;

    / ** Əvvəlki Yazı Bağlantısı * /
    əgər (get_prevy_posts_link ())
    printf (‘

  • % s
  • ‘. “n”, get_prevy_posts_link ());

    / ** Birinci səhifəyə bağlantı, lazım olduqda ellips də əlavə et * /
    əgər (! in_array ( 1, $ bağlantılar)) {
    $ sinif = 1 == $ səhiyyə mi? ‘class = “aktiv”‘: ”;

    printf (‘

  • % s
  • ‘. “n”, $ sinif, esc_url (get_pagenum_link ( 1 )), ‘1’);

    əgər (! in_array ( 2, $ bağlantılar))
    atdı ‘

  • ‘;
    }

    / ** Cari səhifəyə əlavə edin 2 lazım olduqda hər iki istiqamətdəki səhifələr * /
    sort ($ bağlantılar);
    precach ((array) $ bağlantıları $ link kimi) {
    $ class = $ paged == $ link? ‘class = “aktiv”‘: ”;
    printf (‘

  • % s
  • ‘. “n”, $ sinif, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Son səhifəyə bağlantı və lazım olduqda elips əlavə edin * /
    əgər (! in_array ($ max, $ links)) {
    əgər (! in_array (maksimum $ – 1, $ bağlantılar))
    atdı ‘

  • ‘. “n”;

    $ class = $ paged == $ max? ‘class = “aktiv”‘: ”;
    printf (‘

  • % s
  • ‘. “n”, $ sinif, esc_url (get_pagenum_link ($ max)), $ max);
    }

    / ** Next Post Link * /
    əgər (get_next_posts_link ())
    printf (‘

  • % s
  • ‘. “n”, get_next_posts_link ());

    atdı ‘

‘. “n”;

}

WPBeginner-də arxiv səhifələrimizdə (məsələn, blogumuzda və ya WordPress tutorial kateqoriyalı səhifəmizdə) nömrələşdirmə üçün eyni koddan istifadə edirik. Bu kodun nə etməsi, səhifələrin sayını alması və nömrələnmiş bağlantıların bülletenli siyahısını hazırlamasıdır. Bunu şablonlarınıza əlavə etmək üçün aşağıdakı şablon etiketini index.php, архив.php, category.php və mövzu üçün hər hansı digər arxiv səhifəsi şablonlarına əlavə etməlisiniz.

	

İndi nömrəli səhifələrimizin siyahısına sahib olduğumuz üçün bu siyahını tərtib etməliyik. Siyahısı aktiv səhifənin fərqli bir rəng rəngi ilə vurğulandığı inley blokda görünməsini istəyirik. Bunu etmək üçün, davam edək və temanın style.css faylına aşağıdakıları əlavə edək:

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

Oraya gedirsən. Mövzumuzda əla görünən ədədi etiket siyahısımız var.

Bir əlavəsiz WordPress mövzularına əl etiketi əlavə edin

WP-PageNavi istifadə edərək WordPress-də rəqəmsal səhifə əlavə edin

İndi WP-PageNavi adlı mövcud bir plagindən istifadə edərək WordPress mövzusunda nömrə paginasiyasının necə əlavə olunacağına nəzər salaq. Ediləcək ilk şey WP-PageNavi plaginini quraşdırmaq və aktivləşdirməkdir. Plugini aktivləşdirdikdən sonra gedin Parametrlər »SəhifəNavi plugin parametrlərini konfiqurasiya etmək.

WP-PageNavi parametrlərini konfiqurasiya edin

Plugin parametrləri səhifəsində, istəsəniz, standart mətn və nömrə etiketləmə parametrlərini özünüzlə əvəz edə bilərsiniz. Bununla birlikdə, standart parametrlər əksər saytlarda işləməlidir.

Növbəti addımda WordPress mövzusunda şablon etiketi əlavə etməlisiniz. Tema qovluğunuza gedin və arxiv səhifənizdəki şablonlarınızdakı ən köhnə və ən yeni səhifələmə xətlərini tapın: index.php, архив.php və başqa hər hansı bir arxiv şablonu faylları. Əvvəlki yazıları əvvəlki_posts_link və next_posts_link əvəz etmək üçün aşağıdakı şablon etiketini əlavə edin.


Wp_pagenavi parçasını əlavə etdikdən sonra nömrə etiketinin görünməsi budur:

Wp-pagenavi nömrəli paginasyonun standart görünüşü

Wp-pagenavi-də rənglərin görünüşünü və nömrə paginasyon tərzini dəyişdirmək istəyirsinizsə, getmək lazımdır Parametrlər »SəhifəNavi. Pagenavi-css.css istifadə edin və dəyişiklikləri qeyd edin. İndi gedin Plugins »redaktoru. Bəri Redaktə etmək üçün plugin seçin açılan menyu seçin WP-SəhifəNavi və vurun Seçin düyməsini basın. Redaktor, plugin fayllarını sağ çubuğa yükləyəcəkdir. Redaktorda açmaq üçün pagenavi-css.css düyməsini vurun və sonra sənədin məzmununu kopyalayın.

Pagenavi-css faylının məzmununu kopyalayın

Sonra getməlisiniz Görünüş »redaktoru və pagenavi-css.css məzmununu temanın stil.css faylına yapışdırın. Artıq rəng sxemini və üslubunu buradan dəyişə bilərsiniz. Plugin css məzmununu mövzu üslub cədvəlinə kopyalamağımızın səbəbi, plagini yeniləməyinizdə stil dəyişikliklərini itirməməkdir. Burada nömrə etiketinin bir az dəyişdirilmiş versiyasıdır, istifadə etməkdən və mövzuya dəyişməkdən çekinmeyin.

.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF;
	text-decoration: none;
	background-color:#6FB7E9; 
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;
	background-color:#6FB7E9;
}

.wp-pagenavi span.current {
	font-weight: bold;
	background-color:#3C8DC5;
}

Göründüyü budur:

PageNavi xüsusi CSS

Həmişə olduğu kimi, CSS ilə sınaq keçirməlisiniz. Məqsəd, veb səhifənizin rəng görünüşünə uyğun nömrə ilə uyğunlaşması olmalıdır ki, yaxşı qarışsın və qəribə bir yerləşdirilmiş bir şey kimi görünməsin.

Ümid edirik ki, bu məqalə WordPress mövzusunda nömrənizi əlavə etmək və göstərməyə kömək etdi. Hansı metoddan istifadə etməyi üstün tutursunuz? Rəqəmsal paginasiyanı sevirsən və ya əvvəlki əvvəlki / sonrakı naviqasiyanı üstün tutursan? Aşağıdakı şərhlərdə bizə bildirin.