Owl Carousel을 사용하여 "최근 게시물" 캐러셀을 만드는 방법

대부분의 사람들이 알고 있듯이 WordPress에는 가장 최근 게시물의 제목을 사이드바로 가져와 전체 게시물에 연결하는 "최근 게시물" 위젯이 있습니다. 이것의 문제는 최근 게시물 위젯이 매우 제한적이라는 것입니다. 좀 더 우아하고 기능이 더 많은 것이 필요하다면? 예를 들어, 추천 이미지와 발췌문을 가져오고 사용자 정의 게시물 유형에서 가져오려면 어떻게 해야 합니까? Advanced Recent Posts 또는 Recent Posts Widget Extended와 같이 이러한 작업을 수행하는 플러그인이 분명히 있습니다. 사실, 게시물을 표시하기 위한 훌륭한 플러그인이 많이 있으며 일부는 테마에 맞게 스타일을 지정할 수도 있습니다.

그러나 게시물 쿼리는 실제로 매우 쉬운 일이며 DIY 경로를 사용하면 거의 항상 원하는 것을 정확하게 얻을 수 있고 캐러셀이 테마와 완벽하게 일치하도록 스타일이 지정됩니다.

이 기사에서는 인기 있는 Owl Carousel JavaScript 라이브러리를 사용하여 "최근 게시물" 캐러셀을 만드는 방법을 보여 드리겠습니다.

시작하자. Owl Carousel 사이트에서 예제를 검토하는 경우 가장 먼저 해당 예제가 일반 HTML 사이트용으로 작성되었음을 알 수 있습니다. WordPress에서 Owl Carousel이 작동하도록 하려면 약간 다르게 작업을 수행해야 합니다.

먼저 Owl Carousel 사이트에서 파일을 다운로드하거나 Github에서 포크해야 합니다. 파일이 로컬에 있으면 테마의 /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/ 폴더가 없다면 지금 바로 만드세요. 그런 다음 /wp-content/themes/your-theme/js/owl.carousel.min.js 를 테마의 /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 콘텐츠를 받은 편지함으로 바로 보내드립니다.
		

		
		예, 부탁합니다!