我有一个滑块，我已经在我的wordpress项目中添加了它，并且按照我的预期工作正常。
我如何在没有插件的情况下添加滑块
我在以下文件中输入了以下代码..
/*.........HEADER.PHP......*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
/*............... FOOTER.PHP ...........*/
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
/*.................... INDEX.PHP ........................*/
<div class="wrapper">
<div class="cont col-12 col-m-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active col-12">
<img src="<?php bloginfo('stylesheet_directory')? >/images/demo/slider/sdslider-1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis. </p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic3.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic2.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic1.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
<div class="item col-12">
<img src="<?php bloginfo('stylesheet_directory')?>/images/demo/slider/pic4.jpg" width="100%">
<div class="carousel-caption">
<h2>Headline</h2>
<p>Attincidunt vel nam a maurisus lacinia consectetus magnisl sed ac morbi. Inmaurisus habitur pretium eu et ac vest penatibus id lacus parturpis.</p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified col-12">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">College Overview</a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Our Collaborators</a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Workshops</a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Guest Lectures</a></li>
<li data-target="#myCarousel" data-slide-to="4"><a href="#">Industrial Visits</a></li>
</ul>
</div><!-- End Carousel -->
</div>
</div>
因此，通过在php文件中添加这些代码，滑块工作正常。
那么问题是什么？
问题是我在index.php中输入的代码，我想在wordpress页面添加代码。因为如果我将我的代码保留在index.php中，那么将来我必须使用filezila上传新图像，所以我想在wordpress页面中添加html而不是index.php。
我尝试将index.php的代码添加到wordpress页面但是该方法不起作用，不知道是什么原因。我试图找到解决方案，但没有得到足够的答案。
答案 0 :(得分：1)
这是因为您无法在Wordpress中直接使用PHP代码。简单的方法是将您的javascript和css代码放在Wordpress主题的header.php或footer.php文件中。
最好是将所有css文件和代码保存在footer.php中的header.php和javascript文件和代码中。
/*....WP-Content/Themes/Selected-Theme/header.php ...*/
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
#myCarousel .nav a small {
display:block;
}
#myCarousel .nav {
background:#eee;
}
#myCarousel .nav a {
border-radius:0px;
}
</style>
/*....WP-Content/Themes/Selected-Theme/footer.php ...*/
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"> </script>
<script type="text/javascript">
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 400000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>
然后在您的轮播代码更新滑块[image src =＆＃34;＆＃34;]中显示完整网址，根据您的直播网站，如下所示：
<img src="http://YOUR-WP-WEBSITE/wp-content/themes/YOUR-THEME-DIRECTORY/images/demo/slider/sdslider-1.jpg" width="100%">
在轮播代码中更新图像路径后，您可以通过WP-Admin将其粘贴到任何页面中。
注意：Wordpress还添加了段落＆＃34; p＆＃34;标签会自动产生引导滑块的问题。如果发生这种情况，那么您需要将代码放在主题的functions.php文件中。取自here
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );