Cara Membuat Halaman Daftar Isi atau Sitemap
This entry was writen by Rismaka, The Admin, Biochemist (sometimes) and Data Management Staff of PT. Ex-WF. [Contact: rismaka[at]rismaka.net]
Daftar isi atau sitemap berfungsi untuk menampilkan link-link postingan berdasarkan waktu atau kategori. Halaman daftar isi sangat bermanfaat bagi pengunjung yang ingin menjelajahi lebih jauh isi dari sebuah situs/blog. Terdapat tiga macam istilah yang biasa orang gunakan untuk menyebut daftar isi, yaitu sitemap, index, dan daftar isi itu sendiri.
Sitemap atau peta situs lebih tepat digunakan untuk halaman yang menampilkan navigasi lengkap dari sebuah situs. Navigasi tersebut bisa berupa daftar link postingan, kategori, tag, halaman statis, dan lain sebagainya. Index, adalah kata yang digunakan untuk menyebut halaman yang mempunyai semua kata kunci (keyword), dan masing-masing kata kunci tersebut akan merujuk pada halaman posting dimana kata kunci tersebut berasal. Kata “index” lebih tepat penggunaannya bagi halaman yang berisikan tag cloud dan kategori. Sementara itu kata “daftar isi” sangat tepat jika digunakan untuk menyebut halaman yang HANYA berisikan link postingan dari awal hingga akhir.
Bagi pengguna WordPress, ada beberapa macam cara untuk membuat halaman khusus daftar isi, antara lain:
1. Menggunakan plugin Clean Archives Reloaded
Plugin ini berfungsi untuk menampilkan semua isi postingan berdasarkan waktu publikasi. Plugin ini menggunakan javascript sehingga tampilannya dapat expand-able maupun colapas-able. Bagi kebanyakan blogger yang mementingkan tampilan, plugin ini sangat menarik untuk dicoba.
Saya sendiri tidak merekomendasikan plugin ini, disebabkan plugin ini akan menyisipkan javascript pada bagian header. Hal ini dapat menghambat performa atau kecepatan loading blog. Lihat kembali kerugian yang disebabkan oleh penggunaan javascript. Yah, walaupun perbedaannya tidak signifikan, namun tetap saja dalam hal performa, faktor sekecil apapun harus diperhitungkan. Namun semua itu kembali ke pilihan masing-masing pengguna.
2. Menggunakan plugin Dagon Design Sitemap Generator
Fungsi plugin ini lebih kepada sitemap daripada daftar isi, karena plugin ini akan menampilkan semua postingan berdasarkan kategori atau waktu, serta juga menampilkan halaman-halaman statis lainnya. Salah satu kelebihan yang dimiliki plugin ini adalah daftar isi bisa dibagi menjadi beberapa halaman sebanyak yang kita inginkan. Sangat berguna bagi blog yang sudah mempunyai banyak artikel.
3. Menggunakan fungsi PHP (cara pertama)
Cara ini bisa dikatakan cara yang sederhana untuk menampilkan daftar postingan berdasarkan waktu, karena tidak membutuhkan plugin apapun ataupun fungsi yang ditambahkan. Hanya saja tampilan dari daftar isi yang dihasilkan sangat sederhana, namun tetap usable (berguna).
1. Buatlah sebuah file php baru, kemudian berilah nama (misal: daftar_isi.php)
2. Jadikan file ini sebagai template halaman daftar isi, dengan menambahkan kode berikut:
1 2 3 4 5 | <?php /* Template Name: Daftar Isi */ ?> |
Untuk lebih jelasnya, silahkan lihat cara membuat template halaman.
3. Setelah itu copy semua isi dari file single.php dan paste (tempel) ke bagian bawah kode template. Sehingga kodenya menjadi seperti:
1 2 3 4 5 6 7 | <?php /* Template Name: Daftar Isi */ ?> <!-- Kode single.php di sini --> |
4. Cari kode berikut:
1 2 3 4 5 6 | <?php the_content(); ?> atau <?php the_content('Read the rest of this entry »'); ?> atau <?php the_content('Read more'); ?> atau yang semisalnya |
Kemudian gantilah kode itu dengan kode berikut:
1 | <?php wp_get_archives('type=postbypost'); ?> |
5. Setelah selesai, save file tersebut, dan upload ke direktori themes yang kita gunakan. Halaman tersebut dapat dijadikan template halaman untuk daftar isi. Penggunaanya cukup mudah, yaitu publish (terbitkan) sebuah halaman, dan seting halaman tersebut dengan template di atas.
Cara yang pertama ini akan menampilkan seluruh artikel yang telah kita terbitkan dari awal hingga akhir. Jika kita mempunyai jumlah artikel yang masih sedikit hal tersebut tidak mengapa, tapi jika jumlah artikel kita sudah mencapai ratusan atau bahkan ribuan, penggunaan cara di atas sangat tidak dianjurkan.
4. Menggunakan fungsi PHP (cara kedua)
Cara yang kedua dalam membuat daftar isi kurang lebih sama dengan cara pertama, hanya saja lebih kompleks. Dengan ini kita dapat membuat daftar isi yang dapat terbagi menjadi beberapa halaman yang bisa kita atur jumlah link dari masing-masing halaman tersebut. Untuk contohnya silahkan lihat daftar isi situs ini.
1. Cara membuatnya hampir sama dengan yang cara pertama, yaitu membuat template halaman. Setelah itu kita mengadopsi struktur HTML, sehingga dapat kita tuliskan kode awalnya seperti berikut:
1 2 3 4 5 6 7 8 9 10 11 | <?php /* Template Name: Daftar Isi */ ?> <?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> |
2. Kemudian tambahkan fungsi sql dan PHP berikut di antara header dan sidebar.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <ul> <?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=-27,-28&paged=$page&posts_per_page=50"); ?> <?php while (have_posts()) : the_post(); ?> <!-- start loop --> <li> <!-- Bisa di edit --> <?php the_time('d/m/y') ?> ==> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li> <!-- Bisa di edit --> <?php endwhile; ?> <!-- end of loop --> </ul> |
Kode di atas adalah kode murni, tanpa elemen CSS sama sekali. Jika anda ingin membuatnya menarik dan pas dengan theme yang anda pakai, anda dapat mengeditnya sendiri, dan anda yang paling tahu bagaimana melakukannya. Yang perlu dalam pengeditan ini adalah jangan ubah susunan/urutan kode, ataupun menyisipkan fungsi-fungsi PHP lain diantara barisan kode tersebut.
3. Untuk navigasinya, tambahkan kode berikut di bawahnya:
1 2 3 4 5 6 | <div id="navigation"> <!-- element ini tergantung theme yg digunakan --> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?> <div class="right"><?php next_posts_link('Next Page »') ?></div> <div class="left"><?php previous_posts_link('« Previous Page') ?></div> <?php } ?> </div> <!-- element ditutup --> |
Disarankan untuk menginstall plugin wp-pagenavi, karena fungsi PHP untuk navigasi di atas sudah terintegrasi dengan plugin wp-pagenavi.
5. Cara manual dengan kode HTML (khusus pengguna WordPress.com)
Disebabkan pihak WordPress.com tidak mengizinkan penggunanya mengedit theme/template yang ada, ataupun memasang plugin, maka satu-satunya cara untuk membuat daftar isi adalah dengan menuliskannya secara manual menggunakan kode HTML. Bisa dibilang cara ini sungguh melelahkan, karena setiap kali anda memposting suatu artikel, maka anda harus menuliskan atau mengedit halaman daftar isi. Tapi terimalah, karena itulah konsekwensi pengguna wordpress.com.
Bagi yang belum tahu cara penulisannya, anda bisa menerapkan contoh kode berikut:
1 2 3 4 5 6 7 | <ol> <li><a href="http://username.wordpress.com/judul-artikel-5">Judul artikel 5</a></li> <li><a href="http://username.wordpress.com/judul-artikel-4">Judul artikel 4</a></li> <li><a href="http://username.wordpress.com/judul-artikel-3">Judul artikel 3</a></li> <li><a href="http://username.wordpress.com/judul-artikel-2">Judul artikel 2</a></li> <li><a href="http://username.wordpress.com/judul-artikel-1">Judul artikel 1</a></li> </ol> |
Setiap kali ada penambahan artikel baru, sisipkan baris kode HTML yang anda buat di bawah kode “<ol>“
Melelahkan, bukan? LOL
6. Menggunakan plugin Google XML Sitemaps
Sengaja tidak dibahas, karena plugin ini tidaklah bermanfaat bagi pengunjung sebagai fitur navigasi yang bagus. Plugin ini hanya berguna untuk optimasi search engine saja.
Ok, selamat mencoba, semoga bermanfaat.
Artikel yang berhubungan:
- Cara Membuat Daftar Isi pada Blog WordPress.Com
- Membuat Halaman Buku Tamu (guestbook)
- Cara Mengetahui Attribut dari Suatu Link (nofollow atau dofollow)
- Buatlah Halaman Depan yang Sederhana dan Informatif
- Membuat Custom Tag Cloud (Awan Tag)
- Plugin Untuk Menampilkan Blogroll di Halaman
- Cara Menampilkan Random Image
Berlangganan Artikel
Dengan berlangganan, anda akan dikirim artikel terbaru blog ini secara lengkap. Masukkan alamat email anda, kemudian tekan tombol subscribe:
Bang Dje (3)
NowGoog... (3)
Andriy (2)
hokya (2)
Tips Ke... (2)
Kelanjutan artikel dari optimasi javascript (2) nanti dulu ya.. saya ingin refreshing sebentar. Pusing mikirin javascript terus
OK kak…
No.2 kayaknya menarik…
Theme punya dinda yang sekarang ga perlu pakai plugin. Kan udah dibikinin template halamannya. Tinggal bikin halaman baru, terus template halaman diseting dengan template “daftar isi”.
untuk cara yang no. 5, tidak perlu pakai kode html… karena bikin saja di halaman baru dengan format seperti menulis postingan biasa….
cuma tulis aja? truz biar ada link-nya gmn mas pengendara?
O iya ya.. hahahah saya lupa. maklum kebiasaan nulis selalu pake kode HTML.
Thanks bro
khan sudah ada widget… recent post…
Biar lebih usable aja mbak. Dan hal tsb mempermudah dan menyenangkan pengunjung.
saya pakai model php tanpa plugin. hehehehe… yang clean archives reloaded itu pun bisa tanpa plugin.
Yup, cukup tambahkan fungsinya di function.php.
O iya bang, daftar isi sendiri menurut bang ganda usable ga? Terus accessibility-nya gimana?
sebenarnya saya bingung … apa bedanya antara sitemap dengan archive …
kalau melihat artikelnya mas Adi sepertinya fungsi dari sitemap dan archive dapat dikatakan sama …
oya, bukankah dengan cara memakai script php membuatnya banyak menyita resource? apalagi kalau ada ratusan atau bahkan ribuan posting … jadinya malah lebih efektif hanya memakai bulan dan tahun …
terus terang saat ini saya sendiri masih memakai clean archive, dan ini saya rasakan sangat menggangu kinerja situs/blog … saya dahulu pernah memakai archive extractor yang hasilnya berupa daftar posting yang kemudian dicopas di halaman (misalnya archive) … ini jauh lebih ringan dan tidak melelahkan, tetapi karena masih manual sehingga sering lupa untuk mengupdatenya …
pertanyaan terakhir, apakah daftar semua posting (seperti model clean archive reloaded) yang diletakkan di satu halaman khusus benar-benar usable? … karena saya mendapati bahwa dahulu sebelum saya pakai related post dan recent post maka hit halaman archive sangat tinggi, tetapi setelah saya pasang keduanya maka hits halaman archive menurun drastis …
/* neh .. kepanjangan … padahal maksudnya tadi pendek saja … hahaha */
Bedanya sitemap dan arcive adalah kalau sitemap lebih kepada peta situs, dimana di dalamnya terdapat navigasi-navigasi ke setiap halaman, baik itu halaman posting, halaman biasa (page), halaman arsip (baik itu tahun, kategori, tag, author, dll). Kalau archive hanya menampilkan navigasi yang terdapat pada arsip tahun, kategori, tag, author, dll.
Kalau dengan cara yang no.3, memang betul akan memakan resource yang banyak jika postingan kita sudah mencapai ribuan. Tapi untuk yang no.4, query bisa dibatasi, di situ hanya dipanggil beberapa judul post saja.
Clean archive reloaded memang bagus secara tampilan, karena bisa expand-able dan colaps-able. Namun kerja dari plugin clean archive sama seperti cara no.3, ia akan menampilkan seluruh postingan. Tentunya hal itu akan memakan resource yang cukup besar. Disamping itu pula clean archive menyisipkan javascript di bagian header (itu yang bagi saya agak memberatkan)
Jawaban terakhir, tapi bukan jawaban akhir
. Menurut saya itu amat sangat usable, karena pengunjung tidak perlu banyak klik untuk melihat-lihat positing yang terdahulu. Biasanya archive hanya menampilkan 5-10 halaman (+ excerpt), sementara daftar isi bisa menampilkan sejumlah yang kita suka. Pengunjung tidak perlu terbebani lagi dengan harus ngeklik sana dan sini utk menemukan judul yang dirasa pas di hati 
bukankah hit tidak ada hubungannya dengan usability bang? Menurut saya sih, halaman archive itu usable, sehingga saya bisa melihat arsip2 tulisan bang ardi dari sejak awal posting hingga akhir posting. tentunya di dukung accessbility juga agar blinded user dapat mengakses archive dengan sempurna. Menurut saya jika clean archives itu menggunakan WAI ARIA, saya rasa sudah aksesibel… karena clean archives reloaded itu menggunakan model tree bukan?
1) berhubungan secara langsung memang tidak, tetapi penerapan usable pada sistem navigasi dapat meningkatkan hits internal …
… mungkin masih perlu waktu lagi … *apakah sekarang sudah valid ya? soalnya terakhir saya coba bulan maret*
2) sebenarnya kalau kita (yg gak blinded) mau melihat daftar posting bisa dengan melalui sitemap juga …
di sini saya (sayanya neh) sedikit berpikir rancu antara penggunaan sitemap dan archive karena secara tujuan tetap sama yaitu menampilkan daftar posting … apakah tidak lebih baik disatukan saja ya?
3) untuk membuat daftar archive sejenis clean archive tetapi dengan hanya menampilkan tahun/bulan saja (ketika diklik barulah muncul daftar postingnya) tentunya tidak akan terlepas dari penggunaan javascript atau ajax … tetapi kalau kita benar-benar ingin menampilkan sebuah halaman dengan daftar seluruh posting tentu saja akan tetap banyak query ke database (kecuali kalau kita secara manual menuliskannya) …
4) sayangnya penerapan wai-aria masih belum ditanggapi secara default oleh w3 karena setiap kali saya menerapkannya selalu dibilang gak valid
1) Hmm… setujuh bang.
2)saya juga bingung akan hal ini. Sebab arsip dan sitemap bukankah 2 hal yang sama?(terlepas dari sitemap dalam bentuk xml dan model paging yang di buat oleh bang rismaka ini)
3)bagaimana jika tanpa javascript. maksud saya html biasa dengan list yang menampilkan tahun(jumlah post)-bulan(jumlah post)
jika di klik bulan atau tahunnya, akan di tampilkan list tulisannya di halaman baru.
4) saya belum coba wai arianya secara lengkap bang. masih coba2.
Pada pandangan saya. yup. usable. Saya bisa mengakses postingan2 apa saja yang pernah di posting hanya dalam satu halaman. dari pada menelusuri setiap halaman satu persatu. Namun seperti kata bang Ardy, jika tulisan kita sudah ribuan, querynya akan cukup lambat. mengingat bang Adi menggunakan fungsi have_posts(), walau bang adi hanya menampilkan 50 tulisan dalam setiap halaman. saran saya pakai query sendiri saja bang. pakai $wpdb classes. Untuk usability, sudah aksesibel, namun ada baiknya di tambah dengan tanggal posting dan jumlah komentarnya, agar lebih usable.
mungkin seperti ini:
tahun
bulan
tanggal
posting
tahun
tahun
…
kalau memanfaatkan dari tags permalink bagaimana?
tetapi rasanya tetap saja selain cara manual cara lainnya tetap memanggil banyak query …
maksudnya bang? tags permalink? saya kurang mengerti…
Yang dimaksud mas Ardi menggunakan tags permalink mungkin menggunakan tag-tag (seperti awan tag). Begitukah?
atau bisa juga menggunakan permalinknya saja, ga usah pakai anchor teks, jadi akan sedikit mengurangi queri ke database.
kurang mengerti saya arah pertanyaannya kemana.
gak jadi … kekekekkkk
lagi erorrojing itu …
pada dasarnya sama saja dengan clean archive atau smart archive … tetapi tanpa js
Akhirnya datang juga…(kayak acara TV aja), TQ mas, ini nich yang ditunggu-tunggu, sampai-sampai mau posting lagi nanyakan, ternyata hari ini adalah hari keberuntungan saya. TQ.
och…lupa, terpaksa di copas mas, biar lebih enak dipelajari ? gak apa-apa kan ?
saya masih TK jadi belum boleh nglihat2 artikel ini.Tapi ngintip kan nggak dilarang UU tho mas.
Salam
Silahkan diintip pak. Dibawa pulang juga boleh kok
Mantap mas….
Pengen aku praktekin d blog percobaanku.. hehehe……
Mas, kalau dengan cara yang no. 4, apakah single.PHP-nya masih harus dicopy paste juga ? atau dengan template halaman kemudian dimasukan coding no. 2 trus bagian akhir dengan coding no.3 ? punya ku malah yang muncul cuma tanda panahnya, tambahan pencerahannya mas. TQ
Utk cara no.4 single.php nya jangan dicopy. Buat struktur HTML dari awal. Saya kasih contohnya:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
Template Name: Daftar Isi
*/
?>
<?php get_header(); ?>
JUDUL HALAMAN
<!-- Fungsi daftar isi -->
<ul>
<?php $page = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts("cat=-27,-28&paged=$page&posts_per_page=50"); ?>
<?php while (have_posts()) : the_post(); ?>
<li>
<?php the_time('d/m/y') ?> ==> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<!-- Fungsi daftar isi -->
<!-- Navigasi -->
<div id="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } else { ?>
<div class="right"><?php next_posts_link('Next Page »') ?></div>
<div class="left"><?php previous_posts_link('« Previous Page') ?></div>
<?php } ?>
</div>
<!-- Navigasi -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Selanjutnya diintegrasikan dengan elemen CSS dari theme yang dipakai.
makin pusing dah…
ga mudeng sama sekali about css dkk
wakz
wah nice info mas.. mau coba yang no 3 deh…
Trik ini khusus wordpress mas. Emang blogspot bisa ya?
blogspot dapat memanfaatkan dari feed rss …
sangat berguna mas postingannya, buat referensi di blog aku ya
jadi mesti dibuat halaman sendiri ( single page ) ya ?, yang masih gak mudheng pemanggilan halamannya gimana mas ? udah berulang-ulang dibaca, sampai sudah copas masih beg*’ juga neh….ampun mas, gini nih akibat gak ngerti PHP. Mohon lagi pencerahannya…
Mas Aldy buat file baru (namanya katakanlah daftar_isi.php), terus dibuat struktur HTML seperti yang sudah saya contohkan. Pemanggilannya dalam blog adalah, buat posting halaman baru (“page-new”), kemudian diseting template halamannya sebagai “daftar isi”. (biasanya ada di samping atau bawah text editor. Kemudian publish.
Yang penting jangan nyerah klo belum bisa. Lakukan berulang-ulang. Cobain yang belum tahu. Nanti lama-lama juga bakal tau
Mumpung masih ada waktu, ya iyalah mas…tapi sampai bonyok neh masih nggak ngeh juga, ach jadi malu bertanya terus. Cobain dulu deh..:D, kayaknya pak guru mulai kesal, muridnya bebal….ha..ha…ha…
dengan koneksi 1 – 3 Mbps sepertinya kalau hanya sekedar javascript dari plugin clean archive reloaded hampir tidak kelihatan pengaruhnya
Pengennya siy gitu bung. Tapi berhubung konsumen blog saya fakir bandwidth semua ya terpaksa deh ditiadakan
resikonya seperti saya … optimasi untuk lokal .. jadinya pusing juga … hahaha … saya mau ganti dari clean archive … memang lebih berat tuh
Bagaimana pengaruh plugin Dagon Design Sitemap Generator terhadap performa dan waktu loading ?
Plugin bagaimanapun juga akan mempengaruhi kerja, karena akan menambahkan fungsi pada sistemnya. Utk dagon design sitemap generator saya rasa pengaruhnya tidak terlalu signifikan terhadap kecepatan.
Maaf mas ris, halaman sudah dibuat dan diupload kedirektory template, tetapi pada saat membuat halaman baru, saya tidak menemukan halaman template pada konfigurasi attribut, yang ada hanya “Induk” dan “urutan” sementara template tidak ada ? whats wrong ?
Aneh juga ya, kenapa bisa ga ada…
Udah benar2 dilihat mas? Saya rasa setiap engine wordpress pasti ada. Emang kode templatenya udah bener2 dibuat?
udah dong mas, makanya saya bingung sendiri…apalagi sekarang saya juga update yang direkomendasikan mas, masih saya coba terus…
Kalau bisa saya minta contoh kode templatenya. Bisa ditulis di sini. Jangan lupa untuk menuliskannya diantara tag <code> dan </code>
Saya mungkin sudah menggunakan untuk blog baru he..he..he
Makasih mas,saya akan coba no.2 saja.
salam hangat dari Surabaya.
Sami-sami pak
Kalau saya lebih senang menggunakan WP-Archives 0.8 karena mendaftar semua judul postingan dan mengelompokkannya berdasarkan bulan dan tahun.
Salam dari Sorowako.
[...] ini ditulis sebagai koreksi dan tambahan atas artikel yang berjudul Cara Membuat Halaman Daftar Isi atau Sitemap, dimana dijelaskan bahwa kita hanya dapat membuat daftar isi pada blog wordpress.com secara manual [...]
waduhhh. makasih banyak boss infonya.
kl untuk blogspot bisa ga ya?
Saya kurang tahu kalau blogspot, maaf
[...] Tidak cukup dengan list artikel terbaru ataupun sidebar yang informatif, halaman depan sebaiknya menampilkan link yang merujuk ke halaman daftar isi seluruh postingan. [Maksudnya begini, BUKAN menampilkan daftar isi, TAPI menampilkan link yang merujuk ke halaman daftar isi]. Beberapa pengunjung yang menyukai konten blog kita biasanya ingin lebih jauh menjelajah dengan membaca postingan-postingan lama. Oleh karena itu buatlah halaman khusus sebagai daftar isi, dan tautkan di halaman depan agar pengunjung dapat lebih mudah menjangkaunya. Lihat cara membuat halaman daftar isi atau sitemap. [...]
Thank for your info
Apakah ada pengaruh yang signifikan mas pemasangan sitemap dengan tidak memasangnya terhadap SE atawa PR blog?
keren mass. .
pass bangett.
trums.
biar wordpress saya ada tepat untuk kumpulan tulisan script html banner milik sendiri agar bisa di copy paste pengunjung. dan bagaimana caranya agar tulisan script banner gambar waktu di taruh di add poss atau halaman tulisan baru tudak berubah menjadi gambar waktu di publikasikan