Cara membuat menu navigasi tema dalam WordPress (1)

Bagaimana untuk mencipta menu navigasi tema dalam WordPress? Artikel berikut akan berkongsi dengan anda beberapa kaedah membuat menu navigasi tema WordPress saya harap ia akan membantu anda!

Dalam pengeluaran tema WordPress, penghasilan menu navigasi ialah titik utama Kod HTML menu navigasi telah ditulis ? Artikel ini akan memperkenalkan anda kepada beberapa kaedah menulis kod PHP untuk melaksanakan navigasi secara dinamik Artikel ini hanya akan menumpukan pada pembangunan kod dinamik dan tidak akan mengajar anda cara menulis HTML, CSS dan Javascript untuk melaksanakan menu navigasi yang cantik.

Pengeluaran menu tersuai WP 3.0

Versi selepas WordPress 3.0 mula menyokong menu dinamik tersuai Apa yang dipanggil menu dinamik membolehkan pengguna memutuskan item yang hendak digunakan. Tambahkan item pada menu navigasi, masukkan Bahagian Belakang Pengurusan - Penampilan - Menu WordPress, dan buat menu anda sendiri dengan menyeret lajur yang sepadan. Ini adalah perkara yang menggembirakan untuk pembangun dan pengguna tema WordPress. Untuk melaksanakan menu tersuai, fungsi yang perlu anda gunakan ialah wp_nav_menu() Menyerahkan beberapa parameter ke fungsi ini boleh mengeluarkan menu tersuai Mari kita bincangkan secara ringkas tentang cara menggunakan fungsi ini.

Pertama, tambahkan kod pendaftaran menu berikut di antara dalam functions.php dalam direktori tema, supaya anda boleh menggunakan fungsi wp_nav_menu dalam fail tema :

// This theme uses wp_nav_menu() in one location.
register_nav_menus();

Kemudian kami memanggil wp_nav_menu() pada bar navigasi tema untuk mengeluarkan kod HTML menu navigasi:

<?php 
    // 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单
    wp_nav_menu( array( &#39;menu&#39; => &#39;mymenu&#39;, &#39;depth&#39; => 1) );
?>

HTML output kod oleh kod di atas adalah dalam bentuk berikut:

<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

Item li yang disenaraikan di sini ialah lajur yang anda tambahkan dalam Menu Penampilan Belakang Pentas . Jika anda belum menambah menu di bahagian belakang, bar navigasi akan menyenaraikan semua halaman. Selain itu, wp_nav_menu akan menambah kelas pada setiap kelas yang berbeza menandakan atribut item menu ini Sebagai contoh, jika halaman artikel dibuka pada masa ini, Kategori A ialah kategori kepunyaan artikel ini. maka Li di mana Kategori A terletak akan kelihatan seperti kod berikut:

<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

Jika ia berada di halaman utama, maka li menu item pada halaman utama mungkin kelihatan seperti ini:

<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

Anda boleh mengetahui fungsinya daripada nama kelas ini Dengan menambahkan atribut css pada kelas ini, anda boleh mencapai tujuan untuk menyerlahkan menu navigasi semasa, seperti mentakrifkan pautan menu semasa Berwarna merah:

.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

Nah, memanggil menu tersuai WordPress 3.0 adalah semudah itu. wp_nav_menu juga mempunyai banyak parameter, seperti nod ul tersuai, id dan parameter kelas nod induk ul, dsb.

Gunakan kategori dan halaman sebagai bar navigasi

Sebelum WordPress 3.0, kebanyakan tema WordPress menggunakan halaman sebagai bar navigasi dan anda hanya boleh menambah halaman dalam navigasi. nampaknya cukup bebas. Apabila saya mula menggunakan WordPress 2.7, saya bimbang tentang masalah ini Akhirnya, saya melihat melalui dokumentasi, menyemak beberapa maklumat, dan menyedari menambah kategori dalam navigasi Untuk butiran, sila lihat artikel yang saya tulis sebelum ini: WordPress kategori sebagai bar navigasi. Dan serlahkan

Pengeluaran bar navigasi tidak konvensional

Kedua-dua kaedah yang dinyatakan di atas semuanya dilaksanakan menggunakan fungsi WordPress sendiri input juga terhad, menggunakan bentuk ul li untuk membina senarai menu: seperti:

<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

Jika kod bahagian hadapan tema tidak ditulis oleh anda, Selain itu, kod bar navigasi adalah sangat bodoh Ini bukan borang bar navigasi ul standard WordPress di atas sama sekali, seperti kod berikut:

<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

Tulis semula bahagian hadapan. -kod tamat? Saya tidak fikir sesiapa yang sanggup melakukan ini, jadi apa yang perlu kita lakukan? Juga, bagaimana jika bar navigasi tidak menggunakan kategori dan halaman, dan tidak membenarkan penggunaan menu tersuai? Dalam aplikasi sebenar, kami juga akan menghadapi keperluan yang pelbagai dan pelik Kami akan terus meneroka isu ini dalam keluaran seterusnya!

Pembelajaran yang disyorkan: "Tutorial WordPress"

Atas ialah kandungan terperinci Cara membuat menu navigasi tema dalam WordPress (1). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!