WordPress page pagination
Desain page pagination. (© insertapps.com)

WordPress page pagination

Desain website yang baik harus didukung dengan struktur navigasi yang yang baik pula. Sehingga pengunjung yang datang tidak tersesat saat mengakses ribuan konten yang ‘terkubur’ dalam database.

Salah satunya adalah fitur page pagination atau juga dikenal dikenal sebagai paging. Pagination adalah proses membagi data posting menjadi halaman diskrit—grouping sejumlah halaman yang berbeda menjadi satu halaman yang rapi dan runut.

Selain memudahkan pengunjung mengakses blog atau website, berikut segudang manfaat dari sebuah fitur pagination:

  1. Akses konten blog jadi lebih cepat karena list posting yang ditampilkan terbatas dalam jumlah tertentu, misalnya satu paging berisi 10 judul.
  2. Kinerja server jadi lebih ringan karena data yang diproses secara step by step dengan skala yang kecil.
  3. Pengalaman pengguna akan meningkat karena struktur navigasi yang mudah dan simpel lebih disukai selain akses yang cepat.
  4. Meningkatkan SEO karena search engine memberikan skor yang tinggi untuk website yang loadnya cepat serta pengalaman pengguna yang baik.
  5. Terakhir, page view juga ikut meningkat, sehingga potensi tampilan iklan lebih banyak dengan tingkat peluang klik iklan juga tinggi.

Memasang Page Pagination CMS WordPress

Malas coding?

Tinggal pasang WP Plugin bukan?

Meng-install plugin cara paling murah meriah untuk menambah fitur pagination dalam sistem WordPress.

Salah satunya plugin WordPress yang cukup terkenal untuk masalah paged adalah WP-PageNavi. Plugin karya Lester Chan ini mendapat sudah terinstall 700.000 + di web blog dengan rating 4.5.

Tertarik dengan plugin ini, install saja via dashboard /wp-admin.

Membuat Wordpress pagination tampa plugin

Apapun tambahan fitur ke dalam sistem WordPress, plugin adalah solusinya. Masalahnya menginstall plugin ada efek sampingnya, baca (Plus-minus install WordPress Plugin).

Solusi terbaik dengan mengcustom sendiri fitur WordPress pagination tampa menggunakan plugin

Tentu untuk oprek WordPress custom pagination butuh skill coding, tapi tidak harus jago lo.

Dengan modal paham dasar HTML, CSS dan cara kerja bahasa pemograman PHP sudah cukup untuk melakukan custom ‘WP Page Navi’ sendiri.

Ternyata, cara kerjanya cukup mudah berikut penjelasan step by stepnya:

Steps 1 — Pahami dulu sintaknya

WordPress sudah menyediakan beberapa fungsi bawaan khusus untuk menampilkan pagination, diantaranya:

  • paginate_links()
  • get_previous_posts_link()
  • get_next_posts_link()

Selain function, WordPress juga menyediakan hook untuk ketiga fungsi tersebut:

  • apply_filters( 'next_posts_link_attributes', string $attributes )
  • apply_filters( 'previous_posts_link_attributes', string $attributes )
  • apply_filters( 'paginate_links', string $link )

Untuk memanggil ketiga fungsi tersebut cukup mudah, tinggal echo saja:

<section>
    
    <?php echo paginate_links(); ?>
    
    <hr>
    
    <?php echo get_previous_posts_link(); ?>
    
    <hr>
    
    <?php echo get_next_posts_link(); ?>

</section>

Hasil output data mentah codenya seperti berikut:

<section>
    
    <a class="prev page-numbers" href="http://localhost:8888/pehthemepress/">« Previous</a>
    
    <a class="page-numbers" href="http://localhost:8888/pehthemepress/">1</a>
    
    <span aria-current="page" class="page-numbers current">2</span>
    
    <a class="page-numbers" href="http://localhost:8888/pehthemepress/page/3/">3</a>
    
    <a class="next page-numbers" href="http://localhost:8888/pehthemepress/page/3/">Next »</a>
    
    <hr>
    
    <a href="http://localhost:8888/pehthemepress/page/3/">« Previous Page</a>
    
    <hr>
    
    <a href="http://localhost:8888/pehthemepress/page/3/">Next Page »</a>

</section> 

Hasil render HTML menghasil bentuk desain pagination seperti berikut:

« Previous 1 2 3 4 5 Next »

--------------------------------------

« Previous Page

--------------------------------------

Next Page »

Sedangkan script Hooks, biasanya untuk memanipulasi hasil output melalui file function.php

Steps 2 — Cara menggunakannya

Setelah mengetahui isi yang dikandung dari fungsi-fungsi tersebut untuk mencetak page pagination, selanjutnya insert code tersebut ke dalam theme setelah looping atau setelah code <?php endwhile; ?>.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <!-- Load posts loop. -->
    
    <?php get_template_part('partials/content', 'home'); ?>
    <?php endwhile; ?>
    
    <!-- Previous/next page navigation. -->

    <section>
        <?php echo paginate_links(); ?>
    </section>

    <?php else : ?>
    
    <!-- If no content, include the "No posts found" template. -->
    
    <?php get_template_part('partials/content', 'none'); ?>
