Cara Membuat Hyperlink Bookmark pada WordPress

Pada WordPress, link adalah sebuah kata, kalimat, ataupun gambar yang bila diklik akan membawa user menuju suatu tempat tertentu seperti sebuah pos, laman, atau situs lainnya. Namun mungkin tidak banyak yang tahu kalau link yang kita buat dapat menuju ke salah satu bagian pada pos / laman yang sama.

Baru-baru ini ada pembaca bisablog.com yang bertanya apakah bisa membuat dafar isi pada WordPress dengan cara manual?

Meski saya tidak menyebutkannya pada artikel Cara Membuat Table of Contents(Daftar Isi) , bukan berarti tidak ada cara untuk melakukannya, hanya saja cara manual tersebut akan menyita terlalu banyak waktu karena kita harus membuat link yang ada pada daftar isi tersebut satu-persatu.

Untuk melakukannya secara manual, kita bisa menggunakan page jumps. Page jumps ini memiliki prinsip kerja seperti link pada umumnya, bedanya kamu bisa mengarahkan link tersebut pada salah satu bagian pada satu pos / laman yang sama.

Bila kamu pernah menggunakan Microsoft Word, kamu mungkin mengenal istilah bookmark di mana kita bisa meletakan sebuah penanda pada satu lokasi tertentu dan membuat link yang menuju ke ‘tanda’ tersebut.

Sama seperti konsep ‘bookmark’ tersebut, kita juga bisa membuat link pada WordPress mengarah pada satu bagian tertentu pada satu pos / laman yang sama.

Misalnya saja bila kamu membuat daftar isi dan membuat page jumps ke salah satu headingnya, maka pengunjung yang mengklik link tersebut bisa langsung membaca konten yang ada pada sub-judul tersebut.

Cara Membuat Page Jumps pada WordPress

Untuk membuat link yang mengarah pada salah satu bagian pos WordPress, page jumps membutuhkan dua elemen agar dapat bekerja dengan baik. Pertama kita harus menentukan lokasi bookmark, baru kemudian kita bisa membuat link yang mengarah ke bookmark tersebut.

1. Buat Bookmark

Untuk membuat bookmark, saya harap kamu sudah mengerti sedikit mengenai kode HTML. Pada satu pos WordPress, setiap bagiannya memiliki tag HTML-nya masing-masing seperti tag <p> yang menunjukan sebuah paragraf, <a> yang menunjukan sebuah link, dan <h1> sampai <h6> yang menunjukan sub-judul artikel tersebut.

Bookmark yang akan kita buat bisa ditautkan ke dalam tag-tag HTML tersebut sehingga link yang akan kita buat nanti bisa mengarah langsung ke tempat yang kita tuju. Dengan informasi tersebut, kita dapat meletakan bookmark di lokasi manapun di dalam sebuah pos.

Untuk mulai membuat bookmark pada WordPress, pastikan kamu memilih mode teks agar kita bisa melihat artikel yang kita buat dalam format HTML.

Setelah itu pilih letak bookmark dan beri identitas khusus kepada tag HTML yang kamu pilih.

Misalnya saja saya akan memberikan penanda khusus bookmark-gan pada salah satu heading yang saya gunakan. Maka heading saya akan berubah dari,

menjadi,

Selain menggunakan name, kamu juga bisa menggunakan id untuk memberikan ‘identitas’ khusus sehingga kode di atas dapat ditulis:

Penamaan bookmark sendiri bebas, bisa berupa angka, huruf besar, huruf kecil, namun usahakan tidak mengandung spasi dan simbol. Selain itu penamaan harus unik agar link dapat bekerja sempurna.

Setelah selesai, saatnya membuat link menuju bookmark tersebut.

2. Buat Hyperlink

Langkah selanjutnya adalah membuat hyperlink yang akan melompat ke tempat bookmark yang baru saja kamu buat. Untuk kali ini, kamu bisa menggunakan editor pos WordPress dalam mode Teks atau Visual.

Untuk membuat link menuju bookmark yang sudah kita buat, kamu bisa meletakan URL lengkap bookmark tersebut atau hanya nama bookmarknya saja. Contoh, bila link yang kamu gunakan masih berada pada satu pos yang sama, page jumps dapat ditulis seperti ini.

Pada mode Visual akan tampak seperti ini,

Namun bila page jumps yang kamu gunakan mengarah ke bookmark yang berada di pos yang berbeda, maka kamu bisa menggunakan URL lengkap seperti ini.

Membuat Pembaca Kembali ke tempat semula

Setelah mengirim pembaca ke bagian pos yang mereka inginkan, mungkin ada baiknya bila kita juga menyediakan ‘fasilitas’ agar pembaca dapat dengan mudah kembali ke tempat semula.

Untuk melakukannya, kita akan menambahkan tag div pada bagian atas pos / daftar isi sebagai berikut:

Setelah itu kita hanya perlu menambahkan link untuk kembali ke tempat semula dengan kode berikut: