Neler yeni

Hoşgeldin Ziyaretçi

Kayıt olarak forumumuzdan dosya indirebilir,bilgi sahibi olabilir,daha iyi bir şekilde yararlanabilirsin.

Şimdi kayıt ol

WordPress Temanıza Sayısal Sayfalandırma Nasıl Eklenir?

wordpresstr

W
Administrator
125
13 Kas 2020
Bu yazıda, WordPress temanıza nasıl sayısal sayfalandırma 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 gezintisi ve Sayısal Sayfalandırma arasındaki fark


WordPress temanıza sayısal sayfalandırma eklemenin iki yöntemi vardır. İlk yöntem, üçüncü taraf bir eklentiye güvenmeden manuel olarak sayısal sayfalandırma eklemektir. Bu makale tema kategorisinde olduğundan ve yeni tema tasarımcılarına yönelik olduğundan, önce manuel yöntemi göstereceğiz. İkinci yöntem, sayısal sayfalandırma eklemek için mevcut bir üçüncü taraf eklentisini kullanmaktır. Bu yöntemi tüm DIY kullanıcılarımız için tavsiye ederiz.

WordPress Temalarınıza Manuel Olarak Sayısal Sayfalandırma Ekleme

İlk olarak, WordPress temalarınıza manuel olarak nasıl sayısal sayfalandırma ekleyeceğinizi göstereceğiz. Bu, ileri düzey kullanıcılarımıza ve tema geliştirmeyi öğrenen veya bunu üçüncü taraf bir eklentiye güvenmeden yapmak isteyen kullanıcılara fayda sağlayacaktır. Temanızın functions.phpdosyasına aşağıdaki kodu ekleyerek başlayalım .

Genesis kullanıyorsanız, bu koda veya eklentiye ihtiyacınız yoktur.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68		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 <= 1 )
return;

$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
$max = intval( $wp_query->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 ) <= $max ) {
$links[] = $paged + 2;
$links[] = $paged + 1;
}

echo '<div class="navigation"><ul>' . "\n";

/** Previous Post Link */
if ( get_previous_posts_link() )
printf( '<li>%s</li>' . "\n", get_previous_posts_link() );

/** Link to first page, plus ellipses if necessary */
if ( ! in_array( 1, $links ) ) {
$class = 1 == $paged ? ' class="active"' : '';

printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

if ( ! in_array( 2, $links ) )
echo '<li>…</li>';
}

/** Link to current page, plus 2 pages in either direction if necessary */
sort( $links );
foreach ( (array) $links as $link ) {
$class = $paged == $link ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $link ) ), $link );
}

/** Link to last page, plus ellipses if necessary */
if ( ! in_array( $max, $links ) ) {
if ( ! in_array( $max - 1, $links ) )
echo '<li>…</li>' . "\n";

$class = $paged == $max ? ' class="active"' : '';
printf( '<li%s><a href="%s">%s</a></li>' . "\n", $class, esc_url( get_pagenum_link( $max ) ), $max );
}

/** Next Post Link */
if ( get_next_posts_link() )
printf( '<li>%s</li>' . "\n", get_next_posts_link() );

echo '</ul></div>' . "\n";

}

Bu kodun yaptığı, sayfa sayısını alması ve numaralı bağlantıların madde işaretli bir listesini hazırlamasıdır. Bunu şablonlarınıza eklemek için aşağıdaki şablon etiketini temanızın index.php, archive.php, category.php ve diğer arşiv sayfası şablonlarına eklemeniz gerekir.

1<?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 blok şeklinde görünmesini istiyoruz. Bunu başarmak için devam edip temanızın style.css dosyasına aşağıdakileri ekleyelim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27		.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;
}
 
Cevap yazmak için giriş yap yada kayıt ol.
Üst