Cara Menambah Penomboran Pada Tema WordPress Anda


Jika anda ingin menambah sokongan penomboran pada tema WordPress anda dengan nombor yang menarik dan bukannya siaran lalai seterusnya & sebelumnya, anda boleh berbuat demikian menggunakan pemalam PageNavi yang terkenal, namun, saya lebih suka menambahkan penomboran secara manualĀ pada tema saya supaya orang ramai tidak perlu pergi mencari pemalam. Ia juga membantu memastikan tapak lebih pantas tanpa semua skrip luaran dan CSS.

Nasib baik terdapat fungsi hebat dalam wordpress yang dipanggil "paginate_links" yang telah ditambah dalam WordPress 2.1 dan akan membolehkan anda membuat navigasi gaya berhalakan halaman untuk sebarang pertanyaan di tapak anda. Berikut ialah tutorial pantas untuk menambahkan navigasi halaman mudah pada tema anda yang kelihatan seperti penomboran dalam Total WordPressTheme saya.

Penomboran PHP

Cuma tambahkan kod berikut pada penghujung fail functions.php anda (atauĀ apa-apa sahaja fail dalam tema anda di mana anda ingin menyimpannya).

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 999999999; // need an unlikely integer
		if( $total > 1 )  {
			 if( !$current_page = get_query_var('paged') )
				 $current_page = 1;
			 if( get_option('permalink_structure') ) {
				 $format = 'page/%#%/';
			 } else {
				 $format = '&paged=%#%';
			 }
			echo paginate_links(array(
				'base'			=> str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

Lihat Semua Parameter

CSS penomboran

Salin CSS berikut dan tampal ke dalam fail style.css anda.

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

Menambah Fungsi Penomboran Pada Tema Anda

Untuk memanggil semula fungsi penomboran ia sangat mudah. Apa yang anda perlu lakukan ialah menambah kod berikut pada fail tema anda di mana anda ingin menunjukkan sebarang jenis penomboran. Yang paling biasa ialah index.php anda, home.php, category.php, tags.php, archive.php dan search.php. Tetapi jika anda mempunyai sebarang templat halaman tersuai dengan sokongan penomboran, anda perlu menambahkannya di sini.

Gantikan penomboran lalai dengan yang berikut (biasanya terletak di suatu tempat selepas endif ):

<?php wpex_pagination(); ?>

Pertanyaan Tersuai?

Jika anda membuat pertanyaan tersuai menggunakan WP_Query fungsi ini tidak akan berfungsi melainkan anda telah menentukan pertanyaan anda dalam pembolehubah $wp_query (yang buruk, jangan lakukannya). Untuk membetulkannya, saya biasanya membuat pertanyaan baharu seperti berikut:

$wpex_query = new WP_Query( $args );

Dengan cara ini saya boleh mengubah fungsi penomboran utama untuk mencari pembolehubah semasa mencipta penomboran, contoh (mengedit coretan pertama):

global $wp_query, $wpex_query;
if ( $wpex_query ) {
    $total = $wpex_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}

Kemas kini: Dalam contoh ini saya menyemak pembolehubah global...Walau bagaimanapun anda hanya boleh menghantar pembolehubah pertanyaan terus ke fungsi wpex_pagination yang mungkin merupakan pilihan yang lebih baik ?