Tidak satupun pengelola yang menggunakan WordPress sebagai mesin blognya merasa asing dengan navigasi dasar tersebut. Asumsi pembelajaran ini adalah bentuk umum markah dan snippet pemanggil fungsi navigasi previous_next_post(s) dan tata letaknya pada kebanyakan tema WordPress.

Alasan previous_next_post(s) perlu di senaraikan.

Penulisan snippet pemanggil markah navigasi pada beberapa tema WordPress yang ada, rata rata di lakukan seperti berikut :

1. Untuk navigasi antar halaman (plural) di luar loop.

   <div class="navigation">
     <div class="nav-previous"><?php previous_posts_link('&laquo; Older Entry') ?></div>
     <div class="nav-next"><?php next_posts_link('Newer Entry &raquo;') ?></div>
   </div>
   

2. Untuk navigasi antar artikel (singular) dalam loop.

   <div class="navigation">
     <div class="nav-previous"><?php previous_post_link('&laquo; %link') ?></div>
     <div class="nav-next"><?php next_post_link('%link &raquo;') ?></div>
   </div>
   

Beberapa yang peduli dengan disiplin penulisan markah hiper teks, tentu mengetahui kekurangan snippet pemanggil fungsi navigasi di atas.
Anda benar… Elemen markah div sebaiknya di pergunakan sebagai pilihan terakhir, jika sudah tidak ada lagi elemen markah lain yang lebih cocok. Karena elemen markah div tidak memiliki makna semantik apapun kecuali sebatas pembangun layout halaman, mengundang ketidakteraksesan bagi pembaca dan menimbulkan kesulitan dalam pemeliharaan bagi pengelola atau pengembang.

Beberapa yang peduli dengan topik keteraksesan dan kemudahan pemeliharaan kemudian mengganti elemen markah div dengan elemen block level yang lain yang lebih semantik. Misalnya menggunakan elemen markah paragraf p.

Tetapi sebagai yang pernah beropini tentang elemen markah senarai list dalam beberapa pembelajaran senarai sebelumnya. Maka mengganti elemen div pada navigasi previous_post(s)_link dan next_post(s)_link dengan senarai unordered list ul sepertinya lebih pantas. Tidak… belum… saya belum bermaksud menghubungkannya dengan elemen markah nav pada HTML5 yang belum final saat tulisan ini di publikasikan.

Kendala meletakkan navigasi posting WP dalam senarai ul.

Seperti asumsi pemelajaran saya, saat pertama kali melakukan hal ini. Maka snippet navigasi previous_next_post(s) tersebut selaiknya di tuliskan dengan markah hiper teks sebagai berikut ;

1. Untuk navigasi antar halaman (plural) di luar loop.

   <div class="navigation">
     <h2>Some words as a heading</h2>
     <ul>
       <li class="any_class"><?php previous_posts_link('&laquo; Older Entry') ?></li>
       <li class="any_other_class"><?php next_posts_link('Newer Entry &raquo;') ?></li>
     </ul>
   </div>
   

2. Untuk navigasi antar artikel (singular) dalam loop.

   <div class="navigation">
     <h2>Some words as a heading</h2>
     <ul>
       <li class="any_class"><?php previous_post_link('&laquo; %link') ?></li>
       <li class="any_other_class"><?php next_post_link('%link &raquo;') ?></li>
     </ul>
   </div>
   

Sekilas, menggunakan elemen markah unordered list ul pada contoh diatas adalah tampak sempurna, tetapi sejujurnya belum sepenuhnya menyelesaikan masalah. Kendala yang muncul adalah, screen reader atau pembaca layar masih akan melafalkan bullet untuk list item li link pranala yang kosong. Kendala ini timbul jika pengunjung membuka atau berada pada ;

• Home page atau laman,
• Halaman terlama (oldest),
• Posting / artikel terlama,
• Posting / artikel terbaru.

Penyelesaian butir kosong pada senarai.

