Hiperlink dipakai browser untuk pindah dari satu halaman ke halaman lain atau dari satu bagian ke bagian lain pada halaman yang sama. Ada beberapa cara membuat hiperlink diwebsite. Pada tutorial ini kita akan belajar membuat menu di wordpress dan mengarahkannya ke bagian halaman yang sama.
Kita bisa menggunakan dan memanfaatkan tag <a href> dan #ID Selector. Di CSS, #ID Selector digunakan untuk menandai suatu area dimana suatu link akan di arahkan ke area tersebut. Bagian yang kita tuju harus ditambahkan selector ID terlebih dahulu. ID bisa ditambahkan pada elemen HTML seperti H1,H2,H3,H4,H5,H6,P. Sebagai contoh <h1 id=”profil“>.
Kemudian buatlah menu melalui backend wodpress anda. Pilih menu “Appearance >> Menu”. Selanjutnya tambahkan item menu pada kelompok menu yang sudah anda buat dengan pilihan memilih opsi “Custom Links“.
Pada bagian URL isikan dengan #ID (baca: tanda pagar diikuti nama ID selector contoh: #profil )yang sudah anda buat dan tambahkan pada halaman yang akan dituju. Berikutnya pada bagian “Link Text” isikan nama item menu. Kemudian klik tombol “Add to menu“. Terkahir klik tombol “Save Menu” untuk menyimpan Menu.
Cobalah lihat dan cek hasilnya. Jika diperhatikan perpindahan atau gerakan menuju bagian halaman kurang bagus di rasakan karena terlalu kasar.
Nah disini anda bisa menghaluskan gerakan tersebut agar terlihat halus (smooth) dengan menggunakan teknik JQuery. Jika anda tidak tahu bahasa jQuery maka anda bisa memanfaatkan plugin “Page scroll to id“. Plugin ini akan membuat scrolling secara halus (smooth scrooling) jika link <a href> mengarah pada ID Selector. Install dan aktifkan plugin tersebut melalui area backend wordpress anda.
Anda dapat melakukan custom setting plugin tersebut sesuai kebutuhan anda. Jika anda bingung melakukan setting maka gunakan saja setting default plugin tersebut.
ARTIKEL TERKAIT:
- Cara Menyembunyikan Meta Info Author di WordPress
- Cara Menampilkan Date Time di Postingan WordPress
- Cara Memberikan Hak Akses Editor ke Widget di WordPress
- Cara Menyembunyikan PHP Warning di WordPress