He estado tratando de crear un control deslizante de publicación reciente usando el control deslizante deslizante para mi página de wordpress. Quiero poder agregar el control deslizante en elementor usando un código abreviado. No tengo mucha experiencia en codificación. Así que no estoy seguro de dónde me estoy equivocando. Me las arreglé para componer la siguiente pieza de codificación basada en algunos ejemplos que encontré en línea y agregué el archivo javascript usando un complemento js personalizado para wordpress. Evidentemente algo he hecho mal, porque si activo este archivo, elementor no cargará por un error crítico. He estado tratando de crear un control deslizante de publicación personalizado durante un tiempo sin éxito. Realmente agradecería cualquier ayuda que pueda obtener. ¡Gracias!
//Enqueue Slick
function add_slick() {
wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/assets/css/slick.css' );
wp_enqueue_style( 'slider-theme', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css');
wp_enqueue_script( 'slick-script', get_stylesheet_directory_uri() . '/assets/js/slick.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_slick' );
//Build Shortcode to Loop Over Testimonials
function recentpost_loop_func( $atts ) {
ob_start();
$query = new WP_Query( array(
'post_type' => 'post',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'date',
) );
if ( $query->have_posts() ) { ?>
<div class="recentpost-slider">
<?php while ( $query->have_posts() ) : $query->the_post(); ?>
<div class="single-post">
<a class="single-post-image" href="https://stackoverflow.com/questions/61970587/<?php the_permalink(); ?>"><?the_post_thumbnail(); ?></a>
<a class="single-post-title" href="https://stackoverflow.com/questions/61970587/<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
<?php $myvariable = ob_get_clean();
return $myvariable;
}
};
add_shortcode( 'recentpostSlider', 'recentpost_loop_func' );
//Initiliaze Slick
jQuery(document).ready(function(){
$('.recentpost-slider').slick({
centerMode: true,
centerPadding: 50px,
});
});
.