[WORDPRESS] [BOOTSTRAP] Problem przy tworzeniu szablonu

Question

Witam, mam taki problem. Zacząłem kodować szablon do wordpressa. pociąłem wszystko na kilka części (między innymi header.php, function.php, front-page.php, footer.php). Gdy wkleiłem liniki kodu z wcześniejszego index.html do front-page.php (wraz z skryptami JS) i wczytałem szablon zrobił się taki krzak:

Adres do strony z zainstalowanym wordpressem i ową skórką:
www.optimus.webd.pl/test

a powinno być tak ( adres do strony w html/css ) :
www.optimus.webd.pl

O co tutaj chodzi? W czym jest błąd? Wydaję mi się że chodzi o animację bo jak dla pewnej klasy odciąłem animację owa rzecz była wyświetlana w porządku, lecz chcę żeby były te animację.

Używam na stronie jQuery, JS, Bootstrap <-- te biblioteki z zewnętrznych linków, oraz własnego style.css

kod front-page.php:
 

<?php
/**
 * Template name: Strona główna
 */
?>
<!-- Templatka wyglądu strony głównej-->
<?php get_header(); ?>

<!-- main home content -->
    <div id="preloader"><div class="imgcenter"><img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png"></div>
      <div id="status"></div>
    </div>
    <!--SLIDER -->
    <div id="home">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
      </li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <!-- First slide -->

      <div class="item active">
        <div class="bg">
        <div class="carousel-caption">
          <h3 class="icon-container" data-animation="animated bounceInDown">
            <span class="glyphicon glyphicon-heart"></span>
          <h3 data-animation="animated bounceInLeft">
            &ldquo;Zgrabna sylwetka - Zaczynamy pracę!&rdquo;
          </h3>
          <h3 data-animation="animated bounceInRight">
            Przeczytaj artykuł na moim blogu
          </h3>
          <button class="btn btn-primary btn-lg"
                  data-animation="animated zoomInUp">Kliknij i sprawdź</button>

        </div>
      </div>
      </div>
      <!-- /.item -->

      <!-- Second slide -->
      <div class="item">
        <div class="bg2">
        <div class="carousel-caption">
          <h3 class="icon-container" data-animation="animated bounceInDown">
            <span class="glyphicon glyphicon-scale"></span>
          </h3>
          <h3 data-animation="animated bounceInUp">
            Odpowiednio zbilansowana dieta dla Twojego organizmu
          </h3>
          <button class="btn btn-primary btn-lg"
                  data-animation="animated zoomInRight">Przeczytaj artykuł</button>
        </div>
      </div>
      </div><!-- /.item -->

      <!-- Third slide -->
      <div class="item">
        <div class="bg3">
        <div class="carousel-caption">
          <h3 class="icon-container" data-animation="animated zoomInLeft">
            <span class="	glyphicon glyphicon-ok"></span>
          </h3>
          <h3 data-animation="animated flipInX">
            Sprawdzone sumplementy
          </h3>
          <button class="btn btn-primary btn-lg"
                  data-animation="animated lightSpeedIn">Przeczytaj artykuł</button>
        </div>
      </div>
      </div><!-- /.item -->

    </div><!-- /.carousel-inner -->

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic"
       role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic"
       role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

  </div><!-- /.carousel -->
  </div>
  <div id="about">
  <div class="container-fluid1 bg-grey">
    <div class="row slideanim">
      <div class="col-sm-6">
        <div class="ramka">
        <img src="img/kuba.png" class="img-circle" alt="Cinque Terre"><br>
        <p class="opis">Po lewej Michał Karmowski, po prawej Jakub Chomej</p>
      </div>
      </div>
      <div class="col-sm-6">
        <h2>Cześć! Nazywam się Jakub Chomej :-)</h2><hr>
        <h4>Certyfikowany Trener Personalny</h4><br>
        <p class="opis2">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
          Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do
          wypełnienia tekstem próbnej książki. Pięć wieków później
          zaczął być używany przemyśle elektronicznym, pozostając praktycznie
          niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją
          arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum,
          a ostatnio z zawierającym różne wersje
          Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na
          komputerach osobistych, jak Aldus PageMaker</p>
      </div>
    </div>
  </div>
  </div>

  <div id="next">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
      <p><span class="glyphicon glyphicon-user"></span></p>
      <h2>Opinie</h2><hr>
      <div class="col-sm-3 slideanim">
        <img src="img/user.png" class="img-circle" alt="Cinque Terre" width="304" height="236"><br>
        <h3>JAN NOWAK</h3>
        <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><hr>
        <p>
          <strong>Lorem Ipsum</strong> jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle
          poligraficznym. Został po raz pierwszy użyty w XV w.
          przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</p>
      </div>
      <div class="col-sm-3 slideanim">
        <img src="img/user.png" class="img-circle" alt="Cinque Terre" width="304" height="236"><br>
        <h3>ŁUKASZ KOWALSKI</h3>
        <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><hr>
        <p>
          <strong>Lorem Ipsum</strong> jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle
          poligraficznym. Został po raz pierwszy użyty w XV w.
          przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</p>
      </div>
      <div class="col-sm-3 slideanim">
        <img src="img/user.png" class="img-circle" alt="Cinque Terre" width="304" height="236"><br>
        <h3>ZBIGNIEW JURECKI</h3>
        <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-star"></span><hr>
        <p>
          <strong>Lorem Ipsum</strong> jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle
          poligraficznym. Został po raz pierwszy użyty w XV w.
          przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</p>
      </div>
    </div>
    </div>
  </div>
  </div>
  <div id="kontakt"></div>
  <div class="container-fluid bg-grey">
    <div class="container">
      <div class="row">
      <div class="col-sm-5">
        <h2 class="text-center">Kontakt</h2><hr>
        <p>Contact us and we'll get back to you within 24 hours.</p>
        <p><span class="glyphicon glyphicon-map-marker"></span> Olsztyn, PL</p>
        <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
        <p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
      </div>
      <div class="col-sm-7">
        <div class="row">
          <div class="col-sm-6 form-group">
            <input class="form-control" id="name" name="name" placeholder="Imię i Nazwisko" type="text" required>
          </div>
          <div class="col-sm-6 form-group">
            <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
          </div>
        </div>
        <textarea class="form-control" id="comments" name="comments" placeholder="W czym mogę pomóc?" rows="5"></textarea><br>
        <div class="row">
          <div class="col-sm-12 form-group">
            <button class="btn btn-default pull-right" type="submit">Send</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <script>


  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
      if (pos < winTop + 600) {
        $(this).addClass("slide1");
      }
    });
  })(jQuery);


