Cara Menambah Menu Navigasi Tersuai dalam Tema WordPress

Adakah anda ingin menambahkan menu navigasi tersuai dalam tema WordPress anda? Menu navigasi adalah senarai pautan mendatar yang dipaparkan di bahagian atas kebanyakan laman web.


Secara lalai, tema WordPress dilengkapi dengan lokasi dan susun atur menu yang telah ditentukan, tetapi bagaimana jika anda ingin menambahkan menu navigasi tersuai anda sendiri?

Dalam artikel ini, kami akan menunjukkan kepada anda cara membuat dan menambahkan menu navigasi tersuai di WordPress dengan mudah, supaya anda dapat memaparkannya di mana sahaja mengikut tema anda.

Menambah menu navigasi tersuai dalam tema WordPress

Bila Anda Memerlukan tutorial Menu Navigasi WordPress ini?

Sebilangan besar tema WordPress hadir dengan sekurang-kurangnya satu tempat di mana anda dapat memaparkan pautan navigasi laman web anda dalam menu.

Anda boleh menguruskan item menu dari antara muka yang mudah digunakan di dalam kawasan pentadbir WordPress anda.

Sekiranya anda hanya ingin menambahkan menu navigasi di laman web anda, ikuti sahaja panduan pemula kami tentang cara menambahkan menu navigasi di WordPress.

Matlamat tutorial ini adalah untuk membantu pengguna DIY / perantaraan menambahkan menu navigasi tersuai dalam tema WordPress mereka.

