Cara Edit Style Menu Navigasi WordPress Secara Manual

Cascading Style Sheet adalah kepanjangan dari CSS itu sendiri. Secara dasar arti dari CSS adalah kumpulan kode-kode yang digunakan/didefinisikan untuk mengatur tampilan halaman website agar lebih indah dari bahasa dasar kode yang ada – bahasa markup, salah satunya adalah HTML.

Dengan mengedit style menu navigasi dari wordpress secara manual kita bisa belajar coding dasar dan belajar CSS kelas dan lainnya. WordPress memiliki satu file CSS disetiap theme yang berfungsi untuk mengontrol keseluruhan tampilan style setiap halaman websitenya.

Untuk memulai pengeditan style menu navigasinya terlebih dahulu kita harus mencari tahu kelas CSS dari menu theme kita (Karena setiap theme yang kita gunakan mempunyai style CSS yang berbeda-beda). Caranya yaitu :


Step 1
: Pada halaman web browser kita, klik kanan di bagian menu dan pilih inspect. Lihat gambar berikut :

cara-edit-style-menu-navigasi-wordpress-secara-manual-inspect-menu


Step 2
: Setelah itu akan muncul sebuah page kecil disebelah kanan website (dalam kasus ini saya menggunakan google chrome).

cara-edit-style-menu-navigasi-wordpress-secara-manual-code-inspect


Step 3
: Dapat dilihat diatas bahwa setelah kita inspect page dari website Indotutorial.com yang menggunakan wordpress, terlihat ada id top-menu dan class menu.

Setelah anda mengetahui class dari menu theme anda, maka selanjutnya kita mengotak atik tampilan dari menu theme kita. Berikut langkah-langkahnya :


Step 4
: Masi di dashboard admin wordpress, kita masuk ke Tampilan/Appearance kemudian pilih Customize/Sesuaikan :


Step 5
: Pada halaman Customize/Sesuaikan, pilihlah bagian Additional CSS/CSS Tambahan dibawah kiri halaman :

Cara Mengatur Spasi di Postingan WordPress CSS Tambahan


Step 6
: Sekarang kita mencoba menggantikan Warna Navigasinya dengan code berikut :

#top-menu li.menu-item a {
color:#78cabc;
}

Maka Tampilan Menu dari website indotutorialnya akan berubah dari warna huruf hitam ke warna hijau pitch :

cara-edit-style-menu-navigasi-wordpress-secara-manual-css-edit-color

Silahkan menggantikan Warna Sesuai dengan kebutuhan anda. Sebenarnya masi banyak class dari CSS yang digunakan WP di setiap theme. Misalnya ada navigation-top, ada site-navigation dll. Semuanya dibuat untuk kepentingan pengembangan masing-masing theme. Dan berdasarkan kebutuhan pada kasus saya di web indotutorial ini, maka saya mencoba membuat effect hover dimana warna background menu akan berubah ketika pengunjung mengarahkan kursor mouse ke menu yang ada. Juga saya masukkan perubahan border hover effect nya. Untuk lebih jelas lihat code CSS berikut :

#top-menu li.menu-item a:hover {
background-color:#fff;
color:#333;
border-radius:10px;
}

Terlihat bahwa warna background akan berubah menjadi putih ( #ffffff ) Warna huruf menu akan berubah menjadi hitam grey ( #333 ), dan radius border dari button menu itu sebesar 10px.

cara-edit-style-menu-navigasi-wordpress-secara-manual-hover-effect


Catatan :

Masi banyak code CSS untuk styling tampilan seperti transparan effect, position, margin, padding dan lainnya. Namun dengan mengetahui basic-basic class CSS dari theme yang anda gunakan, maka sangat membantu untuk mengedit atau menambah style berdasarkan keinginan.

#CSS # wordpress #code #menunavigasi #belajar #tips&trik

Bagikan :

Komentar

avatar
  Subscribe  
Notify of
Tag: , , , ,