如何使用 Owl Carousel 创建“Recent Post”轮播

正如你们大多数人所知，WordPress 带有一个“最近的帖子”小部件，它将你最近帖子的标题拉到侧边栏中，并将它们链接到完整的帖子。 问题在于“最近的帖子”小部件非常有限。 如果您需要更优雅且功能更多的东西怎么办？ 例如，如果您想从自定义帖子类型中提取特色图片和摘录，该怎么办？ 肯定有一些插件可以做这些事情，例如 Advanced Recent Posts 或 Recent Posts Widget Extended。 事实上，有很多很棒的插件可以用来显示帖子，有些甚至可以让你设置它们的样式以匹配你的主题。

然而，查询帖子实际上是一件非常容易的事情，走 DIY 路线几乎总能保证你得到你想要的东西，并且你的轮播将被设计成完美地匹配你的主题。

在本文中，我将向您展示如何使用流行的 Owl Carousel JavaScript 库构建“Recent Posts”轮播。

让我们开始吧。 如果您正在查看 Owl Carousel 站点上的示例，您会注意到的第一件事是它们的示例是为纯 HTML 站点编写的。 为了让 Owl Carousel 在 WordPress 中工作，您必须做一些稍微不同的事情。

首先，您需要从 Owl Carousel 网站下载文件或从 Github 上 fork 文件。 在本地获得文件后，您需要将主 CSS 文件添加到主题的/css/目录中。 该文件是owl.carousel.min.css. 那里有另一个用于主题的 CSS 文件，它是owl.theme.default.min.css 。 它不是必需的文件，因此，我不会在本教程中使用它。

上传到您的主题后，文件的路径应如下所示：
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css 。

您还需要包含 JS 文件

如果您的子主题还没有/js/文件夹，请立即创建一个。 然后，将owl.carousel.min.js添加到主题的/js/目录中，使其类似于以下内容： /wp-content/themes/your-theme/js/owl.carousel.min.js 。

接下来，您需要添加一些 jQuery 来初始化和控制您的轮播

此代码将配置您对轮播的特定需求。 如果您还没有控制其他脚本配置的 JS 文件，请创建一个settings.js文件并将其放在与上述相同的/js/目录中。 这应该看起来像： /wp-content/themes/your-theme/js/settings.js 。

接下来，您将以下代码添加到同一个 JavaScript 文件并保存。 这段代码是调用轮播的原因，并告诉它要使用多少项目、是否循环、使用哪种导航以及如何响应不同的设备尺寸。

(function($) {
"use strict";

$(document).ready(function() {

$('#blog .owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
dots: false,
nav: true,
navText: ['<i class="fa fa-arrow-left fa-2x"></i>','<i class="fa fa-arrow-right fa-2x"></i>'], //Note, if you are not using Font Awesome in your theme, you can change this to Previous & Next
responsive:{
        0:{
            items:1,
            //nav:true
        },
        767:{
            items:2,
            //nav:false
        },
    }
});
})
})(jQuery);


您将需要注册并将添加的任何新文件加入队列。 如果您已经有一个settings.js或custom.js ，它应该已经在您的主题中排队。 但是，因为您要添加至少两个新文件（ owl.carousel.min.css和owl.carousel.min.js ），所以您需要打开主题的functions.php并将它们正确添加到您的主题中。 它应该看起来像这样：
		


add_action( 'wp_enqueue_scripts', 'yourtheme_scripts');
function yourtheme_scripts(){
wp_enqueue_script('owl.carousel', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), '1.0.0', true );
wp_enqueue_script('settings', get_template_directory_uri() . '/js/settings.js', array(), '1.0.0', true );
}

function yourtheme_styles() {
wp_register_style('owl-carousel', get_template_directory_uri() .'/css/owl.carousel.css', array(), null, 'all' );
wp_enqueue_style( 'owl-carousel' );
}
add_action( 'wp_enqueue_scripts', 'yourtheme_styles' );


将在您的页面上显示轮播的 HTML 和 PHP
此部分可能会有所不同，具体取决于您的主题设置方式以及您想要放置轮播的位置。 我将使用我使用 Bootstrap 构建的自定义模板。 您的第一步是确定您希望轮播显示在哪里。 如果你希望它出现在你的主页上，你应该寻找home.php或frontpage.php 。 名称因主题而异，因此请确保您了解主题的结构并编辑正确的文件。 一旦你知道要编辑什么文件，你应该在你的子主题中制作一个副本，并确保它位于相同的目录结构中。 例如，如果文件位于名为templates的目录中，请确保在与父主题相同的位置创建名为templates的文件夹。
		


准备就绪后，您可以在适当的位置添加以下内容。 在我的文件中，我将它添加到我的frontpage.php的底部，以便它显示在我网站的页脚上方。
<!-- ============ BLOG CAROUSEL START ============ -->
<section id="blog">
  <div class="container">
     <div class="row"> <!-- this is the carousel’s header row -->
        <div class="col-sm-12 text-center">
           <h5>Recent posts</h5>
           <h1>Blog</h1>
        </div>
     </div>
     <div class="row"> <!-- this row starts the carousel-->
        <div class="col-sm-12">
           <div class="owl-carousel">
              <!-- query the posts to be displayed -->
              <?php $loop = new WP_Query(array('post_type' => 'post', 'posts_per_page' => -1, 'orderby'=> 'ASC')); //Note, you can change the post_type to a CPT and set the number to pull and order to display them in here. ?>
              <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                 <div class="recent-post"> <!-- I don’t have any unique css here, just needed to make sure every recent post gets wrapped as a block element.  However, you may want to add your own css here... -->
                    <?php
<a href="<?php print get_permalink($post->ID) ?>">
              <?php echo the_post_thumbnail(); ?></a>
              <h4><?php print get_the_title(); ?></h4>
              <?php print get_the_excerpt(); ?><br />
          <p><a class="btn btn-default" href="<?php print get_permalink($post->ID) ?>">More</a></p>
</div> <!-- End the Recent Post div -->
              <?php endwhile; ?>
           </div> <!-- End the Owl Carousel div -->
        </div> <!-- End the recent posts carousel row -->
        <div class="row"> <!-- start of new row for the link to the blog -->
           <div class="col-sm-12 text-center">
              <a href="blog.html" class="btn btn-primary">Read All Posts</a>
           </div>
        </div>
     </div> <!-- End blog button row -->
</section>  <!-- ============ RECENT POSTS CAROUSEL END ============ -->


完成后，您应该有一个轮播，显示帖子的特色图片、标题、摘录，以及一个“更多”按钮，可以将您链接到完整的博客帖子。
		



		
		
想要更多设计技巧？ 订阅布局
		
我们将每周一次将最新的设计和 WordPress 内容直接发送到您的收件箱。
		

		
		是的，请！