Bootstrapmenu in Wordpress einbinden

micr0 · 13.10.2013

Hallo liebe PSDler,

ich brauche mal wieder eure Hilfe. Ich versuche gerade die Responsive Bootstrap-Navi in ein Wordpress-Theme einzubinden. Die Navigation wird korrekt angezeigt und wenn man den Browser verkleinert, dann verschwinden auch die einzelnen Menupunkte und es erscheint ein Button. Leider öffnet sich der Button nicht wenn man diesen anklickt…

Ich bin kurz davor die Navigation voll funktionsfähig zu haben. Wer kann mir weiterhelfen? Es muss nur noch der Inhalt angezeigt werden.

Link zur Seite:
http://wp1148966.server-he.de/sfc/wordpress/index.php/volleyball/

Code im Volleyball-Template:

HTML:

  <!--  bootstrapmenu-->  

<!-- START menu -->
<nav class="navbar navbar-inverse" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <a class="navbar-brand" href="#">Volleyball </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
        <?php
        wp_nav_menu( array(
            'theme_location' => 'volleyball-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 --> 
</nav>

Hat jemand eine Idee?
Gruß micr0

cythux · 13.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Diese Typ könnte die Weiterhelfen für Version 3, kann jedoch auch eventuell noch für Version 2 von Bootstrap funktionieren

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Oh, auf dieses Tut bin ich noch gar nicht gestoße. Werde idhc heute Abend sofort ausprobieren. Vielen Dank

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Ist auch erst ganz frisch raus, war auch die ganze Zeit schon bei meinem Bootstrap Theme am tüfteln mit Nav_Walker, wobei ich auch noch SASS/Compass nutze

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Ok Leider funktioniert das auch nicht. Verflucht!! Ich check nicht woran das liegt! Hajajay!

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

http://roots.io/ vielleicht hilft dies hier, ist ein Framework eventuell hilft es ja

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Hallo cythux,
Danke für deine Hilfe und deine Bemühungen. Das Framework hilft mir leider nicht weiter

Der witz an der Sache ist ja das alle Klassen von bootstrap etc. angewendet werden... Ich vermute das irgendwie die .js nicht geladen wird... Kann man das irgendwie testen? Also ob js-script geladen wird oder nicht?

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Bei Chrome geht zumindest unter den Entwicklertools, bei FF braucht man Firebug glaube ich

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Firebug habe ich. Wo kann ic hdas sehen?

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Müsste unter network stehen, was alles geladen wird

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Okay. Hier kommt ein Foto:

Drüber steht ja aber query version 1.8.3 dann wäre das ja egal oder?

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

JQuery ist 1.8.3 das wird von WP ja selber genutzt,
was dort nicht steht ist das die bootstrap.min.js zb nicht geladen ist

http://www.bootstrapcdn.com/

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Habe jetzt den Link eingefügt, Script wird immer noch nicht geladen.
Was ist das los? Ich Peil nichts mehr! Wir sind kurz davor!

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

so binde ich bei mir dir Scripte uns stylesheet ein, ist jedoch noch nicht final aus meiner Fassung

PHP:

require_once locate_template('/inc/script.php');          // Scripts and stylesheets

PHP:

<?php
/**
 * Enqueue scripts and stylesheets
 *
 * Enqueue stylesheets in the following order:
 * 1. /theme/assets/css/main.min.css
 *
 * Enqueue scripts in the following order:
 * 1. jquery-1.10.2.min.js via Google CDN
 * 2. /theme/assets/js/vendor/modernizr-2.6.2.min.js
 * 3. /theme/assets/js/main.min.js (in footer)
 */

function bootstrap_scripts() {
  wp_enqueue_style('bootstrap_main', get_template_directory_uri() . '/css/bootstrap.css', false, 'c9f2155733c68254f446eb06faa23581');

  wp_enqueue_style('bootstrap_main', get_template_directory_uri() . '/css/app.css', false, 'c9f2155733c68254f446eb06faa23581');

  // jQuery is loaded using the same method from HTML5 Boilerplate:
  // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
  // It's kept in the header instead of footer to avoid conflicts with plugins.
  if (!is_admin() && current_theme_supports('jquery-cdn')) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, false);
    add_filter('script_loader_src', 'bootstrap_jquery_local_fallback', 10, 2);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_register_script('modernizr', get_template_directory_uri() . '/js/vendor/modernizr-2.6.2.min.js', false, null, false);
  wp_register_script('bootstrap_scripts', get_template_directory_uri() . '/js/scripts.min.js', false, '2a3e700c4c6e3d70a95b00241a845695', true);
  wp_enqueue_script('modernizr');
  wp_enqueue_script('jquery');
  wp_enqueue_script('bootstrap_scripts');
}
add_action('wp_enqueue_scripts', 'bootstrap_scripts', 100);

// http://wordpress.stackexchange.com/a/12450
function bootstrap_jquery_local_fallback($src, $handle) {
  static $add_jquery_fallback = false;

  if ($add_jquery_fallback) {
    echo '<script>window.jQuery || document.write(\'<script src="' . get_template_directory_uri() . '/js/vendor/jquery-1.10.2.min.js"><\/script>\')</script>' . "\n";
    $add_jquery_fallback = false;
  }

  if ($handle === 'jquery') {
    $add_jquery_fallback = true;
  }

  return $src;
}

function bootstrap_google_analytics() { ?>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','<?php echo GOOGLE_ANALYTICS_ID; ?>');ga('send','pageview');
</script>

<?php }
if (GOOGLE_ANALYTICS_ID) {
  add_action('wp_footer', 'bootstrap_google_analytics', 20);
}

micr0 · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

Hey cythux!
Sag mir deine Adresse, und ich schicke dir einen 6er! FOR THE WIN!
Das mit dem Link hat geklappt. Irgendwie waren da noch die cookies im Spiel. Also alles läuft gerade so wie es soll!!!!!

Ich schick dir dann nochmal die Tage ein PN wie ich das am besten richtig und Stabil auf meinem Server verlinke ok?

Kann ich die iwo ein pluspunkt geben oder so?

Vielen Dank

Die ladezeiten der Seite sind jetzt deutlich spürbar. Liegt das an dem Link zu bootstrap?

cythux · 14.10.2013

AW: Bootstrapmenu in Wordpress einbinden

yo kein Ding, helfe gerne

meine FB Page ist noch in der Mache