2 Cara Membuat Link Dalam Satu Halaman WordPress

Sebetulnya tidak sulit membuat link dalam satu halaman di WordPress. Konsepnya hampir sama dengan membuat link teks biasa.

Jika Anda perhatikan, hampir semua konten panduan di M Jurnal menggunakan link satu halaman. Misalnya seperti link Pintasan Panduan.

Ketika Anda klik link tersebut, secara otomatis browser akan scroll halaman ke bagian pintasan panduan di akhir artikel ini.

Tujuan link satu halaman ini sebetulnya untuk mempermudah pengunjung untuk beralih kebagian-bagian tertentu dalam halaman yang sama. Terlebih lagi, browser tidak akan memuat ulang jika link tersebut di klik.

Membuat Link Satu Halaman Menggunakan ID HTML

Anda bisa membuat link dalam satu halaman yang menuju ke bagian manapun dalam konten. Jadi bukan cuma nge-link ke Heading (H1, H2, H3, H4 dst), melainkan juga bisa buat link ke bagian paragraf <p> tertentu, div <div> dan lain sebagainya.

Misalnya, Saya ingin membuat link dalam satu halaman yang menuju ke paragraf 2 dalam artikel ini, silahkan perhatikan tahap-tahap berikut:

1. Dalam Editor teks (gutenberg) WordPress, buat ID HTML dari bagian yang menjadi link tujuan (dalam contoh ini paragraf ke 2). Caranya, klik paragraf ke 2 tersebut. Kemudian klik icon pengaturan > pos dan perlebar bagian Tingkat Lanjut.
   
2. Buat ID HTML khusus dalam kolom Anchor HTML – Tidak boleh sama dengan ID lainnya dalam halaman ini. Misalnya: link-kesini-aja
   
   Note: Wajib menggunakan huruf kecil dan ganti spasi dengan dash (-) atau underscore (_).
3. Ketik Anchor Text yang akan disisipkan link satu halaman. Kemudian blok teks dan klik icon insert link untuk menyisipkan link ke dalam anchor text.
   
4. Ketik tanda pagar (#) kemudian paste ID HTML yang sudah dibuat pada tahap satu. Jadi URL tujuan seperti ini: #link-kesini-aja.
   
   Note: tanda pagar (#) bukan merupakan ID HTML, melainkan sebagai parameter untuk memberitahu browser bahwa link-kesini-aja merupakan sebuah ID HTML.
5. Klik kirim atau tekan enter untuk melanjut. Kemudian uji coba link satu halaman Anda.
   

Nah, jika Anda berhasil, kurang lebih hasilnya sama seperti link ini: kembali ke paragraf 2.

Secara otomatis, browser akan scroll ke paragraf 2. Sehingga paragraf 2 berada dibagian layar paling atas.

Note: Dalam beberapa keadaan, link dalam satu halaman WordPress bisa berubah menjadi link menuju halaman edit post / page.

Saya belum tahu penyebab pastinya, tapi Saya sering menemukan kondisi seperti ini.

Oleh karena itu, coba pertimbangkan untuk menggunakan URL lengkap + ID.

Pertimbangkan Menggunakan URL Lengkap + ID

Membuat link dalam satu halaman menggunakan URL lengkap dari post / page + ID HTML jauh lebih aman dan terhindar dari kesalahan yang tidak diinginkan.

Caranya mudah… Anda hanya perlu menggabungkan URL dari halaman saat ini dengan ID HTML.

Untuk melihat URL halaman saat ini, silahkan simpan terlebih dahulu konten tersebut. Kemudian klik icon setting > pos dan perlebar bagian permalink.

Dalam contoh ini, URL konten saat ini adalah https://mjurnal.com/web-wordpress/membuat-link-dalam-satu-halaman-wordpress/.

Gunakan URL tersebut dan tambahkan ID HTML tepat diakhir URL menjadi https://mjurnal.com/web-wordpress/membuat-link-dalam-satu-halaman-wordpress/#link-kesini-aja.

Note: Struktur URL Lengkap + ID HTML diatas juga bisa Anda gunakan dalam postingan lain untuk membuat pengunjung menuju bagian khusus (sesuai ID HTML) dari URL tujuan.

Misalnya, coba klik link ini: Beli Hosting Gratis Domain. Secara otomatis browser akan membuka bagian Cara membeli Hosting dan Domain di halaman panduan tersebut.

Jadi kegunaan URL Lengkap + ID HTML bukan hanya untuk link dalam satu halaman. Tapi juga bisa sebagai link untuk menuju ke bagian tertentu dalam suatu halaman.

Bisakah Membuat Link Satu Halaman Dalam Menu WordPress ?

Sangat bisa…

Umumnya pebisnis yang memiliki sebuah landing page penjualan akan menambahkan link dalam satu halaman ke bagian menu website. Tujuannya tetap sama, yaitu memudahkan pengunjung untuk menavigasi halaman.

Tapi bedanya… Link satu halaman dalam menu biasanya hanya digunakan untuk website-website single page. Artinya hanya ada 1 halaman, yaitu homepage.

Dalam homepage ini tersedia semua informasi seperti jasa yang ditawarkan, tentang layanan hingga testimonial.

Misalnya, Anda membuat sebuah hompage dengan 4 bagian (section).

Nah, untuk membuat link dalam satu halaman, jangan lupa buat ID HTML untuk setiap section. Caranya sama saja dengan membuat ID HTML pertama diatas.

Yang terpenting, buat ID yang unik (tidak boleh sama), misalnya:

• #intro: Untuk link ke bagian paling atas (pertama) dari halaman.
• #service: Untuk link kebagian daftar jasa yang disediakan.
• #about: Untuk link kebagian tentang bisnis Anda (seperti kelebihan dari kompetitor dll).
• #testimonial: Untuk link kebagian testimoni pelanggan.

Kemudian, buat 4 menu untuk setiap ID HTML. Anda bisa menggunakan tautan tersuai dan menyisipkan tanda pagar serta ID HTML kedalam link tujuan disetiap menu seperti ini:

Penting! Jika ingin belajar membuat menu serta dropdown sub menu, silahkan kunjungi SUB-BAB Menu WordPress.

selanjutnya, uji coba link dalam menu Anda. Secara otomatis browser akan scroll kebagian yang sudah sesuai ID HTML.

Bagaimana, mudah atau mudah ?

Saya rasa sudah cukup jelas panduan membuat link dalam satu halaman ini. Saya harap bisa Anda terapkan baik di WordPress, blogspot maupun CMS lainnya. Karena intinya, hanya pada ID HTML.