在没有任何插件的情况下在 wordpress 中添加滑块

Question

我有一个滑块，我已将它添加到我的 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页面但是那个方法不起作用，不知道是什么原因。我试图找到解决方案，但没有得到足够的答案。

Answer 1

这是因为您不能直接在 Wordpress 中使用 php 代码。简单的方法是将您的 javascript 和 css 代码放在 Wordpress 主题的 header.php 或 footer.php 文件中。

最好的办法是将所有的 css 文件和代码保存在 header.php 中，将 javascript 文件和代码保存在 footer.php 中。

/*....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=""] 中根据您的实时网站使用完整的网址，如下所示：

<img src="http://YOUR-WP-WEBSITE/wp-content/themes/YOUR-THEME-DIRECTORY/images/demo/slider/sdslider-1.jpg" width="100%">

在轮播代码中更新图像路径后，您可以通过 WP-Admin 将其粘贴到任何页面中。

注意：Wordpress 还会自动添加段落“p”标签，这可能会导致引导滑块出现问题。如果发生这种情况，那么您需要将以下代码放在主题的 functions.php 文件中。取自here

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );