Saat mendesain situs web Anda dalam tema blok WordPress, Anda mungkin memperhatikan bahwa navigasi utama situs Anda memiliki opsi gaya yang terbatas. Misalnya, saat Anda mengklik link halaman di navigasi utama untuk mengunjungi halaman di situs web Anda, link untuk halaman aktif tidak berubah warna di dalam navigasi utama. Dengan kata lain, tidak ada indikasi bagi pengguna mengenai halaman apa yang sedang mereka buka.

Pengalaman pengguna yang baik menunjukkan bahwa pengunjung situs harus selalu memiliki semacam indikasi di mana mereka berada di situs Anda – hal ini membantu menjaga mereka agar tidak tersesat.

Dalam tutorial ini, saya akan menunjukkan cara cepat menyesuaikan navigasi situs Anda di tema blok WordPress untuk menampilkan warna khusus untuk halaman aktif. Saya akan menggunakan tema Dua Puluh Dua Puluh Empat untuk demonstrasi ini.

Daftar Isi

Langkah 1: Navigasikan ke Editor Blok

Arahkan ke Editor Blok WordPress melalui Appearance>Editor

Dari Dashboard WordPress Anda, buka Appearance>Editor (panah merah pada foto di atas). Ini akan membawa Anda ke Editor Situs.

Klik pada Area Konten Utama untuk Mengakses Editor Blok WordPress

Klik area konten utama di sebelah kanan menu. Ini akan membawa Anda ke dalam Editor Blok.

Langkah 2: Tambahkan CSS Khusus

Klik Ikon Gaya di Toolbar Blok untuk Fitur CSS Kustom WordPress

Selanjutnya, klik ikon “Gaya” di sudut kanan atas Editor Blok.

Klik Ikon 3 Titik dan Klik CSS Tambahan di WordPress

Klik ikon “Lainnya” (ikon tiga titik vertikal), lalu klik “CSS tambahan”.

Tambahkan CSS Khusus ke WordPress untuk Mengubah Warna Tautan Menu Aktif

Rekatkan kode CSS berikut ke dalam kotak teks “CSS tambahan”:

.current-menu-item {
  color: #e23f1b;
}

Ganti nilai antara simbol “#” dan “;” simbol dengan kode hex untuk warna apa pun yang ingin Anda gunakan (Anda bisa mendapatkan nilai kode hex warna di WordPress dengan mengedit apa pun yang memiliki nilai warna, atau dengan menggunakan alat warna seperti Warna Mint or Pendingin).

Klik tombol “Simpan” di bagian atas Editor Blok, lalu klik “Simpan” lagi.

Langkah 3: Lihat Halaman

Pratinjau Kustomisasi Tautan Menu WordPress dengan Mengklik Ikon Lihat Halaman

Dengan menyimpan perubahan Anda, kini Anda dapat mengklik ikon “Lihat Halaman” untuk melihat pratinjau situs Anda dengan warna baru untuk halaman aktif di navigasi utama Anda.

Penyelesaian masalah

Jika kode di atas tidak berhasil, Anda mungkin menggunakan tema yang menggunakan kelas berbeda untuk item menu aktif, atau Anda mungkin menggunakan tautan khusus di blok navigasi, bukan tautan halaman.

Tema Non-Blok atau Tema Blok Pihak Ketiga

Untuk mengatasi masalah sebelumnya, Anda harus menggunakan alat "inspeksi" di browser Anda dan mencari tahu kelas apa yang digunakan untuk tautan halaman aktif di navigasi utama Anda (Anda juga dapat mencoba Googling "Kelas apa yang digunakan tema ____ untuk aktif tautan halaman di navigasi utama”).

Untuk masalah terakhir, cukup ubah tautan khusus Anda ke tautan halaman di dalam Editor Situs. Untuk melakukan ini dari dalam Block Editor, klik logo di sudut kiri atas editor (yang akan menjadi logo WordPress atau logo situs Anda).

Kemudian, klik “Navigasi.” Klik ikon “Edit” di sebelah nama menu utama situs Anda.

Klik pada menu navigasi untuk mengeditnya. Kemudian, klik “Pergi ke blok navigasi induk” di Sidebar Pengaturan Blok jika tidak dibawa ke sana secara default.

Di bawah judul “Menu” di Sidebar Pengaturan Blok, Anda akan melihat daftar semua halaman yang ada di navigasi utama Anda. Jika Anda memiliki halaman situs apa pun di navigasi yang terdaftar sebagai tautan khusus (seperti entri bawah pada contoh foto), Anda harus menghapus entri tersebut dan menambahkannya kembali sebagai halaman (jika memungkinkan).

Untuk melakukannya, klik ikon “Opsi” di sebelah entri, lalu klik “Hapus ____.” Selanjutnya, klik ikon “+” di bagian bawah daftar halaman.

Selanjutnya, klik “Tautan Halaman”, lalu cari halaman yang ingin Anda tambahkan. Setelah Anda menambahkan halaman, klik "Simpan" dan klik "Simpan" lagi. Masalah ini harus diselesaikan.

Itu saja untuk tutorial ini! Jika Anda menyukainya, Anda dapat melihat yang lain Tutorial WordPress atau daftar di saya Kursus WordPress di Udemy!