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">
“Zgrabna sylwetka - Zaczynamy pracę!”
</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');