Cara Gaya Menu Navigasi WordPress

Adakah anda ingin menggayakan menu navigasi WordPress anda untuk mengubah warna atau penampilan mereka? Walaupun tema WordPress anda menangani penampilan menu navigasi anda, anda dapat menyesuaikannya dengan mudah menggunakan CSS untuk memenuhi keperluan anda. Dalam artikel ini, kami akan menunjukkan kepada anda cara menggayakan menu navigasi WordPress di laman web anda.


Menentukan menu navigasi di WordPress

Kami akan menunjukkan dua kaedah yang berbeza. Kaedah pertama adalah untuk pemula kerana menggunakan pemalam dan tidak memerlukan pengetahuan kod. Kaedah kedua adalah untuk pengguna DIY perantaraan yang lebih suka menggunakan kod CSS dan bukannya pemalam.

Kaedah 1: Menggayakan Menu Navigasi WordPress Menggunakan Plugin

Tema WordPress anda menggunakan CSS untuk menata menu navigasi. Ramai pemula tidak selesa dengan mengedit fail tema atau menulis kod CSS sendiri.

Ketika itulah plugin gaya WordPress sangat berguna. Ini menyelamatkan anda dari mengedit fail tema atau menulis kod apa pun.

Pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin CSS Hero. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

CSS Hero adalah plugin WordPress premium yang membolehkan anda merancang tema WordPress anda sendiri tanpa menulis satu baris kod (Tidak diperlukan HTML atau CSS). Lihat ulasan Wira CSS kami untuk mengetahui lebih lanjut.

Pengguna WPBeginner boleh menggunakan Kupon Wira CSS ini untuk mendapatkan potongan 34% untuk pembelian mereka.

Setelah diaktifkan, anda akan diarahkan untuk mendapatkan kunci Lesen Wira CSS anda. Cukup ikuti arahan di skrin, dan anda akan diarahkan kembali ke laman web anda dengan beberapa klik.

Seterusnya, anda perlu mengklik butang CSS Hero di bar alat pentadbir WordPress anda.

Lancarkan Wira CSS

Wira CSS menawarkan penyunting WYSIWYG (Apa yang anda lihat adalah apa yang anda dapat). Mengklik pada butang akan membawa anda ke laman web anda dengan bar alat CSS Hero terapung yang dapat dilihat di skrin.

Bar Alat Wira CSS

Anda perlu mengklik ikon biru di bahagian atas untuk mula mengedit.

Setelah anda mengklik ikon biru, bawa tetikus anda ke menu navigasi anda, dan CSS Hero akan menyerlahkannya dengan menunjukkan sempadan di sekitarnya. Apabila anda mengklik menu navigasi yang disorot, ia akan menunjukkan item yang boleh anda edit.

Arahkan dan klik untuk menyesuaikan menu

Dalam tangkapan skrin di atas, ini menunjukkan kepada kita bekas menu navigasi teratas. Anggaplah kita mahu mengubah warna latar belakang menu navigasi kita. Sekiranya demikian, kami akan memilih navigasi teratas yang mempengaruhi keseluruhan menu kami.

CSS Hero kini akan menunjukkan kepada anda pelbagai sifat yang boleh anda edit seperti teks, latar belakang, sempadan, margin, padding, dll.

Harta CSS

Anda boleh mengklik mana-mana harta benda yang ingin anda ubah. CSS Hero akan menunjukkan kepada anda antara muka yang mudah untuk membuat perubahan.

Ubah penampilan elemen

Dalam tangkapan skrin di atas, kami memilih latar belakang, dan itu menunjukkan kepada kami antara muka yang bagus untuk memilih warna latar belakang, kecerunan, gambar dan banyak lagi.

Semasa anda membuat perubahan, anda akan dapat melihatnya secara langsung dalam pratonton tema.

Pratonton langsung perubahan CSS anda

Setelah anda berpuas hati dengan perubahan tersebut, klik pada butang simpan di bar alat CSS Hero untuk menyimpan perubahan anda.

Perkara terbaik dalam menggunakan kaedah ini adalah dengan mudah anda membuat pembatalan perubahan yang anda buat. Wira CSS menyimpan sejarah lengkap mengenai semua perubahan anda, dan anda boleh pergi dan balik antara perubahan tersebut.

Kaedah 2: Menu Navigasi WordPress Gaya Secara Manual

Kaedah ini menghendaki anda menambahkan CSS tersuai secara manual dan bertujuan untuk pengguna perantaraan.

Menu navigasi WordPress dipaparkan dalam senarai yang tidak disusun (senarai bulet).

Biasanya jika anda menggunakan tag menu WordPress lalai, maka ia akan memaparkan senarai tanpa kelas CSS yang berkaitan dengannya.

<?php wp_nav_menu (); ?>

Senarai yang tidak tersusun anda akan mempunyai nama kelas ‘menu’ dengan setiap item senarai mempunyai kelas CSS sendiri.

