Download Now Download Themes Gratis WordPress Responsive!

Membuat Page number Tanpa Plugins di WordPress

Membuat page number dengan plugins sudah saya jelaskan pada artikel sebelumnya yang berjudul Menambahkan Nomor Halaman dengan Wp-Pagenavi di WordPress, kali ini saya akan membuat tutorial wordpress bagaimana membuat page number tanpa plugins di wordpress. berikut adalah langkah-langkahnya.

copykan kode dibawah ini pada file Fungtion.php difolder template yang anda gunakan.

function wp_page_number() {

	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";

}

Setelah anda menambahkan script diatas tadi, sekarang copykan tag php dibawah ini pada index.php, category.php, tags.php dan archive.php yang berada di folder template yang anda gunakan. script php dibawah ini digunakan untuk memanggil function yang sudah anda buat tadi dengan nama function wp_page_number, dan ganti default script previous_posts_link and next_posts_link dengan script dibawah ini.

<?php wp_page_number(); ?>

jika anda ingin mempercantik tampilan page number yang anda buat, silahkan copy kode CSS dibawah ini dan taruh di file Style.CSS di Folder Template yang anda gunakan.


/* csss pagination */

.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: #38B7EE;
	border-radius: 30px;
	cursor: pointer;
    padding: 5px 10px;
	transition:all 0.25s linear 0s;
}

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

selamat mencoba, dan dibawah ini adalah screnshoot dari page number yang sudah kita buat tadi, tampilanya sebagai berikut :

page number wordpress style

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

  • Anton Prasetyo

    Selamat malam Gan. Tutorial diatas sudah saya praktekkan di web saya dan berhasil. Saya ijin mengganti warnanya dan disesuaikan dengan warna theme saya. Trimakasih banyak 🙂

  • aang

    gan file fungtion.php itu di mana?

    • File function itu ada di folder wp-content-themes-theme-anda.

      • aang

        di mana gan? setelah ane di dashboard terus di klik yang mana?

        • kalo lewat dashboard di menu appearance->editor, cari disebelah kanan function/theme function. tdi ane yg awal jelasinya di cpanel. 🙂

  • glewo77

    mau tanya ,,saya pake zero chip,kok gak funngsi dan eror ,knp ya bos…maklum newbie…tolong bos solusinya, soalnya di web gak ada nex/prev komentar,trims

  • enggak.

  • enggak. harus menggunakan wordpress self hosted

Must Read...!
Menambahkan Nomor Halaman dengan Wp-Pagenavi di WordPress

Tutorial kali ini akan membahas bagaimana menambahkan pagination numerik dalam tema WordPress, sehingga memudahkan...

Theme WordPress Onesie Responsive Free Landing Page

Template Onesie adalah Template Wordpress yang responsive dan Gratis untuk anda download, template ini...

Close