Anda disini: M Jurnal » WordPress » 2 Cara Membuat Link Dalam Satu Halaman WordPress

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.

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.
    Edit Blok dan tambahkan ID HTML
  2. Buat ID HTML khusus dalam kolom Anchor HTML – Tidak boleh sama dengan ID lainnya dalam halaman ini. Misalnya: link-kesini-aja
    Tambahkan ID HTML
    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.
    Ketik Anchor Text dan tambahkan Link dalam satu halaman WordPress
  4. Ketik tanda pagar (#) kemudian paste ID HTML yang sudah dibuat pada tahap satu. Jadi URL tujuan seperti ini: #link-kesini-aja.
    Menghubungkan Link dalam Satu Halaman WordPress menggunakan ID HTML #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.
    Konfirmasi pilihan

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.

diskon-hosting

Cara membuat link dalam satu halaman WordPress menggunakan URL lengkap dan ID HTML (jump link)

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:

Cara membuat link dalam satu halaman di dalam menu WordPress

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.

Pintasan Panduan Belajar Menggunakan WordPress

SUB-BAB Sebelumnya: Optimasi Permalink.

  1. Cara Menggunakan WordPress: Cara menggunakan semua fitur dan menu yang ada dalam dashboard Admin WordPress.
  2. Post vs Page: Di WordPress, Post dan Page (halaman) itu jenis konten yang berbeda. Jadi jangan sampai salah. Pahami perbedaan dan kegunaannya.
  3. Membuat Post: Cara membuat postingan di website WordPress terbaru (gutenberg).
  4. Membuat Page: Cara membuat halaman (page) baru di WordPress.
  5. Categories: Mengenal dan cara membuat kategori dan sub kategori WordPress.
  6. Tag: Mengenal manfaat tag dan cara membuat tag di WordPress.
  7. Menambahkan Gambar: Cara upload dan mengelola gambar di WordPress (tahap demi tahap lengkap).
  8. Menambahkan Video: Cara menambahkan video di dalam post dan page WordPress, Embed Video YouTube dan Hubungan Video dengan SEO website.
  9. Link Teks: Membuat link dari sebuah teks dalam post, page dan widget.
  10. Link Gambar: Membuat link dari sebuah gambar.
  11. Download Link: Cara membuat link download file di WordPress + Alternatif terbaik untuk fitur yang lebih kompleks.
  12. Link Satu Halaman: (Anda Disini).

SUB-BAB Berikutnya: Mengganti Theme.

Komentar Paling Lambat di Balas Pukul 23:59.