Cum să creați un carusel „Postări recente” folosind Owl Carusel

După cum mulți dintre voi știți, WordPress vine cu un widget „Postări recente” care va trage titlurile celor mai recente postări într-o bară laterală și le va lega la postarea completă. Problema cu aceasta este că widgetul Postări recente este foarte limitativ. Dacă ai nevoie de ceva mai elegant și cu puțin mai multă funcționalitate? De exemplu, ce se întâmplă dacă doriți să adăugați imaginea recomandată și un fragment și dintr-un tip de postare personalizat? Cu siguranță există câteva plugin-uri care vor face aceste lucruri, cum ar fi Advanced Recent Posts sau Recent Posts Widget Extended. De fapt, există o mulțime de plugin-uri grozave pentru afișarea postărilor și unele vă vor permite chiar să le modelați pentru a se potrivi cu tema dvs.

Cu toate acestea, interogarea postărilor este de fapt un lucru destul de ușor de făcut și a merge pe calea bricolajului vă va garanta aproape întotdeauna că obțineți exact ceea ce doriți și că caruselul dvs. va fi stilat pentru a se potrivi perfect cu tema dvs.

În acest articol, vă voi arăta cum să construiți un carusel „Postări recente” folosind populara bibliotecă JavaScript Owl Carousel.

Să începem. Dacă examinați exemplele de pe site-ul Owl Carousel, primul lucru pe care îl veți observa este că exemplele lor sunt scrise pentru un site HTML simplu. Pentru ca Owl Carousel să funcționeze în WordPress, va trebui să faceți lucrurile ușor diferit.

Mai întâi, trebuie să descărcați fișierele de pe site-ul Owl Carousel sau să le transferați din Github. Odată ce aveți fișierele la nivel local, veți dori să adăugați fișierul CSS principal în directorul /css/ al temei. Fișierul este owl.carousel.min.css. Există un alt fișier CSS acolo pentru o temă și este owl.theme.default.min.css . Nu este un fișier obligatoriu, prin urmare, nu îl voi folosi în acest tutorial.

Odată încărcat în tema dvs., calea către fișier ar trebui să arate cam așa:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

De asemenea, trebuie să includeți fișierele JS

Dacă tema copilului dvs. nu are deja un folder /js/ , continuați și creați unul acum. Apoi, adăugați owl.carousel.min.js în directorul /js/ al temei dvs., astfel încât să arate așa cum urmează: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Apoi, trebuie să adăugați niște jQuery care inițializează și controlează caruselul

Acest cod va configura nevoile dvs. specifice ale caruselului. Dacă nu aveți deja un fișier JS care să controleze alte configurații de script, creați un fișier settings.js și puneți-l în același director /js/ ca mai sus. Ar trebui să arate ceva de genul: /wp-content/themes/your-theme/js/settings.js .

Apoi, veți adăuga următorul cod la același fișier JavaScript și veți salva. Acest cod este cel care efectuează apelul către carusel și îi spune câte elemente să folosească, dacă să facă buclă sau nu, ce fel de navigare să folosească și cum să răspundă la diferite dimensiuni ale dispozitivului.

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


Va trebui să vă înregistrați și să puneți în coadă toate fișierele noi adăugate. Dacă ați avut deja un settings.js sau custom.js , ar trebui să fie deja pus în coadă în tema dvs. Cu toate acestea, deoarece adăugați cel puțin două fișiere noi ( owl.carousel.min.css și owl.carousel.min.js ), va trebui să deschideți functions.php ale temei și să le adăugați corect la tema. Ar trebui să arate cam așa:
		


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 care vor afișa caruselul pe pagina ta
Această secțiune poate varia în funcție de modul în care este configurată tema și unde doriți să puneți caruselul. Voi folosi un șablon personalizat pe care l-am creat folosind Bootstrap. Primul pas aici este să determinați unde doriți să apară caruselul. Dacă doriți să fie pe pagina dvs. de pornire, ar trebui să căutați home.php sau frontpage.php . Numele variază de la temă la temă, așa că asigurați-vă că înțelegeți structura temei și editați fișierul potrivit. Odată ce știți ce fișier să editați, ar trebui să faceți o copie a acestuia în tema copilului și să vă asigurați că se află în aceeași structură de directoare. De exemplu, dacă fișierul se află într-un director numit templates , asigurați-vă că creați un folder numit templates în aceeași locație cu tema părinte.
		


Odată ce sunteți gata de plecare, puteți adăuga următoarele în locația potrivită. În fișierul meu, am adăugat acest lucru în partea de jos a paginii mele frontpage.php , astfel încât să se afișeze chiar deasupra subsolului site-ului meu.
<!-- ============ 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 ============ -->


Când ați terminat, ar trebui să aveți un carusel care să arate imaginea prezentată, titlul, fragmentul postării și un buton „Mai multe” care vă leagă la articolul complet de pe blog.
		



		
		
Vrei mai multe sfaturi de design? Abonați-vă la The Layout
		
Vom trimite cel mai nou design și conținut WordPress direct în căsuța dvs. de e-mail, o dată pe săptămână.
		

		
		Da, te rog!