<?php endif; ?>

Steps 3 — Kreasi style CSS

Terakhir, tinggal poles desainnya dengan memainkan style CSS berdasarkan nama-nama class bawaan output data mentahnya.

.prev {
    /* do something */
}

.page-numbers {
    /* do something */
}

.page-numbers span {
    /* do something */
}

.current {
    /* do something */
}

.next {
    /* do something */
}

Custom WordPress Paginate dengan CSS Framework

Bagaimana kalau custom WordPress page pagination dengan meng-insert class class bawaan CSS framework? Mengawinkan komponen pagination Bootstrap ke dalam WP Paginate misalnya.

Berikut caranya:

Steps 1 — Ambil komponen pagination Bootstrap

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Steps 2 — Panggil fungsi Paginate WordPress

Sebelumnya, rubah dulu type return value paginate_links() menjadi data type array dan nonaktifkan tombol prev_next.

<?php
	// Insert data paginate kedalam sebuah variabel $paged dengan
	// return value type menjadi array
	$paged = paginate_links( array(
	    'type'       => 'array',
			'prev_next'  => false
    ));
?>

Insert variable $paged ke dalam komponen paginate Bootstrap dengan struktur code sebagai berikut;

<nav aria-label="Page navigation">

	<?php
		
		if ( $paged ) :

			echo '<ul class="pagination">';

				echo '<li class="page-item">' . '<a class="page-link" href="#">...</a>' . '</li>'

			echo '</ul>';

		endif;
	?>
</nav>

Berikutnya, replace dulu class bawaan page-numbers paginate_links() dengan class page-link Bootstrap, dengan bantuan str_replace() PHP built-in functions.

<nav aria-label="Page navigation">

	<?php
		
		if ( $paged ) :
			
			// Replace class 'page-numbers' with 'page-link'
			$paged = str_replace('page-numbers', 'page-link', $paged);

				echo '<ul class="pagination">';

            echo '<li class="page-item">';

            echo join( '</li><li class="page-item">', $paged );

            echo '</li>';

        echo '</ul>';

		endif;
	?>
</nav>

Hasil output HTML sementara:

<ul class="pagination">

	<li class="page-item">
		<span aria-current="page" class="page-link current">1</span>
	</li>

	<li class="page-item">
		<a class="page-link" href="http://localhost:8888/pehthemepress/page/2/">2</a>
	</li>

	<li class="page-item">
		<a class="page-link" href="http://localhost:8888/pehthemepress/page/3/">3</a>
	</li>

</ul>

Steps 3 — Menambah Tombol Prev dan Next

Berikutnya, memformat tombol ‘Previous’ dan tombol ‘Next’ dengan memanfaatkan dua buah fungsi lain, yaitu, get_previous_posts_link() dan get_next_posts_link().

By default, kedua fungsi tersebut hasil print out hanya mengeluarkan data mentah link <a href="/page/2/">Next Page »</a> dan tidak menyertakan class bawaan, sehingga lebih mudah saat di custom.

<?php	
	if ( $paged ) :

		$paged = str_replace('page-numbers', 'page-link', $paged);

			echo '<ul class="pagination">';

				$previous = get_next_posts_link();
				$next = get_next_posts_link();
			
				if ( $previous ) {
				echo '<li class="page-item">' . $previous . '</li>';
				}
				
				echo '<li class="page-item">';
				
					echo join('</li><li class="page-item">', $paged);
				
				echo '</li>';
				
				if ( $next ) {
				echo '<li class="page-item">' . $next . '</li>';
				}
				
		echo '</ul>';

	endif;
?>

Hasil output sementara dari code tersebut :

<ul class="pagination">
	<li class="page-item">
		<a href="http://localhost:8888/pehthemepress/page/2/">Next Page »</a>
	</li>
	<li class="page-item">
		<span aria-current="page" class="page-link current">1</span>
	</li>
	<li class="page-item">
		<a class="page-link" href="http://localhost:8888/pehthemepress/page/2/">2</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="http://localhost:8888/pehthemepress/page/3/">3</a>
	</li>
	<li class="page-item">
		<a href="http://localhost:8888/pehthemepress/page/2/">Next Page »</a>
	</li>
</ul>

Sekarang, saatnya meng-injek class="page-link" ke dalam tag <a href="/page/2/">Next Page »</a> melalui sistem hooks WordPress.

Caranya, insert code berikut ke dalam file function.php

function insert_class_to_prev_next_posts_link_att( $attributes ) {
    return 'class="page-link"';
}

add_filter('previous_posts_link_attributes', 'insert_class_to_prev_next_posts_link_att');
add_filter('next_posts_link_attributes', 'insert_class_to_prev_next_posts_link_att');

Jangan lupa save dan reload ulang browser, hasilnya Bootstrap pagination WordPress pun berhasil.

Hasil akhir coding, struktur codenya sebagai berikut:

Demikian tutorial cara custom WordPress pagination baik dengan CSS sendiri maupun dengan komponen Bootstrap pagination.

Kalau ada pertanyaan atau kendala saat mengikuti tutorial ini, silahkan ajukan komentar melalui kolo Disqus dibawah ini. Terima Kasih.

Comment

comments powered by Disqus