Ini mungkin berfungsi jika anda hanya mempunyai satu lokasi menu. Walau bagaimanapun, kebanyakan tema mempunyai beberapa lokasi di mana anda dapat memaparkan menu navigasi.

Menggunakan hanya kelas CSS lalai boleh menyebabkan konflik dengan menu di lokasi lain.

Inilah sebabnya mengapa anda perlu menentukan lokasi kelas dan menu CSS juga. Kemungkinan tema WordPress anda sudah melakukannya dengan menambahkan menu navigasi menggunakan kod seperti ini:

<?php
wp_nav_menu (tatasusunan (
‘tema_lokasi’ => ‘utama’,
‘menu_kelas’ => ‘menu utama’,
));
?>

Kod ini memberitahu WordPress bahawa di sinilah tema memaparkan menu utama. Ia juga menambah menu utama kelas CSS ke menu navigasi.

Sekarang anda boleh menggayakan menu navigasi anda menggunakan struktur CSS ini.

// kelas kontena
#header .primary-menu {}

// senarai kontena senarai pertama yang tidak disusun
#header .primary-menu ul {}

// senarai tidak tersusun dalam senarai tidak tersusun
#header .primary-menu ul ul {}

// setiap item navigasi
#header .primary-menu li {}

// setiap sauh item navigasi
#header .primary-menu li a {}

// senarai yang tidak tersusun sekiranya terdapat item drop-down
#header .primary-menu li ul {}

// setiap item navigasi lungsur turun
#header .primary-menu li li {}

// masing-masing membuka sauh item navigasi
#header .primary-menu li li a {}

Anda perlu mengganti #header dengan kelas CSS kontena yang digunakan oleh menu navigasi anda.

Struktur ini akan membantu anda mengubah penampilan menu navigasi anda sepenuhnya.

Walau bagaimanapun, terdapat kelas CSS WordPress yang dihasilkan secara automatik yang ditambahkan ke setiap menu dan item menu. Kelas-kelas ini membolehkan anda menyesuaikan menu navigasi anda lebih jauh.

// Kelas untuk Halaman Semasa
.current_page_item {}

// Kelas untuk Kategori Semasa
.kucing semasa {}

// Kelas untuk Item Menu semasa yang lain
.item-menu-semasa {}

// Kelas untuk Kategori
.menu-item-type-taksonomi {}

// Kelas untuk jenis Pos
.menu-item-type-post_type {}

// Kelas untuk pautan tersuai
.menu-item-type-custom {}

// Kelas untuk pautan rumah
.menu-item-rumah {}

WordPress juga membolehkan anda menambahkan kelas CSS tersuai kepada item menu individu.

Anda dapat menggunakan fitur ini untuk menggayakan item menu, seperti menambahkan ikon gambar dengan menu Anda atau dengan hanya mengubah warna untuk menyorot item menu.

Kepala ke Rupa »Menu halaman di pentadbir WordPress anda dan klik pada butang Skrin Pilihan.

Dayakan pilihan kelas CSS untuk item menu individu

Setelah mencentang kotak itu, anda akan melihat bahawa medan tambahan akan ditambahkan semasa anda mengedit setiap item menu.

Menambah kelas CSS khusus ke item menu di WordPress

Sekarang anda boleh menggunakan kelas CSS ini di lembar gaya anda untuk menambahkan CSS tersuai anda. Ini hanya akan mempengaruhi item menu dengan kelas CSS yang anda tambahkan.

Contoh Menu Navigasi Gaya di WordPress

Tema WordPress yang berbeza mungkin menggunakan pilihan gaya yang berbeza, kelas CSS, dan bahkan JavaScript untuk membuat menu navigasi. Ini memberi anda banyak pilihan untuk mengubah gaya tersebut dan menyesuaikan menu navigasi anda untuk memenuhi keperluan anda sendiri.

Alat periksa di penyemak imbas web anda akan menjadi sahabat anda ketika mengetahui kelas CSS mana yang akan diubah. Sekiranya anda belum menggunakannya sebelumnya, lihat panduan kami mengenai cara menggunakan alat pemeriksaan untuk menyesuaikan tema WordPress.

Pada asasnya, anda hanya perlu mengarahkan kursor ke elemen yang ingin anda ubah, klik kanan dan kemudian pilih Periksa alat dari menu penyemak imbas.

Menggunakan alat periksa untuk mencari kelas CSS untuk diubah suai

Oleh itu, mari kita lihat beberapa contoh menu navigasi gaya hidup sebenar di WordPress.

1. Cara Mengubah Warna Font di Menu Navigasi WordPress

Berikut adalah contoh CSS khusus yang boleh anda tambahkan ke tema anda untuk menukar warna fon menu navigasi.

# menu teratas li.menu-item a {
warna: # ff0000;
}

Dalam contoh ini, menu # teratas adalah ID yang diberikan ke senarai yang tidak tersusun yang memaparkan menu navigasi kami. Anda perlu menggunakan alat pemeriksaan untuk mengetahui ID yang digunakan oleh tema anda.