Pada sisi visual, hal ini bisa saja di atasi dengan menuliskan properti {list-style-type:none;} untuk selektor ul melalui lembar gaya Cascading Style Sheet (CSS). Tetapi jangan lakukan, karena ketika lembar gaya anda tidak aktif maka peramban web secara standar akan merender notasi bullet tersebut. Berikut adalah penyelesaiannya ;

Snippet navigasi antar artikel (singular).

WordPress akan memformat label yang di sertakan sebagai pembentuk konstruksi pranala. Perhatikan %link » pada snippet berikut ;

<?php next_post_link('%link &raquo;') ?>

Silahkan ganti dengan <li class="class_here"> %link &raquo; </li> sehingga menjadi ;

<?php next_post_link('<li class="class_here"> %link &raquo; </li>'); ?>

Atau apabila di tuliskan secara lengkap, senarai untuk navigasi antar artikel dapat di kodekan sebagai berikut;

<div class="navigation">
  <h2>Some words as a heading</h2>
  <ul>
    <?php previous_post_link('<li class="class_here"> &laquo; %link </li>'); ?>
    <?php next_post_link('<li class="other_class_here"> &raquo; %link </li>'); ?>
  </ul>
</div>

Snippet navigasi antar halaman (plural).

Untuk mengatasi kendala pada penulisan snippet navigasi antar halaman, tidak dapat di lakukan seperti halnya pada navigasi antar posting tunggal. Karena konstruksi fungsi yang sedikit berbeda.

Yang perlu di lakukan untuk senarai navigasi antar halaman adalah menyiapkan sebuah variable untuk menampung string navigasi. Asumsinya, Jika variable itu tidak kosong, maka elemen markah senarai list item li dan string navigasi harus dicetak pada layar, Jika kosong maka elemen markah senarai list item li tidak perlu di cetak dan di abaikan.

Untuk memperjelas paragraf diatas, ujicobakan snippet pemanggil markah navigasi antar halaman berikut ;

<div class="navigation">
  <h2>Some words as a heading</h2>
  <ul>
<?php
$nextlink = get_next_posts_link('&raquo; Newer Entry');
$prevlink = get_previous_posts_link('&laquo; Older Entry');
if (!empty($nextlink)) {
  _e ('<li class="class_here">' . $nextlink . '</li>'); }
if (!empty($prevlink)) {
  _e ('<li class="other_class_here">' . $prevlink . '</li>'); }
?>
  </ul>
</div>

Meskipun, saya meyakini bahwa tulisan ini masih ada hubungannya dengan navigasi website yang baik, Tetapi, saya tidak bermaksud lagi menghubungkannya dengan kata optimalisasi tersebut.

If there… ah… jika kelak harus mengikuti standar baru cara menulis Bahasa Markah Hiper Teks (BMHT). Jika di kemudian hari, User Angent (UA) peramban sudah menggunakan rekomendasi termutakhir saat merender sebuah elemen. Maka biarlah dokumentasi ini yang akan saya tengok pertama kali saat perubahan itu terjadi.

Tabel berikut ini hanya memuat beberapa elemen yang secara standar akan di cetak miring oleh peramban. Tulisan ini tidak di peruntukkan bagi pakar pakar CSS, karena hanya akan di pergunakan sebagai pengingat pribadi untuk tidak berboros bita dengan lembar gaya Cascading Style Sheet (CSS) hanya untuk memiringkan sesuatu yang sebenarnya tidak perlu di miringkan.Kecuali anda mempunyai tujuan yang lain… monggo alias silahkan, terserah pembaca.

Adalah dinamakan sebagai sebuah pemelajaran, karena tabel diatas pasti masih menyisakan banyak kekurangan.
Is it neccessary to discuss ?
Apakah masih perlu untuk di diskusikan lagi ? It’s about coding dicipline, and all yours.
What will be happen, happenlah.
Itu maksudnya, apakah saya masih terlihat menulis sebuah tutorial ?
…