Question

I m using the Oria theme in wordpress, here s my website: http://www.chooseyourtelescope.com/

I would like the carousel images to be clickable, not only the titles (all, sun, deep sky, etc).

Here is the PHP code for the carousel (I dont know this language):

<?php
/**
 * Carousel template
 *
 * @package Oria
 */

    //Scripts
    function oria_slider_scripts() {
            wp_enqueue_script( 'oria-owl-script', get_template_directory_uri() .  '/js/owl.carousel.min.js', array( 'jquery' ), true ); 
            wp_enqueue_script( 'oria-slider-init', get_template_directory_uri() .  '/js/slider-init.js', array(), true );                       

            //Slider speed options
            if ( ! get_theme_mod('carousel_speed') ) {
                $slideshowspeed = 4000;
            } else {
                $slideshowspeed = intval(get_theme_mod('carousel_speed'));
            }           
            $slider_options = array(
                'slideshowspeed' => $slideshowspeed,
            );          
            wp_localize_script('oria-slider-init', 'sliderOptions', $slider_options);           
    }
    add_action( 'wp_enqueue_scripts', 'oria_slider_scripts' );

    //Template
    if ( ! function_exists( 'oria_slider_template' ) ) {
        function oria_slider_template() {

            //Get the user choices
            $number     = get_theme_mod('carousel_number');
            $cat        = get_theme_mod('carousel_cat');
            $number     = ( ! empty( $number ) ) ? intval( $number ) : 6;
            $cat        = ( ! empty( $cat ) ) ? intval( $cat ) : '';

            $args = array(
                'posts_per_page'        => $number,
                'post_status'           => 'publish',
                'cat'                   => $cat,
                'ignore_sticky_posts'   => true         
            );
            $query = new WP_Query( $args ); 
            if ( $query->have_posts() ) {
            ?>
            <div class="oria-slider slider-loader">
                <div class="featured-inner clearfix">
                    <div class="slider-inner">
                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                        <div class="slide">
                            <?php if ( has_post_thumbnail() ) : ?>
                                <?php the_post_thumbnail( 'oria-carousel' ); ?>
                            <?php else : ?>
                                <?php echo '<img src="' . get_stylesheet_directory_uri() . '/images/placeholder.png"/>'; ?>
                            <?php endif; ?>
                            <?php the_title( sprintf( '<h3 class="slide-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>
                        </div>
                    <?php endwhile; ?>
                    </div>
                </div>
            </div>
            <?php }
            wp_reset_postdata();
        }
    }

Maybe there is a way to solve it only with CSS but I tried and couldn t find it..

Answer 1

The following line is where the link is added into the HTML

<?php the_title( sprintf( '<h3 class="slide-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h3>' ); ?>

the_title() is a Wordpress function for making a title. The first argument is the HTML before the title text and the second is the HTML to go after it.

sprintf() is a PHP function which takes a string with placeholders (such as %s) and replaces them with the subsequent arguments given in order. An example is:

sprintf( "Hi %s, you have %d messages!", get_username(), get_num_messages() );
--> Hi Dave! You have 10 messages!

As a sidenote, printf() directly displays the result in the output rather than returning a string to be assigned to a variable

esc_url( get_permalink() ) are Wordpress functions that get the URL of the carousel slider and immediately escape any dodgy characters that could result in a Cross Site Scriping attack.

All that's needed to be done is to take out the <a href ...> tag and put it around the <div> containing the slide. This makes the sprintf() bit irrelevant so it can be safely discarded.

<?php echo '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">'; ?>
    <div class="slide">
        <?php if ( has_post_thumbnail() ) : ?>
            <?php the_post_thumbnail( 'oria-carousel' ); ?>
        <?php else : ?>
            <?php echo '<img src="' . get_stylesheet_directory_uri() . '/images/placeholder.png"/>'; ?>
        <?php endif; ?>
        <?php the_title( '<h3 class="slide-title">', '</h3>' ); ?>
    </div>
</a>

Update

I just checked your website and the code I suggested will take away the red box surrounding the title of the carousel slides. To fix this, you can either keep the original link in the title and just add that extra link surrounding the slide rather than moving it or you could adjust your CSS code so that the style for the link gets applied to .slide-title.

Link on Images (Oria Theme- Wordpress)

1 个答案:

Update