Unduh wp bootstrap navwalker - unduh kode sumber wp bootstrap navwalker

WP Bootstrap Navwalker

Kode di cabang repo utama ini sedang mengalami perombakan besar agar sejalan dengan standar terkini dan untuk menggabungkan serta menguji simpanan PR yang sudah saya tinggalkan terlalu lama. Silakan gunakan tag v4.3.0 untuk versi stabil saat proses ini terjadi. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

Kelas Nav Walker WordPress khusus untuk sepenuhnya mengimplementasikan gaya navigasi Bootstrap 4 dalam tema khusus menggunakan pengelola menu bawaan WordPress.

CATATAN

Ini adalah kelas utilitas yang dimaksudkan untuk memformat menu tema WordPress Anda dengan sintaksis dan kelas CSS yang benar untuk memanfaatkan navigasi dropdown Bootstrap. Itu tidak termasuk file Bootstrap JS dan CSS yang diperlukan - Anda harus memasukkannya secara manual.

Kepatuhan Tema WordPress.org

Panduan ini sepenuhnya mematuhi semua pedoman Tinjauan Tema untuk pengiriman tema wordpress.org. Tidak memerlukan modifikasi agar sesuai, tetapi Anda dapat mengganti domain teks wp-bootstrap-navwalker (yang muncul dua kali dalam fungsi fallback ) dengan domain teks tema Anda.

Tingkatkan Catatan

Antara versi 3 dan versi 4 walker terdapat perubahan signifikan pada basis kode. Walker versi 4 dibuat untuk bekerja dengan Bootstrap 4 dan belum diuji kompatibilitasnya dengan Bootstrap 3. Cabang terpisah untuk Bootstrap 3 dipertahankan di sini: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/tree/v3-branch

Berikut adalah daftar perubahan yang paling menonjol:

Nama file telah diubah dan diawali dengan class- agar lebih sesuai dengan konvensi penamaan standar pengkodean PHP.
- Nama Baru: class-wp-bootstrap-navwalker.php
- Nama Lama: wp-bootstrap-navwalker.php
Penanganan pengubah ikon dan tautan kini dilakukan melalui input item menu CSS Classes , bukan input Title .
Item hanya ikon dimungkinkan menggunakan kelas ikon yang dikombinasikan dengan nama kelas sr-only .

Instalasi

Tempatkan class-wp-bootstrap-navwalker.php di folder tema WordPress Anda /wp-content/themes/your-theme/

Buka file function.php tema WordPress Anda - /wp-content/themes/your-theme/functions.php - dan tambahkan kode berikut:

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

Jika Anda mengalami kesalahan dengan kode di atas, gunakan pemeriksaan seperti ini untuk mengembalikan kesalahan bersih guna membantu mendiagnosis masalah.

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

Anda juga perlu mendeklarasikan menu baru di file functions.php Anda jika belum ada.

 register_nav_menus ( array (
    ' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) );

Penggunaan

Tambahkan atau perbarui fungsi wp_nav_menu() apa pun di tema Anda (sering ditemukan di header.php ) untuk menggunakan walker baru dengan menambahkan item 'walker' ke array args wp_nav_menu.

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with dropdowns.
    ' container '       => ' div ' ,
    ' container_class ' => ' collapse navbar-collapse ' ,
    ' container_id '    => ' bs-example-navbar-collapse-1 ' ,
    ' menu_class '      => ' navbar-nav mr-auto ' ,
    ' fallback_cb '     => ' WP_Bootstrap_Navwalker::fallback ' ,
    ' walker '          => new WP_Bootstrap_Navwalker (),
) );

Menu Anda sekarang akan diformat dengan sintaks dan kelas yang benar untuk mengimplementasikan navigasi dropdown Bootstrap.

Biasanya menu dibungkus dengan markup tambahan, berikut adalah contoh menu fixed-top yang diciutkan untuk navigasi responsif di md breakpoint.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu ( array (
            ' theme_location '    => ' primary ' ,
            ' depth '             => 2 ,
            ' container '         => ' div ' ,
            ' container_class '   => ' collapse navbar-collapse ' ,
            ' container_id '      => ' bs-example-navbar-collapse-1 ' ,
            ' menu_class '        => ' nav navbar-nav ' ,
            ' fallback_cb '       => ' WP_Bootstrap_Navwalker::fallback ' ,
            ' walker '            => new WP_Bootstrap_Navwalker (),
        ) );
        ?>
    </div>
</nav>

Untuk mengubah gaya menu Anda, tambahkan nama kelas nav Bootstrap ke deklarasi menu_class .

Tinjau opsi di dokumen Bootstrap untuk informasi lebih lanjut tentang kelas navigasi.

Menampilkan Menu

Untuk menampilkan menu, Anda harus mengaitkan menu Anda dengan lokasi tema Anda. Anda dapat melakukan ini dengan memilih lokasi tema Anda di daftar Lokasi Tema saat mengedit menu di pengelola menu WordPress.

