In this tutorial, I'm going to guide you through the steps to create custom links for each of the images in an image carousel on your website. This will improve the user experience and contribute to search engine optimization.
Step 1: Preparing the Topic
Before you begin, it is essential to make sure you have an active child theme on your website so that you do not lose your custom settings when updating the parent theme.
Step 2: Customizing the Carousel
Editing the Child Theme's Functions.php File: Go to the appearance section in the WordPress dashboard and select the child theme file editor. Make sure you have the child theme selected and open the functions.php file.
Incorporating Custom Code: Copy and paste the code provided in the link that Carlos has left in the video description at the end of the child theme's functions.php file.
Saving Changes: Once you have added the code, save the changes and update the file.
Step 3: Setting Up the Carousel
Carousel Widget Added: Head over to the widgets section in your WordPress dashboard and drag the Image Carousel widget to the desired location on your website.
Selection of Images: Select the images you want to include in the carousel. For each image, you will have the option to add a custom link.
Customizing Links: Define custom links for each image in the carousel. You can choose whether you want the link to open in a new window or in the same browser window.
Customization Options: Adjust customization options based on preferences, such as image size, carousel navigation, etc.
Save and Update: Once all the links and customization options are configured, save the changes and update the website.
Step 4: Verification and Optimization
Verifying Links: Refresh the page and verify that the custom links are working correctly. Click on each image in the carousel to make sure they direct you to the correct URLs.
SEO Optimization: Make sure the URLs your links point to are relevant and SEO-optimized. Use relevant keywords in your links and make sure your target pages are well-optimized.
By following these steps, you will have created an image carousel with custom links on your website, which will improve the user experience and contribute to your SEO strategy. Remember to follow SEO best practices to keep your website optimized and relevant to search engines. If you have any questions, leave them in the comments and Carlos will be happy to help you. See you next time!
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;
}
If you need any plugin for this tutorial you can find it in the plugins page.
