En este tutorial te voy a guiar a través de los pasos para crear enlaces personalizados para cada una de las imágenes de un carrusel de imágenes en tu sitio web. Esto mejorará la experiencia del usuario y contribuirá a la optimización para motores de búsqueda.
Paso 1: Preparación del Tema
Antes de comenzar, es fundamental asegurarse de tener un tema hijo activo en el sitio web para no perder los ajustes personalizados al actualizar el tema principal.
Paso 2: Personalización del Carrusel
Edición del Archivo Functions.php del Tema Hijo: Accede a la sección de apariencia en el panel de WordPress y selecciona el editor de archivos del tema hijo. Asegúrate de tener el tema hijo seleccionado y abre el archivo functions.php.
Incorporación del Código Personalizado: Copia y pega el código proporcionado en el enlace que Carlos ha dejado en la descripción del video al final del archivo functions.php del tema hijo.
Guardado de los Cambios: Una vez añadido el código, guarda los cambios y actualiza el archivo.
Paso 3: Configuración del Carrusel
Agregado del Widget del Carrusel: Dirígete a la sección de widgets en el panel de WordPress y arrastra el widget del carrusel de imágenes a la ubicación deseada en el sitio web.
Selección de las Imágenes: Selecciona las imágenes que deseas incluir en el carrusel. Para cada imagen, tendrás la opción de agregar un enlace personalizado.
Personalización de los Enlaces: Define los enlaces personalizados para cada imagen del carrusel. Puedes elegir si quieres que el enlace se abra en una nueva ventana o en la misma ventana del navegador.
Opciones de Personalización: Ajusta las opciones de personalización según las preferencias, como el tamaño de las imágenes, la navegación del carrusel, etc.
Guardado y Actualización: Una vez configurados todos los enlaces y opciones de personalización, guarda los cambios y actualiza el sitio web.
Paso 4: Verificación y Optimización
Verificación de los Enlaces: Refresca la página y verifica que los enlaces personalizados funcionen correctamente. Haz clic en cada imagen del carrusel para asegurarte de que te dirijan a las URL correctas.
Optimización SEO: Asegúrate de que las URL a las que apuntan tus enlaces sean relevantes y estén optimizadas para SEO. Utiliza palabras clave relevantes en los enlaces y asegúrate de que las páginas de destino estén bien optimizadas.
Siguiendo estos pasos, habrás creado un carrusel de imágenes con enlaces personalizados en tu sitio web, lo que mejorará la experiencia del usuario y contribuirá a tu estrategia de SEO. Recuerda seguir las mejores prácticas de SEO para mantener tu sitio web optimizado y relevante para los motores de búsqueda. Si tienes alguna pregunta, déjala en los comentarios y Carlos estará encantado de ayudarte. ¡Hasta la próxima!
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 decoding="async" class="swiper-slide-image" src="' . esc_attr( $image_url ) . '" alt="' . esc_attr( Elementor\Control_Media::get_image_alt( $attachment ) ) . '" title="Añadir enlaces personalizados a cada imagen en carrusel de Elementor 1">';
$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;
}
Si para este tutorial necesitas algún plugin lo podrás encontrar en la pagina de plugins.
