Senarai navigasi previous next post(s)

WordPress menyediakan fungsi navigasi antar posting dan navigasi antar halaman, untuk mengakomodasi kebutuhan dan kemudahan pengguna dan pengunjung saat ingin menavigasikan halaman maupun artikel yang sedang di bacanya.

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 ;

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 parameter yang di sertakan sebagai pembentuk konstruksi pranala. Perhatikan %link &raquo; 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.

Update

2010-09-19
Normatif : Rekomendasi FAE, UIUCdani (Dani Iswara, dr.)
Tentatif : Use &#171; & &#187; instead of &laquo; & &raquo;dani (Dani Iswara, dr.)

Senarai navigasi previous next post(s)

Published on : Aug 11, 2010. Last modified at : Sep 19, 2010.


Click to share on twitter , digg it, or save this article to del.icio.us.

article Navigation

Related to “Senarai navigasi previous next post(s)”.

4 Opinion for “Senarai navigasi previous next post(s)”.

Pakde Harry,
Karena alasan ribet tag ul & li itulah saya merasa cukup pakai tag p saja untuk navigasi. Walau kesannya kurang semantik. Tapi terlihat praktis untuk versi mobil.

Cara ul li itu memang pas jika berniat mengikuti rekomendasi 'Functional Accessibility Evaluator' (FAE; faetest.dres.uiuc.edu) dari 'University of Illinois at Urbana-Champaign'.

Hehehe… Ada yang merasa. Sejauh itu kah untuk pembelajarannya? Dahsyat.

Pakde Harry,
Untuk berkas XML murni, &laquo; & &raquo; riskan dipakai. Terutama di peramban Web seketat Opera. Saya pilih entitas numerik.

Bli Dani,
Mengapa ya Bli? Saya lupa dengan hal ini.

Leave an Opinion

Important : LOW isn't intended to on topic opinions, just be polite. You may use strict markup only. Opinions failing these requirement will be edited. Spam opinion won't get published.
Please, enter your real name and your valid email address (in required field). Don't worry, i'll kept your email private.










Random Learning