</script>
<script>
  (function( $ ) {

      //Function to animate slider captions
      function doAnimations( elems ) {
          //Cache the animationend event in a variable
          var animEndEv = 'webkitAnimationEnd animationend';

          elems.each(function () {
              var $this = $(this),
                  $animationType = $this.data('animation');
              $this.addClass($animationType).one(animEndEv, function () {
                  $this.removeClass($animationType);
              });
          });
      }

      //Variables on page load
      var $myCarousel = $('#carousel-example-generic'),
          $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

      //Initialize carousel
      $myCarousel.carousel();

      //Animate captions in first slide on page load
      doAnimations($firstAnimatingElems);

      //Pause carousel
      $myCarousel.carousel('pause');


      //Other slides to be animated on carousel slide event
      $myCarousel.on('slide.bs.carousel', function (e) {
          var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
          doAnimations($animatingElems);
      });

  })(jQuery);




  </script>

  <script type="text/javascript">
(function($) {
    $(window).load(function() { // czekamy, aż załaduje się cała strona
	$('#status').fadeOut(); // efekt zanikania animowanej grafiki
	$('#preloader').delay(350).fadeOut('slow'); // efekt zanikania warstwy zakrywającej stronę
	$('body').delay(350).css({'overflow':'visible'}); // dopóki nasz div#preloader jest widoczny nie ma możliwości przewijania strony
    });
})(jQuery);
</script>

 <!-- end of main home content -->

 <script>
 (function($){
    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();
            var target = this.hash,
            $target = $(target);

            $('html, body').stop().animate({
                'scrollTop': $target.offset().top
            }, 900, 'swing', function(){
                window.location.hash = target;
            });
        });
    });
})(jQuery);
</script>

<?php get_footer(); ?>

 

 kod functions.php (niecały)

<?php
/**
* Ładowanie CSS i JS
*/
function load_styles_and_scripts() {

  // loading CSS
  wp_enqueue_style(
      'bootstrap-styles',
      'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
  );

  wp_enqueue_style(
      'animate-style',
      'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'
    );

  wp_enqueue_style(
      'main-styles',
      get_template_directory_uri().'/style.css'
  );

  // loading bootstrap js
  wp_enqueue_script(
    'bootstrap-js',
    'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js',
    false,
    '3.3.7',
    true
  );

  // loading js
  wp_enqueue_script(
    'jquery',
    'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js',
    false,
    '1.12.4',
    true
  );
}

add_action('wp_enqueue_scripts', 'load_styles_and_scripts');