Cómo crear un carrusel de "Publicación reciente" usando Owl Carousel

Como la mayoría de ustedes saben, WordPress viene con un widget de "Publicaciones recientes" que extraerá los títulos de sus publicaciones más recientes en una barra lateral y las vinculará a la publicación completa. El problema con esto es que el widget de Publicaciones recientes es muy limitante. ¿Qué pasa si necesitas algo un poco más elegante y con un poco más de funcionalidad? Por ejemplo, ¿qué sucede si desea obtener la imagen destacada y un extracto, y de un tipo de publicación personalizada? Definitivamente hay algunos complementos que harán estas cosas, como Publicaciones recientes avanzadas o Widget de publicaciones recientes extendido. De hecho, existen muchos complementos excelentes para mostrar publicaciones y algunos incluso le permitirán diseñarlos para que coincidan con su tema.

Sin embargo, consultar publicaciones es en realidad algo bastante fácil de hacer y seguir la ruta de bricolaje casi siempre garantizará que obtenga exactamente lo que desea y que su carrusel se diseñará para que coincida perfectamente con su tema.

En este artículo, le mostraré cómo crear un carrusel de "Publicaciones recientes" utilizando la popular biblioteca de JavaScript Owl Carousel.

Empecemos. Si está revisando los ejemplos en el sitio Owl Carousel, lo primero que notará es que sus ejemplos están escritos para un sitio HTML simple. Para que Owl Carousel funcione en WordPress, tendrá que hacer las cosas de manera ligeramente diferente.

Primero, debe descargar los archivos del sitio Owl Carousel o bifurcarlos desde Github. Una vez que tenga los archivos localmente, querrá agregar el archivo CSS principal al directorio /css/ de su tema. Ese archivo es owl.carousel.min.css. Hay otro archivo CSS para un tema y es owl.theme.default.min.css . No es un archivo requerido, por lo tanto, no lo voy a usar en este tutorial.

Una vez cargado en su tema, la ruta al archivo debería verse así:
/wp-content/themes/your-theme/css/owl.carousel.min.css
/wp-content/themes/your-theme/css/owl.carousel.min.css .

También debe incluir los archivos JS

Si su tema hijo aún no tiene una carpeta /js/ , continúe y cree una ahora. Luego, agregue owl.carousel.min.js al directorio /js/ de su tema para que se parezca a lo siguiente: /wp-content/themes/your-theme/js/owl.carousel.min.js .

A continuación, debe agregar algo de jQuery que inicialice y controle su carrusel

Este código configurará sus necesidades específicas del carrusel. Si aún no tiene un archivo JS que controle otras configuraciones de secuencias de comandos, cree un archivo settings.js y colóquelo en el mismo directorio /js/ que el anterior. Debería verse algo como: /wp-content/themes/your-theme/js/settings.js .

A continuación, agregará el siguiente código a ese mismo archivo JavaScript y lo guardará. Este código es lo que hace la llamada al carrusel y le dice cuántos elementos usar, si hacer un bucle o no, qué tipo de navegación usar y cómo responder a diferentes tamaños de dispositivos.

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


Deberá registrarse y poner en cola cualquier archivo nuevo agregado. Si ya tenía un archivo settings.js o custom.js , ya debería estar en cola en su tema. Sin embargo, debido a que está agregando al menos dos archivos nuevos ( owl.carousel.min.css y owl.carousel.min.js ), deberá abrir functions.php de su tema y agregarlos correctamente a su tema. Debería verse algo como esto:
		


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


El HTML y PHP que mostrarán el carrusel en su página
Esta sección puede variar según cómo esté configurado su tema y dónde desee colocar el carrusel. Voy a usar una plantilla personalizada que construí usando Bootstrap. Su primer paso aquí es determinar dónde desea que aparezca el carrusel. Si desea que esté en su página de inicio, debe buscar home.php o frontpage.php . El nombre varía de un tema a otro, así que asegúrese de comprender la estructura de su tema y edite el archivo correcto. Una vez que sepa qué archivo editar, debe hacer una copia en su tema secundario y asegurarse de que reside en la misma estructura de directorios. Por ejemplo, si el archivo reside en un directorio llamado templates , asegúrese de crear una carpeta llamada templates en la misma ubicación que su tema principal.
		


Una vez que esté listo para comenzar, puede agregar lo siguiente en la ubicación adecuada. En mi archivo, agregué esto al final de mi frontpage.php para que se muestre justo encima del pie de página de mi sitio.
<!-- ============ 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 ============ -->


Cuando haya terminado, debería tener un carrusel que muestre la imagen destacada de la publicación, el título, el extracto y un botón "Más" que lo vincule a la publicación completa del blog.
		



		
		
¿Quieres más consejos de diseño? Suscríbete a El Diseño
		
Le enviaremos el diseño y el contenido de WordPress más actualizados directamente a su bandeja de entrada, una vez a la semana.
		

		
		¡Sí por favor!