Come creare un carosello "Post recenti" utilizzando Owl Carousel

Come molti di voi sanno, WordPress viene fornito con un widget "Post recenti" che inserirà i titoli dei tuoi post più recenti in una barra laterale e li collegherà al post completo. Il problema è che il widget Post recenti è molto limitante. E se avessi bisogno di qualcosa di un po' più elegante e con un po' più di funzionalità? Ad esempio, cosa succede se si desidera inserire l'immagine in evidenza e un estratto e da un tipo di post personalizzato? Ci sono sicuramente alcuni plugin là fuori che faranno queste cose, come Advanced Recent Posts o Recent Posts Widget Extended. In effetti, ci sono molti ottimi plugin là fuori per la visualizzazione di post e alcuni ti permetteranno persino di adattarli allo stile in base al tuo tema.

Tuttavia, interrogare i post è in realtà una cosa abbastanza facile da fare e seguire la strada del fai-da-te ti garantirà quasi sempre di ottenere esattamente ciò che desideri e che il tuo carosello sarà disegnato per adattarsi perfettamente al tuo tema.

In questo articolo, ti mostrerò come creare un carosello "Post recenti" utilizzando la popolare libreria JavaScript Owl Carousel.

Iniziamo. Se stai esaminando gli esempi sul sito Owl Carousel, la prima cosa che noterai è che i loro esempi sono scritti per un semplice sito HTML. Per far funzionare Owl Carousel in WordPress, dovrai fare le cose in modo leggermente diverso.

Innanzitutto, devi scaricare i file dal sito Owl Carousel o eseguirne il fork da Github. Una volta che hai i file localmente, vorrai aggiungere il file CSS principale alla directory /css/ del tuo tema. Quel file è owl.carousel.min.css. C'è un altro file CSS per un tema ed è owl.theme.default.min.css . Non è un file richiesto, quindi non lo userò in questo tutorial.

Una volta caricato sul tuo tema, il percorso del file dovrebbe assomigliare a questo:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

Devi anche includere i file JS

Se il tuo tema figlio non ha già una cartella /js/ , vai avanti e creane una ora. Quindi, aggiungi owl.carousel.min.js alla directory /js/ del tuo tema in modo che assomigli a quanto segue: /wp-content/themes/your-theme/js/owl.carousel.min.js .

Successivamente, devi aggiungere alcuni jQuery che inizializzino e controllino il tuo carosello

Questo codice configurerà le tue esigenze specifiche del carosello. Se non disponi già di un file JS che controlla altre configurazioni di script, crea un file settings.js e inseriscilo nella stessa directory /js/ di cui sopra. Dovrebbe assomigliare a: /wp-content/themes/your-theme/js/settings.js .

Successivamente, aggiungerai il codice seguente allo stesso file JavaScript e lo salverai. Questo codice è ciò che effettua la chiamata al carosello e indica quanti elementi utilizzare, se eseguire o meno il ciclo, che tipo di navigazione utilizzare e come rispondere alle diverse dimensioni del dispositivo.

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


Dovrai registrarti e accodare tutti i nuovi file aggiunti. Se avevi già un settings.js o custom.js , dovrebbe essere già accodato nel tuo tema. Tuttavia, poiché stai aggiungendo almeno due nuovi file ( owl.carousel.min.css e owl.carousel.min.js ), dovrai aprire functions.php del tuo tema e aggiungerli correttamente al tuo tema. Dovrebbe assomigliare a qualcosa di simile a questo:
		


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


L'HTML e il PHP che visualizzeranno il carosello sulla tua pagina
Questa sezione può variare a seconda di come è impostato il tuo tema e di dove vuoi mettere il carosello. Utilizzerò un modello personalizzato che ho creato utilizzando Bootstrap. Il tuo primo passo qui è determinare dove vuoi che venga visualizzato il carosello. Se vuoi che sia sulla tua home page, dovresti cercare home.php o frontpage.php . Il nome varia da tema a tema, quindi assicurati di comprendere la struttura del tuo tema e di modificare il file corretto. Una volta che sai quale file modificare, dovresti farne una copia nel tuo tema figlio e assicurarti che risieda nella stessa struttura di directory. Ad esempio, se il file risiede in una directory denominata templates , assicurati di creare una cartella denominata templates nella stessa posizione del tema principale.
		


Una volta che sei pronto per partire, puoi aggiungere quanto segue nella posizione appropriata. Nel mio file, l'ho aggiunto in fondo al mio frontpage.php in modo che venga visualizzato appena sopra il piè di pagina del mio sito.
<!-- ============ 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 ============ -->


Al termine, dovresti avere un carosello che mostra l'immagine in primo piano, il titolo, l'estratto del post e un pulsante "Altro" che ti collega all'intero post del blog.
		



		
		
Vuoi altri suggerimenti per il design? Iscriviti a Il layout
		
Invieremo il design più fresco e i contenuti WordPress direttamente alla tua casella di posta, una volta alla settimana.
		

		
		Sì grazie!