Integracja Bootstrap Menu z Motywem WordPress

1 grudnia 2020
Autor Poradnika Filip



Integracja Bootstrap Menu z Motywem WordPress

Ostatnimi czasy na różnych WordPressowych stronach zacząłem widywać typowo Bootstrapowe Menu. Jest ono dość proste, za to całkowicie responsywne i dla osób znających HTML i CSS łatwe do wykonania.

Przykład:

Integracja Bootstrap Menu z Motywem WordPress Menu Bootstrap Nie Responsywne
Integracja Bootstrap Menu z Motywem WordPress Menu Bootstrap Responsywne

Po inspekcji kodu kilku takich stron zorientowałem się, że to menu używa nie tylko bootstrapowych klas menu, ale także klas menu WordPressa – znaczy to, że  jest ono w pełni edytowalne z poziomu kokpitu. Po niedługich poszukiwaniach znalazłem „Framework” umożliwiający dodanie w pełni edytowalnego Bootstrapowego menu z poziomu kokpitu WordPressa – jest to Wp-Bootstrap-Navwalker.

#1 Instalacja Wp-Bootstrap-Navwalker i integracja z WordPressem

  1. Wchodzimy na stronę https://github.com/wp-bootstrap/wp-bootstrap-navwalker, pobieramy plik „class-wp-bootstrap-navwalker.php” (przeczytaj: Jak pobrać plik z Githuba?)
  2. Wklejamy plik „class-wp-bootstrap-navwalker.php” do katalogu głównego motywu (wp-content/themes/mojmotyw/)
  3. Otwieramy plik functions.php, dodajemy takie linie kodu (najlepiej na końcu)

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

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

  1. Do pliku header.php dodajemy taki kod:
<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>

Teraz po dodaniu menu w kokpicie WordPressa będzie ono w pełni responsywne.

Integracja Bootstrap Menu z Motywem WordPress: Podsumowanie

Możliwość użycia lubianego, znanego i popularnego Bootstrapowego menu w motywie WordPress to na pewno spore ułatwienie dla deweloperów. Co o tym sądzisz? Napisz w komentarzu.





Dodaj Komentarz










Brak komentarzy.