Solucionado
Pessoal, em outro projeto eu estou usando um slider e gostaria de inserir as imagens nesse slider e fazer dessas imagens links para o conteúdo mas queria também que ao clicar o corpo da notícia aparecesse na mesma página abaixo do slider. Como poderia fazer isso?
Fala aí Edilson, tudo bem? Isso pode ser feito de N maneiras, vou te falar a maneira que pensei em fazer no momento.
Crie uma estrutura em seu HTML que permita esse tipo de necessidade, algo mais ou menos assim:
<div class="slide">
<img alt="DESCRICAO" src="LINK" data-content="1">
</div>
<div class="slide-conteudo>
<div class="noticia" data-control="1">...</div>
</div>Ai quando for clicado na imagem você pega o valor de data-content e busca o data-control dele:
const conteudo = document.querySelector('[data-control="1"')Caso encontre o control você pode estar adicionando ou removendo uma classe dele para mostrar/esconder:
conteudo.classList.add('visivel')Espero ter ajudado.
No img essa propriedade data-content é necessária? Pois a inserção da imagem será com o php, não terei como usar essa tag.
Ela é necessário para saber qual noticia ela corresponde, você pode tentar outras maneiras, só precisa linkar a noticia com a imagem.
Espero ter ajudado.
Matheus, desculpa a demora em te responder. Eu estou o loop do wordpress para fazer isso e acho que precisaria fazer um for para usar a sua solução. O meu código tá assim.
<div class="swiper-container">
<div class="swiper-wrapper">
<?php
$tipoPost = new WP_Query(array(
'posts-per-page' => 1,
'post_type' => 'noticia'
));
if($tipoPost->have_posts()) {?>
<?php
while($tipoPost->have_posts()) {
$tipoPost->the_post();
echo '<div class="swiper-slide">';
the_post_thumbnail();
the_title('<h3 class="titulo-noticia">', '</h3>');
echo '</div>';
?>
<?php
}
?>
<?php
}
?>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<?php
if($tipoPost->have_posts()) {
while($tipoPost->have_posts()) {
$tipoPost->the_post();
echo '<section class="corpo-noticia">';
the_content();
echo '</section>';
}
wp_reset_postdata();
}
?>Fala ai Edilson, o que você pode fazer é tornar adicionar um a dentro do seu h3 com o link para onde precisa mandar o usuário.
Algo assim:
<h3>
<a href="LINK">TITULO</a>
</h3>Espero ter ajudado.
Eu consegui Matheus, obrigado pela ajuda. Eu consegui pensar numa forma de usar a primeira solução que você sugeriu.
Perfeito Edilson, fico feliz que tenha conseguido resolver.
Não deixe de marcar o tópico como solucionado, assim conseguimos ajudar outros alunos com problemas iguais ou parecidos.
Abraços e bons estudos.