Jak utworzyć karuzelę „Ostatni post” za pomocą karuzeli Owl Carousel

Jak większość z was wie, WordPress jest wyposażony w widżet „Ostatnie posty”, który przeciąga tytuły najnowszych postów na pasek boczny i łączy je z pełnym postem. Problem polega na tym, że widżet Ostatnie wpisy jest bardzo ograniczony. A jeśli potrzebujesz czegoś bardziej eleganckiego i nieco bardziej funkcjonalnego? Na przykład, co zrobić, jeśli chcesz pobrać wyróżniony obraz i fragment, a także z niestandardowego typu posta? Na pewno istnieją wtyczki, które wykonują te czynności, takie jak Advanced Recent Posts lub Recent Posts Widget Extended. W rzeczywistości istnieje wiele świetnych wtyczek do wyświetlania postów, a niektóre pozwalają nawet dopasować je do motywu.

Jednak odpytywanie postów jest w rzeczywistości dość łatwą rzeczą do zrobienia, a podążanie drogą DIY prawie zawsze gwarantuje, że otrzymasz dokładnie to, czego chcesz, a Twoja karuzela będzie idealnie dopasowana do Twojego motywu.

W tym artykule pokażę, jak zbudować karuzelę „Ostatnie posty” przy użyciu popularnej biblioteki JavaScript Owl Carousel.

Zacznijmy. Jeśli przeglądasz przykłady w witrynie Owl Carousel, pierwszą rzeczą, jaką zauważysz, jest to, że ich przykłady są napisane dla zwykłej witryny HTML. Aby Owl Carousel działała w WordPressie, będziesz musiał zrobić rzeczy nieco inaczej.

Najpierw musisz pobrać pliki ze strony Owl Carousel lub rozwidlić je z Github. Gdy masz już pliki lokalnie, będziesz chciał dodać główny plik CSS do katalogu /css/ motywu. Ten plik to owl.carousel.min.css. Jest tam inny plik CSS dla motywu i jest to owl.theme.default.min.css . Nie jest to wymagany plik, dlatego nie zamierzam go używać w tym samouczku.

Po przesłaniu do motywu ścieżka do pliku powinna wyglądać mniej więcej tak:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Musisz również dołączyć pliki JS

Jeśli Twój motyw potomny nie ma jeszcze folderu /js/ , śmiało utwórz go teraz. Następnie dodaj owl.carousel.min.js do katalogu /js/ twojego motywu, aby wyglądał mniej więcej tak: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Następnie musisz dodać trochę jQuery, które inicjuje i kontroluje Twoją karuzelę

Ten kod skonfiguruje Twoje specyficzne potrzeby karuzeli. Jeśli nie masz jeszcze pliku JS, który kontroluje inne konfiguracje skryptów, utwórz plik settings.js i umieść go w tym samym katalogu /js/ , co powyżej. To powinno wyglądać mniej więcej tak: /wp-content/themes/your-theme/js/settings.js .

Następnie dodasz następujący kod do tego samego pliku JavaScript i zapisz. Ten kod powoduje wywołanie karuzeli i informuje, ile elementów należy użyć, czy należy wykonać pętlę, jakiego rodzaju nawigacji należy użyć i jak reagować na różne rozmiary urządzeń.

(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);


Będziesz musiał się zarejestrować i umieścić w kolejce wszystkie dodane nowe pliki. Jeśli masz już plik settings.js lub custom.js , powinien być już umieszczony w kolejce w Twoim motywie. Jednakże, ponieważ dodajesz co najmniej dwa nowe pliki ( owl.carousel.min.css i owl.carousel.min.js ), będziesz musiał otworzyć plik functions.php Twojego motywu i odpowiednio dodać je do motywu. Powinno to wyglądać mniej więcej tak:
		


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 i PHP, które będą wyświetlać karuzelę na Twojej stronie
Ta sekcja może się różnić w zależności od konfiguracji motywu i miejsca, w którym chcesz umieścić karuzelę. Będę używał niestandardowego szablonu, który zbudowałem za pomocą Bootstrap. Pierwszym krokiem jest określenie, gdzie ma się pojawiać karuzela. Jeśli chcesz, aby był na Twojej stronie głównej, powinieneś poszukać home.php lub frontpage.php . Nazwa różni się w zależności od motywu, więc upewnij się, że rozumiesz strukturę motywu i edytuj odpowiedni plik. Gdy już wiesz, który plik edytować, powinieneś zrobić jego kopię w motywie potomnym i upewnić się, że znajduje się on w tej samej strukturze katalogów. Na przykład, jeśli plik znajduje się w katalogu o nazwie templates , upewnij się, że tworzysz folder o nazwie templates w tej samej lokalizacji, co motyw nadrzędny.
		


Gdy będziesz gotowy do pracy, możesz dodać następujące elementy w odpowiedniej lokalizacji. W moim pliku dodałem to na dole mojego frontpage.php , aby wyświetlał się tuż nad stopką mojej witryny.
<!-- ============ 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 ============ -->


Po zakończeniu powinieneś mieć karuzelę, która pokazuje polecany obraz, tytuł, fragment i przycisk „Więcej”, który prowadzi do pełnego posta na blogu.
		



		
		
Chcesz więcej wskazówek dotyczących projektowania? Subskrybuj układ
		
Raz w tygodniu wyślemy najświeższy projekt i treść WordPress prosto do Twojej skrzynki odbiorczej.
		

		
		Tak proszę!