如何使用 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 內容直接發送到您的收件箱。
		

		
		是的，請！