✅ Enlaces personalizados para cada imagen del carrusel de Elementor
https://youtu.be/wjwqCjCV9Qo1° Instalar Code Snippets
2° Instalar el siguiente código: https://gist.github.com/CharlieEtienne/c55fa9ada93cd33ef88d8641fc7fa98d
3° Crear un carrusel y configurar Enlace = Archivos de medio
<?php
add_filter( 'attachment_fields_to_edit', function( $form_fields, $post ) {
$form_fields[ 'elementor_carousel_custom_link' ] = array(
'label' => __( 'Custom link', 'elementor' ),
'input' => 'text',
'value' => get_post_meta( $post->ID, 'elementor_carousel_custom_link', true ),
'helps' => __( 'This will add a link to images in Elementor Carousel', 'elementor' ),
);
$target = (bool) get_post_meta( $post->ID, 'elementor_carousel_custom_link_target', true );
$checked = ( $target ) ? 'checked' : '';
$form_fields[ 'elementor_carousel_custom_link_target' ] = array(
'label' => __( 'Open in new tab ?', 'elementor' ),
'input' => 'html',
'html' => "<input type='checkbox' {$checked} name='attachments[{$post->ID}][elementor_carousel_custom_link_target]' id='attachments[{$post->ID}][elementor_carousel_custom_link_target]' />",
'value' => $target,
'helps' => __( 'Open custom link in Elementor Carousel in new tab ?', 'elementor' ),
);
return $form_fields;
}, 10, 2 );
add_filter( 'attachment_fields_to_save', function( $post, $attachment ) {
if ( isset( $attachment[ 'elementor_carousel_custom_link' ] ) ) {
update_post_meta(
$post[ 'ID' ],
'elementor_carousel_custom_link',
$attachment[ 'elementor_carousel_custom_link' ]
);
}
if ( isset( $attachment[ 'elementor_carousel_custom_link_target' ] ) ) {
$target = ( $attachment[ 'elementor_carousel_custom_link_target' ] == 'on' ) ? '1' : '0';
update_post_meta( $post[ 'ID' ], 'elementor_carousel_custom_link_target', $target );
}
return $post;
}, 10, 2 );
add_action( 'elementor/widget/render_content', function( $content, $widget ) {
if ( 'image-carousel' === $widget->get_name() ) {
// ob_start();
$settings = $widget->get_settings_for_display();
if ( empty( $settings[ 'carousel' ] ) ) {
return;
}
$slides = [];
foreach ( $settings[ 'carousel' ] as $index => $attachment ) {
$image_url = Elementor\Group_Control_Image_Size::get_attachment_image_src( $attachment[ 'id' ], 'thumbnail', $settings );
if ( ! $image_url && isset( $attachment[ 'url' ] ) ) {
$image_url = $attachment[ 'url' ];
}
$image_html = '<img class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Elementor\Control_Media::get_image_alt( $attachment ) ) . '" />';
$link_tag = '';
$link = elementor_carousel_custom_link_get_link_url( $attachment, $settings );
if ( $link ) {
$link_key = 'link_' . $index;
if ( get_elementor_carousel_custom_link( $attachment ) ) {
$link_tag = '<a data-elementor-open-lightbox="no" href="' . get_elementor_carousel_custom_link( $attachment ) . '" target="' . get_elementor_carousel_custom_link_target( $attachment ) . '">';
} else {
$link_tag = '<a ' . $widget->get_render_attribute_string( $link_key ) . '>';
}
}
$image_caption = elementor_carousel_custom_link_get_image_caption( $attachment, $widget );
$slide_html = '<div class="swiper-slide">' . $link_tag . '<figure class="swiper-slide-inner">' . $image_html;
if ( ! empty( $image_caption ) ) {
$slide_html .= '<figcaption class="elementor-image-carousel-caption">' . wp_kses_post( $image_caption ) . '</figcaption>';
}
$slide_html .= '</figure>';
if ( $link ) {
$slide_html .= '</a>';
}
$slide_html .= '</div>';
$slides[] = $slide_html;
}
if ( empty( $slides ) ) {
return;
}
$show_dots = ( in_array( $settings[ 'navigation' ], [ 'dots', 'both' ] ) );
$show_arrows = ( in_array( $settings[ 'navigation' ], [ 'arrows', 'both' ] ) );
$slides_count = count( $settings[ 'carousel' ] );
?>
<div <?php $widget->print_render_attribute_string( 'carousel-wrapper' ); ?>>
<div <?php $widget->print_render_attribute_string( 'carousel' ); ?>>
<?php // PHPCS - $slides contains the slides content, all the relevent content is escaped above. ?>
<?php echo implode( '', $slides ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
<?php if ( 1 < $slides_count ) : ?>
<?php if ( $show_dots ) : ?>
<div class="swiper-pagination"></div>
<?php endif; ?>
<?php if ( $show_arrows ) : ?>
<div class="elementor-swiper-button elementor-swiper-button-prev">
<i class="eicon-chevron-left" aria-hidden="true"></i>
<span class="elementor-screen-only"><?php echo esc_html__( 'Previous', 'elementor' ); ?></span>
</div>
<div class="elementor-swiper-button elementor-swiper-button-next">
<i class="eicon-chevron-right" aria-hidden="true"></i>
<span class="elementor-screen-only"><?php echo esc_html__( 'Next', 'elementor' ); ?></span>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php
} else {
return $content;
}
}, 10, 2 );
function get_elementor_carousel_custom_link( $attachment ) {
$custom_link = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link' );
if ( isset( $custom_link ) && is_array( $custom_link ) && ! empty( $custom_link[ 0 ] ) ) {
return $custom_link[ 0 ];
}
return false;
}
function get_elementor_carousel_custom_link_target( $attachment ) {
$target = get_post_meta( $attachment[ 'id' ], 'elementor_carousel_custom_link_target' );
if ( isset( $target ) && is_array( $target ) && ! empty( $target[ 0 ] ) ) {
if ( $target[ 0 ] === '1' ) {
return "_blank";
}
return "";
}
return "";
}
function elementor_carousel_custom_link_get_link_url( $attachment, $instance ) {
if ( 'none' === $instance[ 'link_to' ] ) {
return false;
}
if ( 'custom' === $instance[ 'link_to' ] ) {
if ( empty( $instance[ 'link' ][ 'url' ] ) ) {
return false;
}
return $instance[ 'link' ];
}
return [
'url' => wp_get_attachment_url( $attachment[ 'id' ] ),
];
}
function elementor_carousel_custom_link_get_image_caption( $attachment, $widget ) {
$caption_type = $widget->get_settings_for_display( 'caption_type' );
if ( empty( $caption_type ) ) {
return '';
}
$attachment_post = get_post( $attachment[ 'id' ] );
if ( 'caption' === $caption_type ) {
return $attachment_post->post_excerpt;
}
if ( 'title' === $caption_type ) {
return $attachment_post->post_title;
}
return $attachment_post->post_content;
}
================================================================
Cómo crear sliders gratis con Elementor y OoohBoi Steroids (Sin probar)
https://youtu.be/Urj_M-0uQns
0 Comentarios