Kami akan membahas topik berikut dalam artikel ini:

    Setelah itu, mari kita lihat cara menambahkan menu navigasi WordPress tersuai dalam tema anda.

    Membuat Menu Navigasi Tersuai dalam Tema WordPress

    Menu navigasi adalah ciri tema WordPress. Setiap tema dapat menentukan lokasi menu dan sokongan menu sendiri.

    Untuk menambahkan menu navigasi tersuai, perkara pertama yang perlu anda lakukan ialah mendaftarkan menu navigasi baru anda dengan menambahkan kod ini ke fail function.php tema anda.

    fungsi wpb_custom_new_menu () {
    register_nav_menu (‘menu-custom-saya’, __ (‘Menu Custom Saya’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Anda kini boleh pergi ke Rupa »Menu halaman di pentadbir WordPress anda dan cuba buat atau edit menu baru. Anda akan melihat ‘Menu Tersuai Saya’ sebagai pilihan lokasi tema.

    Menu navigasi tersuai ditambahkan pada tema

    Sekiranya anda ingin menambahkan lebih dari satu lokasi menu navigasi baru, maka anda perlu menggunakan kod seperti ini:

    fungsi wpb_custom_new_menu () {
    daftar_nav_menus (
    susunan (
    ‘my-custom-menu’ => __ (‘Menu Tersuai Saya’),
    ‘menu tambahan’ => __ (‘Menu Tambahan’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    Setelah anda menambah lokasi menu, teruskan dan tambahkan beberapa item menu di pentadbir WordPress dengan mengikuti tutorial kami tentang cara menambahkan menu navigasi untuk pemula.

    Ini akan membolehkan kita beralih ke langkah seterusnya yang menampilkan menu dalam tema anda.

    Memaparkan Menu Navigasi Tersuai dalam Tema WordPress

    Seterusnya, kita perlu memaparkan menu navigasi baru dalam tema WordPress anda. Tempat yang paling biasa di mana menu navigasi biasanya diletakkan adalah di bahagian tajuk laman web sejurus selepas tajuk atau logo laman web.

    Walau bagaimanapun, anda boleh menambahkan menu navigasi anda di mana sahaja yang anda mahukan.

    Anda perlu menambahkan kod ini dalam fail templat tema anda di mana anda ingin memaparkan menu anda.

    <?php
    wp_nav_menu (tatasusunan (
    ‘tema_lokasi’ => ‘menu-adat saya’,
    ‘container_class’ => ‘custom-menu-class’));
    ?>

    Lokasi tema adalah nama yang kami pilih pada langkah sebelumnya.

    Kelas kontena adalah kelas CSS yang akan ditambahkan ke menu navigasi anda. Menu anda akan muncul sebagai daftar bulat biasa di laman web anda.

    Custom dipaparkan sebagai senarai biasa

    Anda boleh menggunakan kelas CSS .custom_menu_class untuk menggayakan menu anda. Berikut adalah contoh CSS untuk membantu anda memulakan:

    div.custom-menu-class ul {
    margin: 20px 0px 20px 0px;
    senarai-gaya-jenis: tiada;
    gaya senarai: tiada;
    senarai-gaya-gambar: tiada;
    text-align: kanan;
    }
    div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    paparan: sebaris;
    }
    div.custom-menu-class a {
    warna: #FFFFFF;
    }

    Menu tersuai digayakan

    Untuk mengetahui lebih lanjut mengenai gaya menu navigasi, lihat tutorial terperinci kami tentang cara menata menu navigasi WordPress

    Menambah Menu Navigasi Tersuai di WordPress Menggunakan Pembina Halaman

    Sekiranya anda membuat susun atur halaman arahan atau halaman utama, maka menggunakan plugin pembangun halaman WordPress akan menjadikan semuanya lebih mudah.

    Kami mengesyorkan menggunakan Beaver Builder, yang merupakan pembangun halaman WordPress terbaik di pasaran. Ini membolehkan anda membuat semua jenis susun atur halaman menggunakan alat seret dan lepas yang mudah (tidak memerlukan pengekodan).

    Ini juga termasuk menambahkan menu navigasi tersuai ke tata letak halaman anda.

    Pertama, anda perlu memasang dan mengaktifkan pemalam Beaver Builder. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

    Setelah diaktifkan, anda perlu membuat halaman baru atau mengedit halaman yang ada di mana anda ingin menambahkan menu navigasi. Pada skrin editor pos, klik pada butang ‘Launch Beaver Builder’.

    Lancarkan Beaver Builder

    Sekiranya ia adalah halaman baru, maka anda boleh menggunakan salah satu templat siap pakai yang disertakan dengan Beaver Builder. Anda juga boleh mengedit halaman keluar anda dengan segera.

    Pilih templat

    Seterusnya, anda perlu menambahkan modul Menu dan seret dan lepaskan di halaman anda ke tempat di mana anda ingin memaparkan menu.

    Tambahkan modul menu ke halaman anda

    Ini akan memunculkan tetapan modul Menu dalam pop timbul. Pertama, anda perlu memilih menu navigasi yang ingin anda gunakan. Anda sentiasa boleh membuat menu baru atau mengedit menu yang ada dengan melawat Rupa »Menu halaman di kawasan pentadbir WordPress.

    Tetapan modul menu

    Anda juga boleh menyemak tetapan lain. Beaver Builder membolehkan anda memilih warna, latar belakang, dan sifat gaya lain untuk menu anda.

    Setelah selesai, anda boleh mengklik butang Simpan dan melihat menu anda.

    Pratonton menu navigasi tersuai yang ditambahkan dengan Beaver Builder

    Membuat Menu Responsif Mesra Mudah Alih di WordPress

    Dengan peningkatan penggunaan peranti mudah alih, anda mungkin ingin menjadikan menu anda mudah alih dengan menambahkan salah satu daripada banyak kesan popular.

    Contoh menu responsif

    Anda boleh menambahkan kesan slaid (di atas), kesan dropdown, dan juga kesan togol untuk menu mudah alih.

    Kami mempunyai panduan langkah demi langkah terperinci mengenai cara membuat menu WordPress responsif yang sedia untuk mudah alih.

    Lakukan Lebih Banyak Dengan Menu Navigasi WordPress

    Menu navigasi adalah alat reka bentuk web yang hebat. Mereka membolehkan anda mengarahkan pengguna ke bahagian paling penting di laman web anda.

    WordPress membolehkan anda melakukan lebih banyak perkara daripada sekadar memaparkan pautan di menu anda. Cubalah tutorial berguna ini untuk memperluas fungsi menu navigasi di laman WordPress anda.

    • Cara menambah ikon gambar dengan menu navigasi di WordPress
    • Cara menambahkan logik bersyarat ke menu di WordPress
    • Cara menambahkan keterangan menu dalam tema WordPress anda
    • Cara menambah menu responsif skrin penuh di WordPress
    • Cara menambah menu mega ke laman WordPress anda

    Itu sahaja, kami harap panduan utama ini dapat membantu anda mempelajari cara menambahkan menu navigasi di WordPress. Anda juga mungkin ingin melihat senarai 25 widget WordPress paling berguna kami, dan senarai pemalam WordPress kami yang mesti ada.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me