Ú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ů.
-
AutorPříspěvky
-
18. května 2015 (23:42) #23236
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
19. května 2015 (17:25) #2326219. května 2015 (19:06) #23269Momentá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 :(
19. května 2015 (20:55) #23270Zdraví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.
20. května 2015 (15:29) #23281Tak 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.
27. května 2015 (14:47) #23372Dí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ý skripthttps://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ávislostarray( 'jquery' )
. -
AutorPříspěvky
Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.