Как сделать ссылкой не кнопку, а всё изображение?

Question

[Виталий Бирзниекс]

Добрый день. Есть плагин на WordPress Slick Slider, встраивается шорткодом в код страницы. шорт код выглядит таким образом: [slick-slider design="design-3" image_fit="true" sliderheight="600" autoplay_interval="5000"]. В поддержке плагина нашел, что изменения нужно вносить в файлике design-№ в этом случае design-3. В настройках плагина есть способ вывода ссылки в виде кнопки "Read More Link" (Вводишь ссылку справа в окно и отображается кнопка), нужно чтобы вместо кнопки ссылку принимал изображение слайдера (Нажал на слайд и происходил переход на заданную в настройке "Read More Link" ссылку). Помогите пожалуйста товарищи!
Код в файлике:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>
<div class="wpsisac-image-slide">
	<div class="wpsisac-slide-wrap" <?php echo $slider_height_css ; ?>>	
		<img <?php if( $lazyload ) { ?>data-lazy="<?php echo esc_url($slider_img); ?>" <?php } ?> src="<?php if(empty($lazyload)) { echo esc_url($slider_img); } ?>" alt="<?php the_title(); ?>" />
		<div class="wpsisac-slider-content">
			<div class="wpsisac-bg-overlay wp-medium-7 wpcolumns">
				<h2 class="wpsisac-slide-title"><?php the_title(); ?></h2>
				<?php if( $show_content ) { ?>
					<div class="wpsisac-slider-short-content"><?php the_content(); ?></div>
				<?php }
				$sliderurl = get_post_meta( get_the_ID(),'wpsisac_slide_link', true );
				if($sliderurl != '') { ?>
					<div class="wpsisac-readmore"><a href="<?php echo esc_url($sliderurl); ?>" class="wpsisac-slider-readmore"><?php esc_html_e( 'Read More', 'wp-slick-slider-and-image-carousel' ); ?></a></div>
				<?php } ?>
			</div>
		</div>
	</div>
</div>

Comments

[Алексей Уколов]

Ну это элементарный же вопрос. Вы не видите, где в вашем коде ссылка? Или не можете перенести её в другое место в этих десяти строчках кода?

[Виталий Бирзниекс]

Алексей Уколов, к сожалению я только начал путь. И не разбираюсь в php, только-только научился пользоваться html и css более-менее нормально. Был бы Вам очень благодарен за помощь!

[Алексей Уколов]

Ну ок, давайте помогать. Вы видите, где в приведённом коде ссылка, знаете как она выглядит в html?

[Виталий Бирзниекс]

Алексей Уколов,<a href=""></a>

[Алексей Уколов]

Ну вы в коде видите её? Ваша задача - вырезать ссылку и вставить её в другое место. Она решается в два шага:
1) Найти ссылку и вырезать её.
2) Вставить в нужно место.
Можете ли вы сказать, что первый шаг вы сделали?

[Виталий Бирзниекс]

Алексей Уколов,

<a href="<?php echo esc_url($sliderurl); ?>" class="wpsisac-slider-readmore"><?php esc_html_e( 'Read More', 'wp-slick-slider-and-image-carousel' ); ?></a>

этот код, но я всё же не совсем понимаю куда мне её отправить, простите за мою глупость

[Алексей Уколов]

Отлично, первый шаг мы прошли, давайте разбираться со вторым. Вы хотите обернуть содержимое слайда в ссылку. А что такое в данном случае "содержимое", если читать код?

[Алексей Уколов]

А можно даже читать не код, а открыть DevTools в браузере и посмотреть в панели Elements визуально, какую часть вам нужно ссылкой обернуть.

[Виталий Бирзниекс]

Алексей Уколов, содержимое хотелось бы изображение или нужно в котором находится изображение?

[Алексей Уколов]

Поэкспериментируйте - попробуйте обернуть изображение, посмотрите что получится. Если не устроит, подумайте, куда ещё можно переместить ссылку.

[Виталий Бирзниекс]