Menjadikan Walker ini sebagai Walker Default untuk Menu Nav

Ada minat untuk menjadikan walker ini sebagai walker default untuk semua menu. Hal ini dapat mengakibatkan beberapa situasi yang tidak terduga, namun hal ini dapat dicapai dengan menambahkan fungsi ini ke file function.php Anda.

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

Memperbarui walker saja mungkin tidak cukup untuk membuat menu berfungsi dengan benar, Anda mungkin perlu menambahkan wrapper atau kelas tambahan, Anda juga dapat melakukannya melalui fungsi di atas.

Penggunaan dengan Bootstrap 5

Bootstrap 5 menggunakan atribut data dengan namespace. Semua atribut data sekarang menyertakan bs sebagai infiks. Atribut baru berfungsi sama seperti atribut lama. Berikut tombol alih menu dari contoh di atas dengan atribut data yang diganti namanya.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

Walker juga menambahkan atribut data untuk tombol dropdown melalui metode start_el() . Rekatkan ini ke function.php Anda untuk membuat walker menggunakan atribut data yang diinfikskan.

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

Penyimpanan Menu

Di beberapa situs, membuat menu besar yang jarang berubah pada setiap permintaan halaman adalah biaya tambahan yang mungkin ingin Anda hindari. Dalam kasus tersebut saya dapat menyarankan Anda melihat hasil menu penyimpanan sementara.

Kelemahan terbesar untuk menyimpan cache menu nav dengan metode ini adalah ia tidak dapat dengan mudah menerapkan kelas .current-menu-item atau kelas .active ke item yang sedang aktif karena WP memutuskan apa yang sedang aktif saat memuat halaman - dan karena menu di-cache ia hanya mengetahui halaman aktif yang awalnya di-cache.

Anda dapat memutuskan sendiri apakah Anda ingin menerima kekurangan tersebut demi menghilangkan waktu pembuatan menu pada sebagian besar pemuatan halaman. Anda dapat mengikuti artikel oleh Dave Clements ini untuk melihat bagaimana kami menyimpan cache menu nav yang dihasilkan oleh walker ini: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

Pastikan untuk menyetel argumen echo ke FALSE dalam panggilan the wp_nav_menu() saat melakukan ini sehingga hasilnya dapat disimpan alih-alih di-echo ke halaman.

Lihat juga:

https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

Ekstra

Skrip ini menyertakan kemampuan untuk menggunakan mod tautan nav Bootstrap di menu Anda melalui UI menu WordPress. Tautan yang dinonaktifkan, header dropdown, dan pembagi dropdown didukung. Selain itu, dukungan ikon sudah ada di dalamnya untuk Glyphicons dan Font Awesome (catatan: Anda perlu menyertakan lembar gaya atau aset ikon secara terpisah).

Ikon

Untuk menambahkan Ikon ke tautan Anda cukup masukkan nama kelas Glyphicons atau Font Awesome di bidang tautan Kelas CSS di Menu UI dan kelas walker akan melakukan sisanya. Yaitu glyphicons glyphicons-bullhorn atau fa fa-arrow-left atau fas fa-arrow-left .

Item Khusus Ikon

Untuk membuat item muncul dengan ikon saja, terapkan kelas pembaca layar bootstrap sr-only ke item di samping nama kelas ikon apa pun. Ini kemudian hanya akan menyembunyikan teks yang akan muncul sebagai teks tautan.

Tautan yang Dinonaktifkan

Untuk menyetel tautan yang dinonaktifkan cukup tambahkan disabled ke bidang Kelas CSS di Menu UI dan kelas walker akan melakukan sisanya. Catatan: Selain menambahkan kelas .disabled, ini juga akan mengubah tautan href menjadi # sehingga bukan tautan yang dapat diikuti.

Header Dropdown, Pembagi Dropdown & Teks Item Dropdown

Header, pembagi, dan item hanya teks dapat ditambahkan dalam dropdown dengan menambahkan Tautan Khusus dan menambahkan dropdown-header , dropdown-divider atau dropdown-item-text ke dalam input Kelas CSS . Catatan: Ini akan menghapus href pada item dan mengubahnya menjadi <span> untuk header atau <div> untuk pembagi.

Pintasan Edit Tidak Ada di Pratinjau Penyesuai

Menurut dokumentasi untuk wp_nav_menu() kita harus menyediakan instance kelas walker khusus untuk menerapkan walker khusus ke menu. Karena instance tidak dapat diserialkan JSON, hal ini akan menyebabkan pintasan edit menu tidak muncul di pratinjau Penyesuai. Untuk memperbaikinya lakukan hal berikut:

Berikan string nama kelas alih-alih instance kelas sebagai nilai untuk kunci 'walker' dalam array argumen wp_nav_menu,

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
-    'walker'          => new WP_Bootstrap_Navwalker(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

tambahkan kembali instance kelas dengan menambahkan filter ini ke functions.php Anda

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );