Nefunkční resp. menu na bootstrapu

Úvodní stránka Fórum podpory WordPressu Šablony, CSS (zobrazení webu) Nefunkční resp. menu na bootstrapu

Zvolené téma obsahuje celkem 5 odpovědí. Do diskuze (2 účastníci) se naposledy zapojil uživatel  admin a poslední změna je stará 8 let, 10 měsíců.

Aktuálně je na stránce zobrazeno 6 příspěvků - 1. až 6. (z celkem 6)
  • Autor
    Příspěvky
  • #23236

    jjp
    Participant

    Zdravím,
    koduji šablonu pro wordpress postavenou na bootstrapu. Bohužel jsem se zasekl u responsivního menu, které se mi nechce po kliknutí na to “burger” tlačítko zobrazit. Procházím kód, porovnávám jej s dokumentací, návodem atd., ale nemůžu najít problém, proč to nefunguje.

    Pracuji podle tohoto návodu, kdy jsem většinu kodu zkopíroval: http://www.pattonwebz.com/wordpress-custom/bootstrap-wordpress-responsive-menu/

    Samozřejmě mám stažený i ten “Navwalker” a ve functions.php jej zaregistrovaný.

    <div id="header-wrapper">
          <div id="header-pic">  
            <nav class="navbar navbar-default">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
     
                  <a class="navbar-brand" href="<?php home_url(); ?>"><?php bloginfo('name'); ?> </a>
                </div>
                
                 <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="navbar-ex1-collapse">
                  <?php
                  wp_nav_menu( array(
                      'theme_location' => 'header-menu',
                      'depth' => 2,
                      'container' => false,
                      'menu_class' => 'nav navbar-nav',
                      'fallback_cb' => 'wp_page_menu',
                      //Process nav menu using our custom nav walker
                      'walker' => new wp_bootstrap_navwalker())
                  );
                  ?>
                </div><!-- /.navbar-collapse --> 
                
              </div>
            </nav>
          </div>
        </div>

    Bohužel netuším, kde může být chyba. Přijde mi ten kód v pořádku a správný, takže jsem už v koncích a budu rád za radu a pomoc.

    Děkuji moc

    #23262

    admin
    Keymaster
    Web

    Je možné to někde vidět a vyzkoušet?

    #23269

    jjp
    Participant

    Momentálně bohužel zatím ne, jelikož s tím pracuji na localu. Každopádně to menu se na desktopu zobrazí, po změně okna prohlížeče se zobrazí i ta burger ikonka, ale po kliknutí se nic neděje :(

    #23270

    jjp
    Participant

    Zdravím,
    tak přemýšlím, jestli není problém v tom, že jsem se řídil základní bootstrap šablonou dle dokumentace a do souboru “footer.php” jsem vložil toto:

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="bootstrap/js/bootstrap.min.js"></script>

    Tím je deklarace pro javascript bootstrapu v jiném souboru pro patičku a možná s tím wordpress tak neumí pracovat.

    Jak ale ten javascript jinak vložit, aby to bylo správně i pro bootstrap a wp? Když jej vložím na začátek pod body tak mám obavy, aby to nemělo vliv na rychlost nebo na něco.

    Díky.

    #23281

    jjp
    Participant

    Tak ano, v tom byl asi ten problém.

    Smazal jsem to tedy z footer.php a místo toho dal do header.php:

    <?php wp_enqueue_script("jquery"); ?>

    a do functions.php:

    <?php 
    /* Registrace bootstrap javascriptu*/
    
    function wpbootstrap_scripts_with_jquery()
    {
    	// Register the script like this for a theme:
    	wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
    	// For either a plugin or a theme, you can then enqueue the script:
    	wp_enqueue_script( 'custom-script' );
    }
    add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
    
    ?>

    Teď již to funguje.

    Sice se mi nepodařilo použít i ten druhý script který bootstrap používá z “https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”, jelikož nevím jak jej nalinkovat, ale i bez něj to funguje.

    #23372

    admin
    Keymaster
    Web

    Díky za vysvětlení. Ano, skripty se správně načítají pomocí funkcí wp_register_script() a wp_enqueue_script(), aby nedocházelo ke konfliktům. Pokud je totiž nějaký skript volán vícekrát, tak si s tím funkce snadno a automaticky poradí…

    Zbytečně tak vkládáte jQuery do záhlaví (soubor header.php).

    Následující řádek totiž už vše řeší:

    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );

    Poslední parametr obsahuje hodnotu array( 'jquery' ), což znamená, že pokud jQuery zatím nebylo načteno, tak ho musí načíst ještě před souborem pro Bootstrap. Také další zmiňovaný skript https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js nemusíte řešit, protože jQuery je součástí WordPressu a řeší ho také uvedená závislost array( 'jquery' ).

Aktuálně je na stránce zobrazeno 6 příspěvků - 1. až 6. (z celkem 6)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.

WordPress – novinky, návody a zajímavosti