Menukar warna fon menu navigasi WordPress

2. Cara Mengubah Warna Latar Belakang Menu Bar Navigasi

Mula-mula anda perlu mengetahui ID CSS atau kelas yang digunakan oleh tema anda untuk wadah di sekitar menu navigasi.

Mencari kelas CSS untuk bekas menu navigasi

Selepas itu anda boleh menggunakan CSS khusus berikut untuk mengubah warna latar bar menu navigasi.

.pelayaran atas {
warna latar: # 000;
}

Inilah caranya di laman web demo kami.

Menukar warna latar bar menu navigasi

3. Cara Menukar Warna Latar Belakang Item Menu Tunggal

Anda mungkin menyedari bahawa banyak laman web menggunakan warna latar belakang yang berbeza untuk pautan terpenting dalam menu navigasi mereka. Pautan ini boleh menjadi butang masuk, daftar, kenalan, atau beli. Dengan memberikan warna yang berbeza, ia menjadikan pautan lebih kelihatan.

Untuk mencapainya, kami akan menambahkan kelas CSS tersuai pada item menu yang ingin kami sorot dengan warna latar yang berbeza.

Kepala ke Rupa »Menu dan klik pada butang Skrin Pilihan di sudut kanan atas skrin. Ini akan memunculkan menu terbang ke bawah di mana anda perlu mencentang kotak di sebelah pilihan ‘kelas CSS’.

Dayakan pilihan kelas CSS untuk item menu individu

Selepas itu anda perlu menatal ke bawah ke item menu yang ingin anda ubah dan klik untuk mengembangkannya. Anda akan melihat pilihan baru untuk menambahkan kelas CSS tersuai anda.

Menambah kelas css tersuai ke item menu

Sekarang anda boleh menggunakan kelas CSS ini untuk menggayakan item menu tertentu secara berbeza.

.hubungi Kami {
warna latar: # ff0099;
sempadan-jejari: 5px;
}

Inilah bagaimana ia kelihatan di laman web ujian kami.

Menukar warna latar belakang item menu tunggal dalam menu navigasi WordPress

4. Menambah Kesan Hover ke Menu Navigasi WordPress

Adakah anda mahu item menu anda berubah warna semasa tetikus? Silap mata CSS ini menjadikan menu navigasi anda kelihatan lebih interaktif.

Cukup tambahkan CSS khusus berikut ke tema anda.

# menu teratas li.menu-item a: arahkan {
warna latar: #fff;
warna: # 666;
sempadan-jejari: 5px;
}

Dalam contoh ini, # menu atas adalah ID CSS yang digunakan oleh tema anda untuk senarai menu navigasi yang tidak tersusun.

Inilah cara ini dilihat di laman web ujian kami.

Kesan tetikus pada menu navigasi WordPress

5. Buat Menu Navigasi Terapung Lekap di WordPress

Biasanya menu navigasi muncul di atas dan hilang ketika pengguna menatal ke bawah. Menu navigasi terapung melekit tetap berada di atas semasa pengguna menatal ke bawah.

Anda boleh menambahkan kod CSS berikut ke tema anda untuk menjadikan menu navigasi anda melekit.

# menu teratas {
latar belakang: # 2194af;
tinggi: 60 piksel;
z-indeks: 170;
margin: 0 automatik;
border-bottom: 1px padat #dadada;
lebar: 100%;
kedudukan: tetap;
atas: 0;
kiri: 0;
betul: 0;
text-align: kanan;
padding-right: 30px
}

Cukup ganti # menu teratas dengan ID CSS menu navigasi anda.

Inilah cara penampilan dalam demo kami:

Menu navigasi melekit

Untuk arahan dan kaedah alternatif yang lebih terperinci, lihat panduan kami mengenai cara membuat menu navigasi terapung yang melekit di WordPress.

6. Buat Menu Navigasi Telus di WordPress

Banyak laman web menggunakan gambar latar besar atau skrin penuh dengan butang ajakan bertindak. Menggunakan menu lutsinar menjadikan navigasi anda berpadu dengan gambar. Ini menjadikan pengguna lebih cenderung memusatkan perhatian pada ajakan bertindak anda.

Cukup tambahkan contoh CSS berikut ke tema anda untuk menjadikan menu navigasi anda telus.

# pelayaran laman web {
warna latar: telus;
}

Ini adalah bagaimana ia kelihatan di laman web demo kami.

Menu navigasi telus di WordPress

Bergantung pada tema anda, anda mungkin perlu menyesuaikan kedudukan gambar tajuk sehingga merangkumi kawasan di belakang menu lutsinar anda.

Kami harap artikel ini dapat membantu anda mempelajari cara menggayakan menu navigasi WordPress. Anda mungkin juga ingin melihat panduan kami mengenai cara menambahkan menu WordPress responsif yang siap digunakan.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map