Алексей Уколов, в настройках плагина есть вот такое окошко, которое выводит кнопку с ссылкой, которую вводишь в окошко справа. Нужно при вводе туда ссылки не выводилась кнопка с ссылкой, а чтобы весь слайд был одной сплошной ссылкой. То что Вы мне помогли найти, поможет мне с этим или это какой-то иной способ?

[Алексей Уколов]

Конечно, поможет, ведь в приведённом коде уже выводится эта ссылка, вам её нужно только перенести в другое место.

[Виталий Бирзниекс]

Алексей Уколов, похоже я что-то не так делаю, у меня просто ссылочный текст "Read More" перемещается по секции и всё. Можете взглянуть на сайте 4grani.com домашняя страница.

[Виталий Бирзниекс]

Алексей Уколов, у меня получилось так:

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}
?>
<div class="wpsisac-image-slide">
	<div class="wpsisac-slide-wrap" <?php echo $slider_height_css ; ?>>	
		<?php $sliderurl = get_post_meta( get_the_ID(),'wpsisac_slide_link', true );
		if( $sliderurl != '' ) { ?>
			<a href="<?php echo esc_url($sliderurl); ?>"><img <?php if($lazyload) { ?>data-lazy="<?php echo esc_url($slider_img); ?>" <?php } ?> src="<?php if(empty($lazyload)) { echo esc_url($slider_img); } ?>" alt="<?php the_title(); ?>" /></a>
		<?php } else {  ?>
			<img <?php if( $lazyload ) { ?>data-lazy="<?php echo esc_url($slider_img); ?>" <?php } ?> src="<?php if(empty($lazyload)) { echo esc_url($slider_img); } ?>"  alt="<?php the_title(); ?>" />
		<?php } ?>
		<div class="wpsisac-slider-content">
			<div class="wpsisac-bg-overlay wp-medium-7 wpcolumns">
				<h2 class="wpsisac-slide-title"><?php the_title(); ?></h2>
				<?php if( $show_content ) { ?>
					<div class="wpsisac-slider-short-content"><?php the_content(); ?></div>
				<?php }
				$sliderurl = get_post_meta( get_the_ID(),'wpsisac_slide_link', true );
				if($sliderurl != '') { ?>
				<?php } ?>
			</div>
		</div>
	</div>
</div>

Но всё равно работает не до конца правильно, места на уровне div с текстом не работает ссылка.

[Алексей Уколов]

Ну так оберните этот див тоже в ссылку.

[Виталий Бирзниекс]

Алексей Уколов, всё получилось! Спасибо сенсей!

Answer 1

[Undefiend]

<?php
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly
}
?>
<div class="wpsisac-image-slide">

<a href="<?php echo esc_url($sliderurl); ?>" class="wpsisac-slider-readmore">

	<div class="wpsisac-slide-wrap" <?php echo $slider_height_css ; ?>>	
		<img <?php if( $lazyload ) { ?>data-lazy="<?php echo esc_url($slider_img); ?>" <?php } ?> src="<?php if(empty($lazyload)) { echo esc_url($slider_img); } ?>" alt="<?php the_title(); ?>" />
		<div class="wpsisac-slider-content">
			<div class="wpsisac-bg-overlay wp-medium-7 wpcolumns">
				<h2 class="wpsisac-slide-title"><?php the_title(); ?></h2>
				<?php if( $show_content ) { ?>
				<div class="wpsisac-slider-short-content"><?php the_content(); ?></div>
				<?php }
				$sliderurl = get_post_meta( get_the_ID(),'wpsisac_slide_link', true );
				if($sliderurl != '') { ?>
				<div class="wpsisac-readmore"></div>
				<?php } ?>
			</div>
		</div>
	</div>
	
 </a>
 
</div>

Comments

[Алексей Уколов]

Ну видите же, что автор нулевой. Если уж писать ему код, то делать это правильно. Это вот что у вас?

if($sliderurl != '') { ?>
  <div class="wpsisac-readmore"></div>
<?php } ?>

Почему $sliderurl создаётся после того, как используется?