Apakah Anda ingin menambahkan tombol di menu header WordPress Anda?

Menu dalam bentuk tombol di menu navigasi header bisa menarik perhatian pengunjung untuk melakukan tindakan.

Tombol juga bisa menunjukkan kepada pengunjung bahwa ini adalah halaman penting dan menuntun pengguna untuk melakukan tindakan lebih cepat.

Pada artikel ini, kita akan belajar bagaimana cara membuat tombol ke menu header WordPress.

Apa Gunanya Menambahkan Tombol di Menu Header WordPress ?

Navigasi menu pada WordPress biasanya berbentuk link teks biasa. Dalam dunia desain, semua menu memiliki bentuk yang sama.

Namun, bagaimana jika ingin membuat menu penting seperti menu login, daftar atau link pembelian ? Ini adalah link menu penting, tentu akan lebih menarik jika kita bisa membuatnya dalam bentuk tombol.

Secara default, WordPress memiliki fitur untuk menambahkan tombol di postingan dan halaman menggunakan blok Buttons. Namun, WordPress tidak memiliki fitur bawaan untuk menambahkan tombol di menu navigasi.

Untungnya, ada cara mudah untuk mengubah link apa pun di menu navigasi WordPress Anda menjadi tombol.

Mari kita lihat cara menambahkan tombol di menu header WordPress Anda tanpa menginstal plugin.

Menambahkan Tombol di Menu Header WordPress Anda

Pertama, buat menu baru yang ingin Anda ubah menjadi tombol ke menu navigasi WordPress Anda.

Silahkan buka halaman Tampilan » Menu di dasbor WordPress dan tambahkan tautan ke menu navigasi Anda.

Setelah itu, klik tombol Opsi Layar di bagian atas.

Anda akan melihat banyak menu dengan banyak pilihan.

Silahkan centang kotak di sebelah pilihan ‘Kelas CSS’.

Sekarang, gulir ke bawah ke bagian menu dan klik untuk memperluas item menu yang ingin Anda ubah menjadi tombol.

Tambahkan class CSS khusus ke tautan

Anda akan melihat pilihan class CSS baru di pengaturan item menu.

Selanjutnya, buat nama class dari menu yang ingin Anda buat jadi tombol. Nama dapat bebas, namun lebih baik jika berhubungan, dalam tutorial ini saya beri ama classnya tombol-menu.

Setelah membuat nama class, klik tombol ‘Simpan Menu’ untuk menyimpan perubahan.

Sekarang kita telah menambahkan kelas CSS kustom ke item menu, kita dapat mendesainnya dengan menambahkan kode CSS kustom kita sendiri.

Jika tertarik, Anda bisa belajar cara menggunakan kode CSS di sini.

Silahkan buka menu Tampilan » Sesuaikan untuk masuk ke penyesuai tema WordPress.

Anda sekarang akan melihat pratinjau langsung web di sebelah kanan dan banyak pengaturan tema di kolom kiri.

Selanjutnya, pilih tab CSS tambahan untuk memperluas menu. Menu ini akan menunjukkan sebuah kotak di mana Anda dapat menambahkan kode CSS khusus.

Di sini, Anda dapat menyalin dan menempelkan kode CSS berikut sebagai permulaan.

.tombol-menu { 
	background-color:#eb5e28;
	border:10px;
	padding:3px;
	border-radius:3px;
	box-shadow:1px 1px 0px 0px #2f2f2f;
}
.tombol-menu :hover{
	background-color:blue;
	border:10px;
	padding:3px;
	border-radius:3px;
	box-shadow:1px 1px 0px 0px #2f2f2f;	
	transition: background-color 3s;
}
.tombol-menu a:hover {
	text-decoration:none;
}
.tombol-menu a, .tombol-menu a:active { 
	color:#fff !important;
}

Setelah Anda menambahkan kode CSS, penyesuai tema secara otomatis akan menerapkannya ke pratinjau web Anda, dan Anda akan dapat melihat perubahan yang diterapkan.

Jika Anda paham menggunakan kode CSS, silahkan berkreasi dengan desain Anda sendiri. Anda dapat mengubah warna latar belakang, warna teks tautan, menambahkan border, dan banyak lagi.

Jangan lupa klik tombol Terbitkan untuk menyimpan perubahan.

Trik ini tidak hanya berguna untuk menambahkan tombol ke menu header, Anda dapat menggunakannya untuk menyorot tautan apa pun di menu navigasi WordPress.

Semoga artikel ini membantu Anda mempelajari cara menambahkan tombol di menu header WordPress. Anda juga bisa membaca Cara Mengubah Warna Link di WordPress untuk menambah pengetahuan.